用js操作dom节点的一些方法

一、获取节点

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。