DOM编程之API学习总结篇
Created at 2016-09-22
Updated at 2017-01-06
Category
Front-End
Tag
JavaScript
/
DOM
原文 链接
一、基本类型介绍
1.1 Node类型
DOM1
级定义了一个Node
接口,该接口由DOM
中所有节点类型实现。这个Node
接口在JS
中是作为Node
类型实现的。在IE9
以下版本无法访问到这个类型,JS
中所有节点都继承自Node
类型,都共享着相同的基本属性和方法
Node
有一个属性nodeType
表示Node
的类型,它是一个整数,其数值分别表示相应的Node
类型
- 假设我们要判断一个
Node
是不是元素,我们可以这样判断
1 2 3
| if(someNode.nodeType == 1){ console.log("Node is a element"); }
|
- 这些
Node
类型中,我们最常用的就是element
,text
,attribute
,comment
,document
,document_fragment
这几种类型
1.2 Element类型
Element
提供了对元素标签名,子节点和特性的访问,我们常用HTML
元素比如div
,span
,a
等标签就是element
中的一种。
Element
有下面几条特性:
nodeType
为1
nodeName
为元素标签名,tagName
也是返回标签名
nodeValue
为null
parentNode
可能是Document
或Element
- 子节点可能是
Element
,Text
,Comment
,Processing_Instruction
,CDATASection
或 EntityReference
1.3 Text类型
Text
表示文本节点,它包含的是纯文本内容,不能包含html
代码,但可以包含转义后的html
代码。Text
有下面的特性:
nodeType
为3
nodeName
为#text
nodeValue
为文本内容
parentNode
是一个Element
- 没有子节点
1.4 Attr类型
Attr
类型表示元素的特性,相当于元素的attributes
属性中的节点,它有下面的特性:
nodeType
值为2
nodeName
是特性的名称
nodeValue
是特性的值
parentNode
为null
Comment
表示HTML
文档中的注释,它有下面的几种特征:
nodeType
为8
nodeName
为#comment
nodeValue
为注释的内容
parentNode
可能是Document
或Element
- 没有子节点
1.6 Document
Document
表示文档,在浏览器中,document
对象是HTMLDocument
的一个实例,表示整个页面,它同时也是window
对象的一个属性。Document
有下面的特性:
nodeType
为9
nodeName
为#document
nodeValue
为 null
parentNode
为 null
- 子节点可能是一个
DocumentType
或Element
1.7 DocumentFragment类型
二、 DOM提供的几个属性
2.1 childNodes属性
- 在一棵节点树上,
childNodes
属性可以用来获取任何一个元素的所有子节点,它是一个包含这个元素全部子元素的数组
2.2 nodeType属性
- 节点之间的关系构成了节点层次,
html
页面的可以画出一个以html
标签为根节点的树形结构
DOM
会把文档看作是一棵树,同时定义了很多方法来操作这棵数中的每一个元素(节点)
1 2 3 4 5 6 7 8
| <html lang="en"> <head> <title>Document</title> </head> <body> <p>hello world!!!</p> </body> </html>
|
nodeType
属性总共有12中可能取值,但其中仅有3种有实用价值
- 元素节点的
nodeType
属性值是1
- 属性节点的
nodeType
属性值是2
- 文本节点的
nodeType
属性值是3
1
| description.firstChild.nodeValue = text;
|
2.3 nodeValue属性
nodeValue
属性
- 如果想改变一个文本节点的值,那就使用
DOM
提供的nodeValue
,它用来得到一个节点的值 node.nodeValue
- 需要注意:
nodeValue
属性获取对象的值时,得到的并不是包含在这个段落里的文本
- nodeValue属性不仅可以用来检测节点的值,还可以设置节点的值
2.4 firstChild和lastChild属性
- 数组元素
childNodes[0]
有个更直观的同义词。无论如何,只要访问childNodes
数组的第一个元素,都可以把它写成firstChild
与下面等价
DOM
还提供了一个与之对应的lastChild
属性
三、节点创建型API
- 在这里,我将常用的
DOM
操作api
进行分类,首先要介绍的是创建型的api
。这一类型的api
,简而言之就是用来创建节点的
3.1 createElement
createElement
通过传入指定的一个标签名来创建一个元素,如果传入的标签名是一个未知的,则会创建一个自定义的标签,注意:IE8
以下浏览器不支持自定义标签
1 2
| var div = document.createElement("div");
|
- 使用
createElement
要注意:通过createElement
创建的元素并不属于html
文档,它只是创建出来,并未添加到html
文档中,要调用appendChild
或insertBefore
等方法将其添加到HTML
文档树中
3.2 createTextNode
createTextNode
用来创建一个文本节点,用法如下
1 2
| var textNode = document.createTextNode("一个TextNode");
|
createTextNode
接收一个参数,这个参数就是文本节点中的文本,和createElement
一样,创建后的文本节点也只是独立的一个节点,同样需要appendChild
将其添加到HTML
文档树中
3.3 cloneNode
cloneNode
是用来返回调用方法的节点的一个副本,它接收一个bool
参数,用来表示是否复制子元素,使用如下:
1 2 3
| var parent = document.getElementById("parentElement"); var parent2 = parent.cloneNode(true); parent2.id = "parent2";
|
- 这段代码通过
cloneNode
复制了一份parent
元素,其中cloneNode
的参数为true
,表示parent
的子节点也被复制,如果传入false
,则表示只复制了parent
节点
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <div id="parent"> 我是父元素的文本 <br/> <span> 我是子元素 </span> </div> <button id="btnCopy">复制</button> var parent = document.getElementById("parent"); document.getElementById("btnCopy").onclick = function(){ var parent2 = parent.cloneNode(true); parent2.id = "parent2"; document.body.appendChild(parent2); }
|
1 2
| <div onclick="showParent()"></div>
|
3.4 createDocumentFragment
1 2 3 4 5 6 7 8 9 10 11
| <ul id="list"></ul> <input type="button" value="添加多项" id="btnAdd" /> document.getElementById("btnAdd").onclick = function(){ var list = document.getElementById("list"); for(var i = 0;i < 100; i++){ var li = document.createElement("li"); li.textContent = i; list.appendChild(li); } }
|
这段代码将按钮绑定了一个事件,这个事件创建了100个li
节点,然后依次将其添加HTML
文档中。这样做有一个缺点:每次一创建一个新的元素,然后添加到文档树中,这个过程会造成浏览器的回流。所谓回流简单说就是指元素大小和位置会被重新计算,如果添加的元素太多,会造成性能问题。这个时候,就是使用createDocumentFragment了
DocumentFragment
不是文档树的一部分,它是保存在内存中的,所以不会造成回流问题。我们修改上面的代码如下
1 2 3 4 5 6 7 8 9 10 11 12
| document.getElementById("btnAdd").onclick = function(){ var list = document.getElementById("list"); var fragment = document.createDocumentFragment(); for(var i = 0;i < 100; i++){ var li = document.createElement("li"); li.textContent = i; fragment.appendChild(li); } list.appendChild(fragment); }
|
- 优化后的代码主要是创建了一个
fragment
,每次生成的li
节点先添加到fragment
,最后一次性添加到list
3.5 创建型API总结
四、页面修改型API
- 前面我们提到创建型
api
,它们只是创建节点,并没有真正修改到页面内容,而是要调用appendChild
来将其添加到文档树中。我在这里将这类会修改到页面内容归为一类。
修改页面内容的api
主要包括:appendChild
,insertBefore
,removeChild
,replaceChild
4.1 appendChild
appendChild
我们在前面已经用到多次,就是将指定的节点添加到调用该方法的节点的子元素的末尾。调用方法如下:
1
| parent.appendChild(child);
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <div id="child"> 要被添加的节点 </div> <br/> <br/> <br/> <div id="parent"> 要移动的位置 </div> <input id="btnMove" type="button" value="移动节点" /> document.getElementById("btnMove").onclick = function(){ var child = document.getElementById("child"); document.getElementById("parent").appendChild(child); }
|
- 这段代码主要是获取页面上的
child
节点,然后添加到指定位置,可以看到原本的child
节点被移动到parent
中了。
这里还有一个要注意的点:如果child
绑定了事件,被移动时,它依然绑定着该事件
4.2 insertBefore
insertBefore
用来添加一个节点到一个参照节点之前,用法如下
1 2
| parentNode.insertBefore(newNode,refNode);
|
parentNode
表示新节点被添加后的父节点
newNode
表示要添加的节点
refNode
表示参照节点,新节点会添加到这个节点之前
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <div id="parent"> 父节点 <div id="child"> 子元素 </div> </div> <input type="button" id="insertNode" value="插入节点" /> var parent = document.getElementById("parent"); var child = document.getElementById("child"); document.getElementById("insertNode").onclick = function(){ var newNode = document.createElement("div"); newNode.textContent = "新节点" parent.insertBefore(newNode,child); }
|
4.3 removeChild
removeChild
顾名思义,就是删除指定的子节点并返回,用法如下
1 2
| var deletedChild = parent.removeChild(node);
|
1 2 3
| if(node.parentNode){ node.parentNode.removeChild(node); }
|
4.4 replaceChild
replaceChild
用于使用一个节点替换另一个节点,用法如下
1 2
| parent.replaceChild(newChild,oldChild);
|
newChild
是替换的节点,可以是新的节点,也可以是页面上的节点,如果是页面上的节点,则其将被转移到新的位置
oldChild
是被替换的节点
4.5 页面修改型API总结
- 页面修改型api主要是这四个接口,要注意几个特点:
- 不管是新增还是替换节点,如果新增或替换的节点是原本存在页面上的,则其原来位置的节点将被移除,也就是说同一个节点不能存在于页面的多个位置
- 节点本身绑定的事件会不会消失,会一直保留着
五、节点查询型API
5.1 document.getElementById
5.2 document.getElementsByTagName
- 这个接口根据元素标签名获取元素,返回一个即时的
HTMLCollection
类型,什么是即时的HTMLCollection
类型呢?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <div>div1</div> <div>div2</div> <input type="button" value="显示数量" id="btnShowCount"/> <input type="button" value="新增div" id="btnAddDiv"/> var divList = document.getElementsByTagName("div"); document.getElementById("btnAddDiv").onclick = function(){ var div = document.createElement("div"); div.textContent ="div" + (divList.length+1); document.body.appendChild(div); } document.getElementById("btnShowCount").onclick = function(){ alert(divList.length); }
|
这段代码中有两个按钮,一个按钮是显示HTMLCollection
元素的个数,另一个按钮可以新增一个div标签到文档中。前面提到HTMLCollcetion
元素是即时的表示该集合是随时变化的,也就是是文档中有几个div
,它会随时进行变化,当我们新增一个div
后,再访问HTMLCollection
时,就会包含这个新增的div
使用document.getElementsByTagName这个方法有几点要注意:
- 如果要对
HTMLCollection
集合进行循环操作,最好将其长度缓存起来,因为每次循环都会去计算长度,暂时缓存起来可以提高效率
- 如果没有存在指定的标签,该接口返回的不
是null
,而是一个空的HTMLCollection
“*”
表示所有标签
5.3 document.getElementsByName
5.4 document.getElementsByClassName
- 这个
API
是根据元素的class
返回一个即时的HTMLCollection
,用法如下
1
| var elements = document.getElementsByClassName(names);
|
- 这个接口有下面几点要注意:
- 返回结果是一个即时的
HTMLCollection
,会随时根据文档结构变化
IE9
以下浏览器不支持
- 如果要获取
2
个以上classname
,可传入多个classname
,每个用空格相隔,例如
1 2
| var elements = document.getElementsByClassName("test1 test2");
|
5.5 document.querySelector和document.querySelectorAll
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <div> <div> <span class="test">第三级的span</span> </div> </div> <div class="test"> 同级的第二个div </div> <input type="button" id="btnGet" value="获取test元素" /> document.getElementById("btnGet").addEventListener("click",function(){ var element = document.querySelector(".test"); alert(element.textContent); })
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <div class="test"> class为test </div> <div id="test"> id为test </div> <input id="btnShow" type="button" value="显示内容" /> document.getElementById("btnShow").addEventListener("click",function(){ var elements = document.querySelectorAll("#test,.test"); for(var i = 0,length = elements.length;i<length;i++){ alert(elements[i].textContent); } })
|
六、节点关系型API
- 在
html
文档中的每个节点之间的关系都可以看成是家谱关系,包含父子关系,兄弟关系等等
6.1 父关系型API
parentNode
:每个节点都有一个parentNode
属性,它表示元素的父节点。Element
的父节点可能是Element
,Document
或DocumentFragment
parentElement
:返回元素的父元素节点,与parentNode
的区别在于,其父节点必须是一个Element
,如果不是,则返回null
6.2 兄弟关系型API
previousSibling
:节点的前一个节点,如果该节点是第一个节点,则为null
。注意有可能拿到的节点是文本节点或注释节点,与预期的不符,要进行处理一下
previousElementSibling
:返回前一个元素节点,前一个节点必须是Element
,注意IE9
以下浏览器不支持
nextSibling
previousSibling
存在兼容性问题
nextElementSibling
previousElementSibling
推荐使用
1 2 3 4 5 6 7 8 9 10
| <script> var oUl = document.getElementById('ul1'); var firstEle = oUl.firstElementChild; var lastEle = oUl.lastElementChild; firstEle.nextElementSibling.style.background = 'red'; lastEle.previousElementSibling.style.background = 'green'; </script>
|
nextSibling
:节点的后一个节点,如果该节点是最后一个节点,则为null
。注意有可能拿到的节点是文本节点,与预期的不符,要进行处理一下
nextElementSibling
:返回后一个元素节点,后一个节点必须是Element
,注意IE9
以下浏览器不支持
6.3 子关系型API
childNodes
:
- 返回一个即时的
NodeList
,表示元素的子节点列表,子节点可能会包含文本节点,注释节点等。childNodes
子节点列表集合(只读属性 有兼容性问题 )
1 2 3 4 5 6 7 8 9 10
| <ul id="ul1"> <li>11111</li> <li>22222</li> <li>3333</li> <li>44444</li> </ul> <script> var oUl = document.getElementById('ul1'); console.log(oUl.childNodes); </script>
|
1 2 3 4 5 6 7
| for (var i=0; i<oUl.childNodes.length; i++) { if ( oUl.childNodes[i].nodeType == 1 ) { oUl.childNodes[i].style.background = 'red'; } }
|
children
:
- 一个即时的
HTMLCollection
,子节点都是Element
,IE9
以下浏览器不支持。children
子节点列表集合(只读属性 推荐使用 )
children
获取的子节点只包含元素节点
1 2 3
| for (var i = 0; i<oUl.children.length; i++){ oUl.children[i].style.background = 'red'; }
|
firstNode
:第一个子节点
lastNode
:最后一个子节点
firstChild
(firstElementChild) lastChild
(lastElementChild) 第一个子节点 最后一个子节点
firstChild
、lastChild
和childNodes
同样的存在兼容性问题,在低版本ie
浏览器中只能获取到元素节点
firstElementChild
、 lastElementChild
获取第一个元素子节点,最后一个元素子节点 推荐使用
1 2 3 4 5 6 7
| var oUl = document.getElementById('ul1'); oUl.firstElementChild.style.background = 'red'; oUl.lastElementChild.style.background = 'red';
|
hasChildNodes
方法:可以用来判断是否包含子节点
七、元素属性型
7.1 setAttribute
setAttribute
:它允许我们对元素属性值做出修改与getAttribute
一样setAttribute
也能用于元素节点
- 通过
setAttribute
对文档做出修改后,在通过浏览器的查看源码选项看到的任然是改变之前的属性值,也就是说setAttribue
做出的修改,不会反应到文档本身的源码里
setAttribute
优势在于可以修改文档中的任何一个属性
1 2
| element.setAttribute(name, value);
|
- 其中
name
是特性名,value
是特性值。如果元素不包含该特性,则会创建该特性并赋值。
- 如果元素本身包含指定的特性名为属性,则可以访问属性进行赋值,比如下面两条代码是等价
1 2 3 4
| element.setAttribute("id","test"); element.id = "test";
|
非DOM的解决方案
- 其实不用
setAttribute
也可以改变元素的属性
setAttribute
方法是第一级DOM
的组成部分,它可以设计任何元素节点的任意属性。在第1级DOM
出现之前,你可以通过另外一种办法设置大部分元素的属性
1
| element.value = "the new value";
|
与下面语句等价
1
| element.setAttribute("value","the new value");
|
7.2 getAttribute
getAttribute
返回指定的特性名相应的特性值,如果不存在,则返回null
或空字符串。
getAttribute
不属性doucment
对象,不能通过document
对象调用,只能通过元素节点对象调用
- 例如可以与
getElementsByTagName
方法合用,获取每个p
的title
属性
1 2 3 4
| var paras = document.getElementsByTagName("p"); for(var i=0;i<para.lenght;i++){ alert(paras.getAttrtitube("title")); }
|
八、网上的一张思维导图总结