DOM常用操作

　　文档对象模型( DOM, Document Object Model )主要用于对HTML和XML文档的内容进行操作。DOM描绘了一个层次化的节点树，通过对节点进行操作，实现对文档内容的添加、删除、修改、查找等功能。

一、DOM树

DOM树有两种，分别为节点树和元素树。

  • 节点树：把文档中所有的内容都看成树上的节点；
  • 元素树：仅把文档中的所有标签看成树上的节点。

二、DOM常用操作

2.1 查找节点

document.getElementById('id属性值');

返回拥有指定id的第一个对象的引用

document/element.getElementsByClassName('class属性值');

返回拥有指定class的对象集合

document/element.getElementsByTagName('标签名');

返回拥有指定标签名的对象集合

document.getElementsByName('name属性值');

返回拥有指定名称的对象结合

document/element.querySelector('CSS选择器');

仅返回第一个匹配的元素

document/element.querySelectorAll('CSS选择器');

返回所有匹配的元素

document.documentElement

获取页面中的HTML标签

document.body

获取页面中的BODY标签

document.all['']

 获取页面中的所有元素节点的对象集合型

 

 

 

 

 

 

 

 

 

 

2.2 新建节点

document.createElement('元素名');

创建新的元素节点

document.createAttribute('属性名');

创建新的属性节点

document.createTextNode('文本内容');

创建新的文本节点

document.createComment('注释节点');

创建新的注释节点

document.createDocumentFragment( );

创建文档片段节点

 

 

 

 

 

 

 

2.3 添加新节点

parent.appendChild( element/txt/comment/fragment );

向父节点的最后一个子节点后追加新节点

parent.insertBefore( newChild, existingChild );

向父节点的某个特定子节点之前插入新节点

element.setAttributeNode( attributeName );

给元素增加属性节点

element.setAttribute( attributeName, attributeValue );

给元素增加指定属性，并设定属性值

 

 

 

 

 

添加文本节点，有两种常见方法：

  • document.createTextNode('新增文本内容');
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8 <h2>创建文本节点</h2>
 9 <button onclick="addText()">创建文本节点</button>
10 <p></p>
11     <script>
12         function addText(){
13             var element = document.getElementsByTagName('p')[0];
14             var txt = document.createTextNode('新增文本内容'); //创建文本节点
15             element.appendChild(txt); //添加文本节点
16         }
17     </script>
18 </body>
19 </html>

 

  • element.innerHTML='新增文本内容'; 【推荐】
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8 <h2>创建文本节点</h2>
 9 <button onclick="addText()">创建文本节点</button>
10 <p></p>
11     <script>
12         function addText(){
13             var element = document.getElementsByTagName('p')[0];
14             element.innerHTML='新增文本内容'; //插入文本内容
15         }
16     </script>
17 </body>
18 </html>

 

 

2.4 删除节点

parentNode.removeChild( existingChild );

 删除已有的子节点，返回值为删除节点

element.removeAttribute('属性名');

 删除具有指定属性名称的属性，无返回值

element.removeAttributeNode( attrNode );

 删除指定属性，返回值为删除的属性 

 

 

 

 

 

2.5 修改节点

parentNode.replaceChild( newChild, existingChild );

 用新节点替换父节点中已有的子节点
element.setAttributeNode( attributeName ); 若原元素已有该节点，此操作能达到修改该属性值的目的
element.setAttribute( attributeName, attributeValue ); 若原元素已有该节点，此操作能达到修改该属性值的目的

 

 

 

 

 

添加属性节点，修改属性值：

  • element.setAttributeNode( attributeName ); 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <h2>属性节点</h2>
 9     <p class="classValue">增添id属性，并修改class属性值</p>
10     <script>
11         var element = document.getElementsByTagName('p')[0];
12         element.setAttribute('id','idValue'); //添加属性节点
13         element.setAttribute('class','classNewValue');//修改属性值
14     </script>
15 </body>
16 </html>

 

  • element.setAttribute( attributeName, attributeValue );
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <h2>属性节点</h2>
 9     <p class="classValue">增添id属性，并修改class属性值</p>
10     <script>
11         var element = document.getElementsByTagName('p')[0];
12 // 添加属性节点
13         var attr = document.createAttribute('id'); 
14         attr.value = 'idValue';
15         element.setAttributeNode(attr); 
16 
17 // 修改属性值
18         var attr = document.createAttribute('class'); 
19         attr.value = 'classNewValue';
20         element.setAttributeNode(attr);
21         
22     </script>
23 </body>
24 </html>

 

 

 

posted @ 2016-08-27 00:34  GraceZy  阅读(19325)  评论(0)  编辑  收藏  举报