DOM

下述内容主要讲述了《JavaScript高级程序设计(第3版)》第10章关于“DOM”。

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次变化的节点树,允许开发人员添加、移除和修改页面的某一部分。

一、节点层次

在HTML页面中,文档元素始终都是<html>元素。

1. Node类型

JavaScript中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法。 (1)nodeType属性:用于表明节点的类型。

常量

Node.ELEMENT_NODE

1

Node.ATTRIBUTE_NODE

2

Node.TEXT_NODE

3

Node.CDATA_SECTION_NODE

4

Node.ENTITY_REFERENCE_NODE

5

Node.ENTITY_NODE

6

Node.PROCESSING_INSTRUCTION_NODE

7

Node.COMMENT_NODE

8

Node.DOCUMENT_NODE

9

Node.DOCUMENT_TYPE_NODE

10

Node.DOCUMENT_FRAGMENT_NODE

11

Node.NOTATION_NODE

12

需要注意的是,在IE中不支持常量

if(someNode.nodeType === 1){    // 不使用Node.ELEMENT_NODE
    console.log("node is an element");
}

(2)nodeName和nodeValue

if(someNode.nodeType === 1){
    var name = someNode.nodeName,   // 元素的标签名
        value = someNode.nodeValue; // null
    console.log(name, value);
}

(3)节点关系 文档中所有节点之间都存在着这样或那样的关系。节点间的各种关系可以用传统的家族关系来描述,相对于把文档树比喻成家谱

属性

说明

childNodes

直接子元素;nodeList对象,保存一组有序节点,可通过位置访问

parentNode

文档树中的父节点

previousSibling

前一个兄弟节点

nextSibling

后一个兄弟节点

firstChild

第一个子节点

lastChild

最后一个子节点

ownerDocument

整个文档的文档节点Document

说明:

  • hasChildNodes()在节点包含一个或多个子节点的情况下返回true
  • NodeList对象拥有length属性,但并不是Array实例;其是基于DOM结构动态执行查询的结果,因此DOM结构的变化能够自动反应在NodeList对象中。可以通过方括号,也可以使用item()方法访问NodeList中的节点。

示例

<div id="content">
    <p>李刚</p>
    <p>ligang</p>
    <p>http://blog.csdn.net/ligang2585116</p>
</div>
var div = document.getElementById("content");
console.log(div.hasChildNodes());   // true
console.log(div.ownerDocument);     // #document

var children = div.childNodes;
console.log(children[0]);       // <p>李刚</p>  注意:这里有可能是#text,格式化回车缩进导致!!
console.log(children.item(1));  // <p>ligang</p>

var p1 = div.firstChild;
console.log(p1.parentNode);         // <div id=​"content">​…​</div>​
console.log(p1.previousSibling);    // null
console.log(p1.nextSibling);        // <p>ligang</p>

(4)操作节点 因为关系指针是只读的,所以DOM提供了一些操作节点的方法。

方法

说明

appendChild(newDom)

向childNode列表的末尾添加一个节点

inserBefore(newDom, 参照节点)

新插入的节点作为参照节点的同胞节点,同时返回该插入节点

replaceChild(newDom, 被替换的节点)

新插入的节点将占据被替换节点的位置

removeChild(要移除的节点)

返回被移除的节点,被移除的节点仍然为稳当所有,只是在文档中没有了位置

注意:并不是所有节点都有子节点,如果在不支持子节点的节点上调用了上述方法,将会导致错误发生。 示例:将blog元素移动到content中

<!-- 执行前 -->
<div id="content">
    <p>李刚</p>
</div>
<p id="blog">http://blog.csdn.net/ligang2585116</p>
var div = document.getElementById("content"),
    p = document.getElementById("blog");
div.appendChild(p);
<!-- 执行后 -->
<div id="content">
    <p>李刚</p>
    <p id="blog">http://blog.csdn.net/ligang2585116</p>
</div>

说明:如果传入到appendChild()中的节点已经是文档的一部分了,那结果就是将该节点从原来的位置转移到新位置。

示例:将blog作为content的第一个子元素,将company作为content的最后一个子元素

<!-- 执行前 -->
<div id="content">
    <p>李刚</p>
