DOM常用操作

ゝ一世哀愁。 2021-09-22 16:10 380阅读 0赞

# [DOM常用操作][DOM] #

![981799-20160826210811726-888363560.png][]

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

# 一、DOM树 #

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

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

# 二、DOM常用操作 #

## 2.1 查找节点 ##

<table> 
 <tbody> 
  <tr> 
   <td align="left"> <p>document.getElementById('id属性值');</p> </td> 
   <td> <p>返回拥有指定id的第一个对象的引用</p> </td> 
  </tr> 
  <tr> 
   <td> <p>document/element.getElementsByClassName('class属性值');</p> </td> 
   <td> <p>返回拥有指定class的对象集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>document/element.getElementsByTagName('标签名');</p> </td> 
   <td> <p>返回拥有指定标签名的对象集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>document.getElementsByName('name属性值');</p> </td> 
   <td> <p>返回拥有指定名称的对象结合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>document/element.querySelector('CSS选择器');</p> </td> 
   <td> <p>仅返回第一个匹配的元素</p> </td> 
  </tr> 
  <tr> 
   <td> <p>document/element.querySelectorAll('CSS选择器');</p> </td> 
   <td> <p>返回所有匹配的元素</p> </td> 
  </tr> 
  <tr> 
   <td> <p>document.documentElement</p> </td> 
   <td> <p>获取页面中的HTML标签</p> </td> 
  </tr> 
  <tr> 
   <td> <p>document.body</p> </td> 
   <td> <p>获取页面中的BODY标签</p> </td> 
  </tr> 
  <tr> 
   <td> <p>document.all['']</p> </td> 
   <td>获取页面中的所有元素节点的对象集合型</td> 
  </tr> 
 </tbody> 
</table>

# #

## 2.2 新建节点 ##

<table> 
 <tbody> 
  <tr> 
   <td> <p>document.createElement('元素名');</p> </td> 
   <td> <p>创建新的元素节点</p> </td> 
  </tr> 
  <tr> 
   <td> <p>document.createAttribute('属性名');</p> </td> 
   <td> <p>创建新的属性节点</p> </td> 
  </tr> 
  <tr> 
   <td> <p>document.createTextNode('文本内容');</p> </td> 
   <td> <p>创建新的文本节点</p> </td> 
  </tr> 
  <tr> 
   <td> <p>document.createComment('注释节点');</p> </td> 
   <td> <p>创建新的注释节点</p> </td> 
  </tr> 
  <tr> 
   <td> <p>document.createDocumentFragment( );</p> </td> 
   <td> <p>创建文档片段节点</p> </td> 
  </tr> 
 </tbody> 
</table>

# #

## 2.3 添加新节点 ##

<table> 
 <tbody> 
  <tr> 
   <td> <p>parent.appendChild( element/txt/comment/fragment );</p> </td> 
   <td> <p>向父节点的最后一个子节点后追加新节点</p> </td> 
  </tr> 
  <tr> 
   <td> <p>parent.insertBefore( newChild, existingChild );</p> </td> 
   <td> <p>向父节点的某个特定子节点之前插入新节点</p> </td> 
  </tr> 
  <tr> 
   <td> <p>element.setAttributeNode( attributeName&nbsp;);</p> </td> 
   <td> <p>给元素增加属性节点</p> </td> 
  </tr> 
  <tr> 
   <td> <p>element.setAttribute( attributeName,&nbsp;attributeValue&nbsp;);</p> </td> 
   <td> <p>给元素增加指定属性，并设定属性值</p> </td> 
  </tr> 
 </tbody> 
</table>

# #

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

*  document.createTextNode('新增文本内容');

![复制代码][Image 1]

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>

![复制代码][Image 1]

*  element.innerHTML='新增文本内容'; 【推荐】

![复制代码][Image 1]

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>

![复制代码][Image 1]

# #

## 2.4 删除节点 ##

<table> 
 <tbody> 
  <tr> 
   <td> <p>parentNode.removeChild( existingChild );</p> </td> 
   <td>删除已有的子节点，返回值为删除节点</td> 
  </tr> 
  <tr> 
   <td> <p>element.removeAttribute('属性名');</p> </td> 
   <td>删除具有指定属性名称的属性，无返回值</td> 
  </tr> 
  <tr> 
   <td> <p>element.removeAttributeNode( attrNode );</p> </td> 
   <td>删除指定属性，返回值为删除的属性&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

# #

## 2.5 修改节点 ##

<table> 
 <tbody> 
  <tr> 
   <td> <p>parentNode.replaceChild( newChild, existingChild );</p> </td> 
   <td>用新节点替换父节点中已有的子节点</td> 
  </tr> 
  <tr> 
   <td>element.setAttributeNode( attributeName&nbsp;);</td> 
   <td>若原元素已有该节点，此操作能达到修改该属性值的目的</td> 
  </tr> 
  <tr> 
   <td>element.setAttribute(&nbsp;attributeName,&nbsp;attributeValue&nbsp;);</td> 
   <td>若原元素已有该节点，此操作能达到修改该属性值的目的</td> 
  </tr> 
 </tbody> 
</table>

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

*  element.setAttributeNode( attributeName );

![复制代码][Image 1]

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>

![复制代码][Image 1]

*  element.setAttribute( attributeName, attributeValue );

![复制代码][Image 1]

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>

![复制代码][Image 1]

[DOM]: https://www.cnblogs.com/yinshuige/p/5812095.html
[981799-20160826210811726-888363560.png]: /images/20210920/f5468d24e11e4d6083477632c2e83206.png
[Image 1]: