DOM节点基本操作

标签：select   tee   png   eve   attr   query   tin   obj   innerhtml   

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

一、DOM树

DOM树有两种，分别为节点树和元素树。
● 节点树：把文档中所有的内容都看成树上的节点；
● 元素树：仅把文档中的所有标签看成树上的节点。

二、DOM常用操作

2.1 查找节点

通过标签名查找 HTML 元素

● 本例查找 id="main" 的元素，然后查找 "main" 中的所有

元素：
● var x=document.getElementById("main"); var y=x.getElementsByTagName("p");
==提示==：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效

2.2 新建节点

2.3 添加新节点

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

==document.createTextNode(‘新增文本内容‘);==

  <h2>创建文本节点</h2>
  <button onclick="addText()">创建文本节点</button>
  <p></p>
     <script>
        function addText(){
            var element = document.getElementsByTagName(‘p‘)[0];
            var txt = document.createTextNode(‘新增文本内容‘); //创建文本节点
            element.appendChild(txt); //添加文本节点
        }
     </script>

==element.innerHTML=‘新增文本内容‘; 【推荐】==
```

创建文本节点

 
#### 插入节点
==appendChild()==
　　appendChild()方法用于向childNodes列表的末尾添加一个节点，并返回新增节点。添加节点后，childNodes中的新增节点、父节点和以前的最后一个子节点的关系指针都会相应地得到更新

如果插入的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置

### 2.4 删除节点

header 1 | header 2
---|---
parentNode.removeChild( existingChild );|删除已有的子节点，返回值为删除节点
element.removeAttribute(‘属性名‘);|删除具有指定属性名称的属性，无返回值
element.removeAttributeNode( attrNode );|删除指定属性，返回值为删除的属性
 
### 2.5 修改节点

header 1 | header 2
---|---
parentNode.replaceChild( newChild, existingChild );|用新节点替换父节点中已有的子节点
element.setAttributeNode( attributeName );|若原元素已有该节点，此操作能达到修改该属性值的目的
element.setAttribute( attributeName, attributeValue );|若原元素已有该节点，此操作能达到修改该属性值的目的
 
#### 添加属性节点，修改属性值：
  ==element.setAttributeNode( attributeName )==;

<meta charset="UTF-8">
  <title>Document</title>

属性节点

增添id属性，并修改class属性值

 ==element.setAttribute( attributeName, attributeValue );==

  <h2>属性节点</h2>
  <p class="classValue">增添id属性，并修改class属性值</p>
 <script>
     var element = document.getElementsByTagName(‘p‘)[0];

// 添加属性节点
var attr = document.createAttribute(‘id‘);
attr.value = ‘idValue‘;
element.setAttributeNode(attr);

// 修改属性值
var attr = document.createAttribute(‘class‘);
attr.value = ‘classNewValue‘;
element.setAttributeNode(attr);

```

DOM节点基本操作

标签：select   tee   png   eve   attr   query   tin   obj   innerhtml   

原文地址：https://www.cnblogs.com/chaimi/p/10259648.html