</div>
<p id="blog">http://blog.csdn.net/ligang2585116</p>
<p id="company">ptmind</p>
var content = document.getElementById("content"),
    blog = document.getElementById("blog"),
    company = document.getElementById("company");
content.insertBefore(blog, content.childNodes.item(0)); // content.firstChild
content.insertBefore(company, null);
<!-- 执行后 -->
<div id="content">
    <p>李刚</p>
    <p id="blog">http://blog.csdn.net/ligang2585116</p>
    <p id="company">ptmind</p>
</div>

(5)其他方法

方法

说明

cloneNode(boolean)

true:复制节点及整个子节点树;false:只复制节点本身

normalize()

处理文档树中的文本节点

所有节点都有上述方法!

2. Document类型

JavaScript通过Document类型表示文档。在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面。而且,document对象是window对象的一个属性。

document.documentElement; // 获取对<html>的引用
document.body;  // 获取对<body>的引用
/* 以本人blog为例 */
document.title; // 获取页面title信息:"李刚的学习专栏 - 博客频道 - CSDN.NET"
document.URL;   // 获取页面完整的URL:"http://blog.csdn.net/ligang2585116"
document.domain;    // 获取页面的域名:"blog.csdn.net"  
document.referrer;  // 获取链接到当前页面的那个页面的URL:直接访问为空!

技巧:由于跨域安全限制,来自不同子域的页面无法通过JavaScript通信。而通过将每个页面的document.domain设置为相同的值,这些页面就可以互相访问对方包含的JavaScript对象了。例如,在www.xxx.com中嵌入了一框架,框架内页面加载自report.xxx.com;两者不能进行访问。可以将两个页面的document.domain值都设置为xxx.com,就可以互相访问了。 需要注意的是,浏览器对domain有一限制,即如果域名开始时松散的(xxx.com),那么不能将它再设置为紧绷的(www.xxx.com)。 (1)查找元素

方法

说明

getElementById()

只返回文档中第一次出现的元素;如果不存在带有相应id的元素,则返回null

getElementsByTagName()

返回的是包含零或多个元素的HTMLCollection对象

getElementsByName()

返回带有指定name特性的所有元素

var images = document.getElementsByTagName("img");
images.item(0);
images.namedItem("myImage");

上述两种方式都可以通过[]代替。在后台,对数值索引会调用item(),对字符串索引会调用namedItem()。 (2)特殊集合

属性

说明

document.anchors

包含文档中所有带name特性的元素

document.applets

包含文档中所有的元素

document.forms

包含文档中所有的元素

document.images

包含文档中所有的元素

document.links

包含文字所有带href特性的元素

(3)DOM一致性检测

document.implementation.hasFeature("名称", "版本号");
document.implementation.hasFeature("XML", "1.0");   // true

存在实现与规范不一致的情况,所以建议除了检测hasFeature()之外,还同时使用能力检测。 (4)文档写入

方法

说明

write()

原样写入

writeln()

在字符串末尾添加有一个换行符(\n)

open()

打开网页输出流

close()

关闭网页输出流

示例:

<span>my name is:</span>
document.write("<strong>ligang</strong>");  // my name is: ligang
window.onload = function(){
    document.write("<strong>ligang</strong>"); // ligang
};

在文档加载结束后再调用document.write(),输出的内容将会重写整个页面。 write()、writeln()可以动态包含外部资源,需注意不能直接包含"</script>",因为其会被解释为脚本块的结束。

document.write("<script type=\"text/javascript\" src=\"file.js\"><\/script>"); // ligang

3. Element类型

Element类型用于表现XML和HTML元素。可以通过nodeName或tagName属性获取元素的标签名。 注意:在HTML中,标签名都以大写字母表示;在XML中,标签名始终与源代码中的保持一致。 (1)HTML元素的标准特性 示例: <div id="myDiv" title="ligang Demo" lang="zh" dir="ltr" class="bd bf">http://blog.csdn.net/ligang2585116</div>

属性

说明

div.id

元素在文档中的唯一标识符

“myDiv”

div.title

附件说明信息,悬停展示

“ligang Demo”

div.lang

元素内容的语言代码

“zh”

div.dir

语言方向:ltr左到右;rtly右到左

“ltr”

div.className

CSS类

“bd bf”

