DOM操作整理

时间:2021-12-25 08:55:18

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 节点名称