JavaScript 对dom节点的操作

抓取节点

• document.getElementById(id); //最多只能返回一个节点
• document.getElementsByName(name); //返回节点集合
• document.getElementsByTagName(tagname); //返回节点集合
• document.getElementsByClassName(classname); //返回节点集合

创建节点

• document.createElement(“p”); //创建一个节点
• document.createTextNode(text); //创建一个文本节点

var p = document.createElement("p"); 
var text = document.createTextNode("content");
p.appendChild(text);
//等价于
p.innerHTML = "content";

• document.createAttribute(attrName)； //创建一个属性

var att=document.createAttribute("class");
att.value="democlass";
document.getElementsByTagName("H1")[0].setAttributeNode(att);

添加节点

• document.getElementById(“myList”).insertBefore(newItem,existingItem); // 在某个节点前面插入节点

• parentNode.appendChild(newNode); //给某个节点插入子节点，成为最后一个子节点

• document.getElementById(‘box’).cloneNode(true)

该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。

删除节点

• node.remove(); //删除自身节点，和自己的所有子孙节点
• parentNode.removeChild(node) //删除子节点,和子节点的所有子孙节点

属性操作

• getAttribute(name);通过属性名称获取某个节点属性的值
• setAttribute(name,value);修改某个节点属性的值
• removeAttribute(name);删除某个属性