(2)特性 获取特性:dom.getAttribute("特性名") 如不存在返回null

注意有两类特殊的特性:

  • style,返回CSS文本,通过属性访问则返回一个对象;
  • onclick等事件处理程序,返回相应代码的字符串。

示例

<a href="javscript:;" style="background-color: grey;text-underline: none;"
   οnclick="function(){console.log('la')}">http://blog.csdn.net/ligang2585116</a>
var a = document.getElementsByTagName("a")[0];
a.getAttribute("style");    // "background-color: grey;text-underline: none;"
a.style;    // CSSStyleDeclaration {0: "background-color", all: ""…}
a.getAttribute("onclick");  // "function(){console.log('la')}"

设置特性:dom.setAttribute("特性名","值") (3)attributes属性 attributes属性中包含一个NamedNodeMap

属性

说明

dom.attributes.getNamedItem(name)

返回nodeName属性等于name的节点

dom.attributes.removeNamedItem(name)

从列表中移除nodeName属性等于name的节点

dom.attributes.setNamedItem(attr)

向列表中添加节点,以节点的nodeName属性为索引

dom.attributes.item(pos)

返回位于数字pos位置处的节点

示例:设置属性

// 方式一:示例:setNamedItem
var target = document.createAttribute("target");
target.nodeValue = "_blank";
a.attributes.setNamedItem(target);
// 方式二:setAttribute
a.setAttribute("target", "_blank");

(5)创建元素

document.createElement("元素名/完整元素");

创建新元素的同时,也为新元素设置了ownerDocument属性。 示例:创建元素并添加到文档树

var a = document.createElement("a");
a.href = "http://blog.csdn.net/ligang2585116";
a.text = "http://blog.csdn.net/ligang2585116";
document.body.appendChild(a);

(6)元素的子节点 元素可以有任意数量的子节点和后代节点。 示例:为了兼容浏览器差异

for(var i = 0, len = element.childNodes.length; i < len; i++){
    if(element.childNodes[i].nodeType === 1){
        // 执行某些操作
    }
}

4. Text类型

文本节点由Text类型表示,包含纯文本。纯文本可以包含转义后的HTML字符,但不能包含HTML代码。 (1)创建文本节点:document.createTextNode("文本") (2)规范化文本节点:在一个包含两个或多个文本节点元素上调用normalize(),则将会所有文本节点合并成一个节点。 (3)分割文本节点:将一个文本节点分成两个文本节点,按指定的位置分割nodeValue值。 示例:规范化文本节点

var div = document.getElementById("content");
var textNode = document.createTextNode("Hello"),
    anotherNode = document.createTextNode("Ligang");
div.appendChild(textNode);
div.appendChild(anotherNode);
console.log(div.childNodes.length); // 2
div.normalize();
console.log(div.childNodes.length); // 1
var newNode = div.firstChild.splitText(5);  // "Ligang"
console.log(div.childNodes.length); // 2

5. Comment类型

注释在DOM中是通过Comment类型来表示的。 Comment类型与Text类型继承自相同的基类,因此它拥有除了splitText()之外的所有方法,当然也可通过nodeValue或data属性来取得注释的内容。

6. DocumentFragement类型

DocumentFragement类型中没有对应的标记,DOM规定文档片段是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源。可以当做“仓库”使用。 示例

var fragment = document.createDocumentFragment();
var li = null;
for(var i = 0; i < 5; i++){
    li = document.createElement("li");
    li.appendChild(document.createTextNode("Item "+ (i+1)));
    fragment.appendChild(li);
}
// 文档片段的所有子节点都被删除并转移到<ul>元素中
document.getElementById("myUl").appendChild(fragment);

7. 其他类型

CDATASection类型、DocumentType类型很少用到,这里不再赘述。

二、DOM操作技术

1. 动态脚本

在元素添加到页面之前,是不会下载外部文件的。(不同于image) 相关内容请查看:事件:事件类型-UI事件

示例:动态加载JavaScript文件

function loadScript(url){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
}

示例:动态加载JavaScript代码

function loadScriptString(code){
    var script = document.createElement("script");
    script.type = "text/javascript";
    try{
        script.appendChild(document.createTextNode(code));
    }catch (e){
        script.text = code; // 兼容IE
    }
    document.body.appendChild(script);
}

