一、获取节点
document.getElementById(id);
返回拥有指定 id 的第一个节点
document.getElementsByName(name);
返回带有指定名称的节点集合
document.getElementsByTagName(tagname);
返回带有指定标签名的节点集合
document.getElementsByClassName(classname);
返回带有指定class名称的节点集合
document.querySelector("css选择器");
返回匹配指定的CSS选择器的第一个节点
document.querySelectorAll("css选择器");
返回匹配指定CSS选择器的所有节点集合
parentNode.firstChild:已知节点的第一个子节点
parentNode.lastChild:已知节点的最后一个子节点
parentNode.childNodes:已知节点的所有子节点
childNode.parentNode:已知节点的父节点
neborNode.previousSibling:返回某个节点的上一个兄弟节点(包括文本节点、注释节点)
neborNode.previousElementSibling :返回某个节点的上一个兄弟元素节点(不包括文本节点、注释节点)
neborNode.nextSibling :返回某个节点的下一个兄弟节点(包括文本节点、注释节点)
neborNode.nextElementSibling :返回某个节点的下一个兄弟元素节点(不包括文本节点、注释节点)
二、创建节点
document.createElement(eleName);
创建元素节点
document.createTextNode(text);
创建文本节点
document.createAttribute(attrName);
创建一个指定名称的属性,并返回Attr对象属性。例子:
var att=document.createAttribute("class");
att.value="democlass";
document.getElementsByTagName("H1")[0].setAttributeNode(att);
三、添加节点
parentNode.appendChild(newNode);
给某个节点添加子节点
parentNode.insertBefore(newNode,existNode);
在已有的子节点前插入一个新的子节点,也可以利用已知的子节点获取其父节点:existNode.parentNode.insertBefore(newNode,existNode);
四、删除节点
parentNode.removeChild(node)
删除某个节点的子节点,node是要删除的节点
五、复制节点
domNode.cloneNode(true | false);
复制节点domNode。如果传递的参数是 true,将递归复制当前节点的所有子孙节点。否则,只复制当前节点(没有子孙节点)。例子:
var itm=document.getElementById("myList2").lastChild;
var cln=itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
六、替换节点
parentNode.replaceChild(newNode,oldNode);
将某个子节点替换为另一个新节点,新节点可以是已存在的,也可以是新创建的。
七、节点属性操作
domNode.getAttribute(attrName);
获取节点domNode的指定属性名称的属性值
domNode.setAttribute(attrName,attrValue);
设置或者修改节点domNode的指定属性的值
domNode.removeAttribute(attrName);
删除节点domNode的某个属性
记录于:2024-5-10。