js DOM自我小结

js dom的自我小结
dom（document object model）文档对象模型
将所有的标签当作节点（每个节点都是一个对象），html是根，下面有head，body两个子节点
(节点分三类：标签节点，属性节点，文本节点)
head下有title，meta
body下form,table,p,font,a,ul,ol,span，div等


通过js可以寻找节点，修改节点属性，创建节点，添加节点，移除节点

1 寻找节点
常用方法：
通过id，document.getElementById("xx")找到唯一的一个节点
通过class，document.getElementsByClassName("XX"); 找到一个节点数组
通过tagname,document.getElementsByTagName("xx"); 找到一个节点数组
通过本节点找兄弟节点
    node.nextSiling;//紧邻的下一个节点
    node.previousSiling;//紧邻的前一个节点
通过本节点找父节点
    node.parentNode
通过本节点找子节点
    node.firstChild;//获得第一个子节点
    node.childNodes();//获得子节点数组
    node.lastChild;//获得最后一个节点

2 修改节点属性
通过上述方式找到节点，然后可以通过节点直接修改节点对象的属性
可以通过console.log(节点对象)，然后在控制台查看该节点对象有哪些属性
常见的属性
nodeObj.style  节点对象的样式对象属性
nodeObj.innerText   节点对象的内部txt
nodeObj.innerHTML    节点对象的内部html
nodeObj.value    节点对象的value值
nodeObj.tagName  节点对象的标签name（只有标签节点才有）
nodeObj.nodeName  节点对象的name（比如文本节点，nodename就是#text；class属性节点，nodename就是class；标签节点的nodename就是tagname）
通过方法修改
nodeObj.getAttribute("attr_name");//获得特定的属性值
nodeObj.setAttribute("attr_name","attr_value")//指定特定属性的值

3 创建节点
创建标签节点：document.createElement("p");
      属性节点：通过节点的setAttribute("attr_name","attr_value");
创建文本节点：document.createTextNode("txt message");
通过克隆的方式获得节点: node.cloneNode(true/false); true 将节点下的后代节点后复制；false 不复制后代节点
     
4 添加节点   
在某个节点中添加子节点
parentObj.appendChild(childObj);
parentObj.insertBefore(newChildObj,relChildObj)//插入新节点newChildObj到relChildObj前面，都是parentObj的子节点


5 删除节点
parentObj.removeChild(childNode); //删除parentObj下面的childNode节点
parentObj.replaceChild(newChildObj,oldChildObj);//用newChildObj替换parentObj中的oldChildObj节点

转载于:https://www.cnblogs.com/gqblogs/p/js_dom.html