js原生元素查找/DOM节点的增删改查

js原生元素查找/DOM节点的增删改查

带标签元素都叫节点(元素节点 文本节点 注释节点)
1.查找节点

• 父查后代:
  var box = document.querySslectorAll("#id li") ；

• 父查子:

   var box = document.querySslector("#id")
   var childList = box.childNodes;
  

• 子查父:

   li.parentNode;//找到上一级的父元素
   li.offsetParent;   //相对的布局的父元素,从自身开始向上找,找到第一个有相对relative,absolute,fixed布局的元素就是.找不到就是body.
  

• 子查子（查找兄弟节点）:

   li.previousElementSibling; //查找前面元素 (高版本)
   li.previousSibling; //ie8:(低版本)
   兼容写法: var prevEle = li.previousElementSibling ||  li.previousSibling;
   
   li.nextElementSibling ; //查找后面的元素
   li.nextSibling; //ie8: (低版本)  
   兼容写法: var nextEle = li.nextElementSibling ||  li.nextSibling;
  

2.查找属性

window.getComputedStyle(元素)["元素的属性比如宽,高"]
window.currentStyle["元素的属性"]  //兼容写法 :IE

想要获取所有最终生效的css样式,用以下方法:
在此可以封装一个函数来获取css属性:

function getStyleAttr(obj, attr) {
         if (window.getComputedStyle) {
                      return window.getComputedStyle(obj)[attr];
          } else {
                      return obj.currentStyle[attr];
 		 }
   }

3.删除

父删子: box.removeChild(元素的名称)
  	   box.remove();    //低版本兼容

4.改

 box.replaceChild(newLi,li)    //括号把要替换的内容放在前面,后面放要被替换的内容
 box.insertBefore(newLi,li)    //会把括号前面的元素放在,括号后面元素的前面

5.增

var div =  document.createElement("div")
document.body.appendChild(div)    //将div放在body中