javascript对dom的操作总汇，js创建，更新，添加，删除DOM的方法

html文档在浏览器解析后，会成为一种树形结构，我们需要改变它的结构，就需要通过js来对dom节点进行操作。dom节点（Node）通常对应的是一个标题，文本，或者html属性，都有一个nodeType来标示他的类型：

值	nodeType	名称
1	Element	元素
2	Attribute	属性
3	Text	文本

nodeType表示Node的类型，它是一个整数，上面列表只显示了3个我们比较常用的，可以通过nodeType来判断节点是什么类型，例如：

<script>
   	console.log(document.getElementsByTagName('meta')[0].nodeType);//输出1，代表页面中第一个meta是元素类型
   </script>

js动态创建Dom

createElement()方法可创建元素节点，此方法可返回一个 Element 对象。例如我们需要在body下创建一个按钮元素button，方法如下：

<script type="text/JavaScript"> 
   var input = document.createElement("input");  
   input.type = "button";  
   input.value = "创建一个按钮";  
   document.body.appendChild(input);  
 </script>

Dom的获取

1.直接获取

通过id来获取，由于ID在HTML文档中是唯一的，可以直接定位唯一的一个DOM节点。

var test=document.getElementById('id')

通过节点名来获取，由于文档中存在多个名称，所以返回的是一组节点。

var test= document.getElementsByTagName('div')

通过类名来获取。

var test= document.getElementsByClassName('class') //返回一组有该类的所有节点。

var test=document.querySelector(".class")//返回当前文档中第一个类名为 " class " 的节点，里面参数也可以用id如#id。

var test= document.querySelectorAll("div.class, div.other")//返回一组文档中div的class为"class"或者 "other"的节点。

注意：IE8及以下版本是不支持querySelector和querySelectorAll的。

2.通过父节点获取子节点

为了精确地选择DOM，我们可以先定位父节点，再从父节点开始选择子节点，以缩小范围。

var ch = test.children;//获取节点test下的所有直属的节点集合

var first = test.firstElementChild; // 获取节点test下第一个节点

var last = test.lastElementChild;//获取节点test下第一个节点

3.通过获取父节点,和兄弟节点

var parent = test.parentElement;//获取父节点

var next = test.nextElementSibling; //获取下一个兄弟节点

var pre = test.previousElementSibling;//上一个兄弟节点

4.注意

平时我们还可能会看到用这些来获取，比如parentNode,childNodes,firstChild,lastChild,nextSibling,previousSibling等，需要注意的是：它们返回元素集合，包括元素节点，属性节点，文本节点。而我们上面主要是获取元素节点。

Dom的修改、删除

ele.appendChild(test); // 添加子元素

ele.replaceChild(test, test1); // 替换子元素

parent.insertBefore(new, reference); // 插入子元素 ,意思是在parent的子节点reference前插入new。

ele.cloneNode(true) //克隆元素。该参数为true,代表被复制的节点是否包括原节点的所有属性和子节点

ele.removeChild(test); //删除子元素

删除子元素需要注意的是：当使用索引来删除的时候，删除前面的，后面的会出现找不到子元素的情况，如下：

<div id="parent">
    <p>First</p>
    <p>Second</p>
</div>
<script>
 var parent = document.getElementById('parent');
 parent.removeChild(parent.children[0]);
 parent.removeChild(parent.children[1]); // 浏览器报错，parent.children[1]不是一个有效的节点。
</script>

DOM的更新

1.修改innerHTML和outerHTML属性：

它们不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树。区别在于：outerHTML包含了直身，而innerHTML只更新它里面的所有元素。（注意的是：如果写入的字符串是通过网络拿到了，要注意对字符编码来避免XSS攻击。）

2.修改innerText或textContent：

它们只能修改Dom节点的文本内容，如果里面有标题元素，会被自动编码。它们的区别在于：innerText不返回隐藏元素的文本，而textContent返回所有文本。（注意IE<9不支持textContent）。

3.修改元素的css

DOM节点的style属性对应所有的css，可以直接获取或设置。但是注意的是CSS允许font-size，但它并非JavaScript有效的属性名，所以需改写为驼峰式命名fontSize,例如：

var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

4.元素的属性的修改操作

修改元素的属性也是经常需要的操作。

var a = test.getAttribute('class'); //获取test元素的class属性

a.setAttribute('class', 'clname'); //把class属性值修改为clname

test.hasAttribute('class'); //判断test元素是否存在clas的属性

test.removeAttribute('class'); //移除test中的class属性

站长推荐

1.云服务推荐: 国内主流云服务商，各类云产品的最新活动，优惠券领取。地址：阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台，如果你有流量，可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/66