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

你可能感兴趣的:(js DOM自我小结)