JavaScript DOM基本操作

前面讲了DOM查找节点方法；

本文主要讲讲，通过JS新建、插入、替换等DOM的基本操作；

(一)新建元素节点

document.createElement('元素名');	创建新的元素节点
document.createTextNode('文本内容');	创建新的文本节点
document.createComment('注释节点');	创建新的注释节点
document.createDocumentFragment( );	创建文档片段节点

其中document.createElement()较为常用，需重点掌握；

(二)添加元素节点

通过上述create，只是创建而已，并没有真真添加，所以浏览器是显示不出来的。

parent.appendChild( element/txt/comment/fragment );	向父节点的最后一个子节点后追加新节点
parent.insertBefore( newChild, existingChild );	向父节点的某个特定子节点之前插入新节点

 1 <body>
 2     <div>
 3         <p></p>
 4         <em></em>
 5     </div>
 6 
 7 <script type="text/javascript">
 8     var div = document.getElementsByTagName('div')[0];
 9     var em = document.getElementsByTagName('em')[0];
10 
11     var strong = document.createElement('strong');
12     div.appendChild(strong);
13 
14     var a = document.createElement('a');
15     div.insertBefore(a,em);
16 </script>

结论：先创建在追加挂载；

(三)删除元素节点

parentNode.removeChild( existingChild );

child.remove();

 1 <body>
 2     <div>
 3         <p></p>
 4         <span></span>
 5         <i></i>
 6         <a href="#"></a>
 7         <em></em>
 8     </div>
 9 
10 <script type="text/javascript">
11     var div = document.getElementsByTagName('div')[0];
12     var span = document.getElementsByTagName('span')[0];
13     var em = document.getElementsByTagName('em')[0];
14 
15     div.removeChild(span);//删除span标签
16     em.remove();//删除em标签
17 
18 </script>
19 </body>

(四)替换元素节点

parentNode.replaceChild( newChild, existingChild );

用新节点替换父节点中已有的子节点

此方法较为少用

(四)修改/获取行间元素属性

element.getAttribute('属性名')	方法返回指定属性名的属性值。
element.removeAttribute('属性名');	删除具有指定属性名称的属性，无返回值
element.setAttribute( attributeName, attributeValue );	若原元素已有该节点，此操作能达到修改该属性值的目的

 1 <body>
 2     <div class="red">
 3         <p></p>
 4         <span></span>
 5         <i></i>
 6         <a href="#"></a>
 7         <em></em>
 8     </div>
 9 
10 <script type="text/javascript">
11     var div = document.getElementsByTagName('div')[0];
12     console.log(div.getAttribute('class'));
13     div.setAttribute('id','only');
14 </script>
15 </body>