2. 动态样式

同动态加载脚本类似,添加到页面之后才会加载资源。

示例:动态加载CSSt文件

function loadStyle(url){
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    document.head.appendChild(link);
}

示例:动态加载CSS代码

function loadStyleString(code){
    var style = document.createElement("style");
    style.type = "text/css";
    try{
        style.appendChild(document.createTextNode(code));
    }catch (e){
        style.stylesheet.cssText = code;    // 兼容IE
    }
    document.head.appendChild(style);
}

3. 操作表格

为了方便构建表格,HTML DOM还为<table><tbody><tr>元素添加了一些属性: 为<teble>元素添加的属性和方法:

属性方法

说明

caption

(若有)保存着对<caption>元素的指针

tHead

(若有)保存着对<tHead>元素的指针

tFoot

(若有)保存着对<tFoot>元素的指针

tBodies

一个所有<tbody>元素的HTMLCollection

rows

一个所有行的HTMLCollection

createCaption

创建<caption>元素,放到表格中,返回引用

createTHead()

创建<thead>元素,放到表格中,返回引用

createTFoot()

创建<tfoot>元素,放到表格中,返回引用

deleteCaption()

删除<caption>元素

deleteTHead()

删除<thead>元素

deleteTFoot()

删除<tfoot>元素

insertRow(pos)

向rows集合中的指定位置 插入一行

deleteRow(pos)

删除指定位置的一行

<tbody>元素添加的属性和方法:

属性方法

说明

rows

一个保存着<tbody>元素中行的HTMLCollection

insertRow(pos)

向rows集合中指定位置插入一行,返回新行的引用

deleteRow(pos)

删除指定位置的行

<tr>元素添加的属性和方法:

属性方法

说明

cells()

一个保存着<tr>元素中的单元格的HTMLCollection

insertCell(pos)

向cells集合中的指定位置插入一个单元格,返回新单元格引用

deleteCell(pos)

删除指定位置的单元格

总结:NodeList、NameNodeMap和HTMLColletction三个集合都是动态的。应尽量减少访问NodeList的次数,因为每次访问NodeList都会运行一次基于上下文档的查询。可以考虑将从NodeList中取得的值缓存起来!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏终身开发者

Android使用WebView开发常见的坑

现在的App基本上都会使用Native+H5的方式来开发的,例如网易新闻详情页面,微信公号详情页面都会使用WebView开发。这样可以很容易实现图文排版的需求,...

9810
来自专栏Java技术栈

JPA、Hibernate、Spring Data JPA 的关系,你懂吗?

来源:https://my.oschina.net/u/3080373/blog/1828589

6730
来自专栏机器学习与python集中营

python标准库Itertools和collections实用技巧

▍9、创建一个迭代器,它从iterable中过滤元素,只返回谓词为False的元素

10060
来自专栏Java技术栈

3年Java,鏖战腾讯

经过半年的沉淀,加上对MySQL,redis和分布式这块的补齐,终于重拾面试信心,再次出征。

9520
来自专栏Java技术栈

年度重大升级,IntelliJ IDEA 2019.2 稳定版发布

文章转载自 OSCHINA 社区 [http://www.oschina.net]

32510
来自专栏渔夫

Java-内部类详解

版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons)

9010
来自专栏终身开发者

Android 内存泄漏总结

内存管理的目的就是让我们在开发中怎么有效的避免我们的应用出现内存泄漏的问题。内存泄漏大家都不陌生了,简单粗俗的讲,就是该被释放的对象没有释放,一直被某个或某些实...

10010
来自专栏渔夫

Java并发-推荐使用不可变对象的原因分析

在Java语法中,String即是不可变对象,一旦创建,假设你若想修改String对象值,只能重新创建String对象。 实现方式如下:1.将内部char类型...

7520
来自专栏月小水长

Python 初学者的三个疑惑之解答

第一个问题:学习 Python 不知道从何处着手。求对应的解决办法。 Python 是一门编程语言,任何编程语言从一开始就离不开动手实践,光靠看书、看视频是不...

8520
来自专栏渔夫

Java中静态代码块、构造代码块、构造函数、普通代码块

版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons)

17920

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励