创建元素
document.createElement('tagName');
添加元素
parent.appendChild(childNode);
注:父元素调用该方法。
移动元素
由于DOM对象属于引用类型,所以在操作appendChild和insertBefore方法时, 控制的节点如果是文档中存在的节点,那么将把这个节点移到目标处。
复制节点
oLi.cloneNode(true);
注:参数true表示深度克隆(深拷贝),false 表示浅度克隆(浅拷贝),深拷贝也就是复制节点及整个节点数;浅拷贝复制节点本身。复制后返回的节点副本属于文档所有,但并没有为它指定父节点。因此,整个节点副本就成为一个‘孤儿’:
- item 1
- item 2
- item 3
cloneNode()方法不会复制添加DOM节点的JS属性,例如事件处理程序等。这个方法只复制特性,其他一切都不会复制。
删除节点
parentNode.removeChild(childNode);
注:父元素调用该方法,返回值为被删除的节点。
替换元素
parentNode.replaceChild(newNode,oldNode);
注:oldNode节点必须是parentNode的子节点。
插入元素
parentNode.insertBefore(newEle, oldNode);
注:父元素调用该方法。
查找节点的总结
- childNodes—返回节点到子节点的节点列表firstChild— 返 回 节 点 的 首 个 子 节 点 ; lastChild—返回节点的最后一个子节点; nextSibling—返回节点之后紧跟的同级节点; nodeName—返回节点的名字,根据其类型; nodeType—返回节点的类型。
- nodeValue—设置或返回节点的值,根据其类型; ownerDocument—返回节点的根元素(document对象); parentNode—返回节点的父节点。
- previousSibling—返回节点之前紧跟的同级节点。
- text—返回节点及其后代的文本(IE独有); xml—返回节点及其后代的XML(IE独有); 节点对象的方法。
- appendChild()—向节点的子节点列表的结尾添加新的子节点; cloneNode()—复制节点。
- hasChildNodes()—判断当前节点是否拥有子节点; insertBefore()—在指定的子节点前插入新的子节点; normalize()—合并相邻的Text节点并删除空的Text节点; removeChild()—删除(并返回)当前节点的指定子节点; replaceChild()—用新节点替换一个子节点。
IE6独有方法
- selectNodes()—用一个XPath表达式查询选择节点; selectSingleNode()—查找和XPath查询匹配的一个节点。
- transformNode()—使用XSLT把一个节点转换为一个字符串。transformNodeToObject()—使用XSLT把一 个节点转换成为一个文档。
经典的问题解析。
创建新节点
createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点。
添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)
getElementById() //通过元素Id,唯一性