DOM操作整理

DOM获取

1. 直接获取

document.getElementById("box_id") 通过ID获取

document.getElementsByName("myInput") 通过节点name，返回相同name的数组

document.getElementsByTagName(tagName) 查找标签名 (返回:标签数组) 由上至下子元素也包含

document.getElementsByClassName("box_class") 查找类名 (返回:标签数组)   IE 5,6,7,8 中无效 

 

2.获取父节点

(调用者).parentNode

 

3.获取单个子节点

第一个子节点： 父节点.firstElementChild || 父节点.firstChild firstChild：调用者是父节点 IE678中指第一个子元素标签在火狐谷歌IE9+以后都指的是第一个节点（包括空文档和换行节点） firstElementChild: 在火狐谷歌IE9都指的第一个元素节点。

最后一个子节点： 父节点.lastElementChild|| 父节点.lastChild lastChild: IE678中指最后一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是最后一个节点（包括空文档和换行节点） lastElementChild： 在火狐谷歌IE9都指的最后一个元素节点。 

 

4.获取所有子节点

父节点.childNodes 标准属性 获取所有节点包括HTML节点，所有属性，文本节点  火狐 谷歌等高本版会把换行也看做是子节点

父节点.children 非标准属性  但是几乎所有浏览器都支持  但不返回文本节点 。（使用较多）

 

5.获取兄弟节点

下一个兄弟节点: (调用者).nextElementSibling || (调用者).nextSibling nextSibling： 在IE678中指下一个元素节点（标签）。在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点） nextElementSibling: 在火狐谷歌IE9都指的是下一个元素节点。

前一个兄弟节点: (调用者).previousElementSibling|| (调用者).previousSibling previousSibling：IE678中指前一个元素标签 在火狐谷歌IE9+以后都指的是前一个节点（包括空文档和换行节点） previousElementSibling： 在火狐谷歌IE9都指的是前一个元素节点。 总结：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling。

 

DOM操作

 

1.创建节点

新的标签（节点） = document.createElement("标签名");     var createDiv = document.createElement("div");

 

2.插入节点：

插入到最后：父节点.appendChild(新节点);              boxId.appendChild(createDiv);

插入到指定节点之前：父节点.insertBefore(新节点,指定节点)在指定节点前插入;                      boxId.insertBefore(createDiv,bqArr[1]);

 

3.删除节点：

知道父节点：父节点.removeChild(子节点);必须指定要删除的子节点              box_id.removeChild();

不知道父节点：node.parentNode.removeChild(box_id_c);                bqArr[1].parentNode.removeChild(bqArr[1]);

 

4.复制节点：          

oldNode.cloneNode(true)复制后需要重新插入 才有效果            var copyNode = bqArr[1].cloneNode(true);            boxId.appendChild(copyNode);            console.log(bqArr[0]); 

 

5.节点属性:

//      获取：getAttribute(名称)  //      设置：setAttribute(名称, 值)  //      删除：removeAttribute(名称)

//nodeType //nodeName 节点名称

转载于:https://www.cnblogs.com/gr07/p/7844024.html