web 节点操作

获取父节点

• 子元素.parentNode 获取直接父元素

• 子元素.offsetParent 获取最近定位父元素 如果没有最近定位父元素则是获取body

1.2获取子节点

• 父元素.children 获取父元素下的元素节点

• 父元素.childNodes 获取所有的子节点

  • 判断节点类型 节点.nodeType

    • 元素节点 1

    • 属性节点 2

    • 文本节点 3

    • 注释节点 8

  • 获取节点的名称 节点.nodeName

    • 元素节点 元素名称大写

    • 文本节点 #text

    • 注释节点 #comment

  • 操作节点的内容(文本节点 注释节点) 节点.nodeValue

    • 获取 节点.nodeValue 对元素节点没有用 所以获取的值是null

    • 设置 节点.nodeValue = 值

1.3获取首尾和兄弟节点

• 兼容问题

1.方法兼容   
       判断该方法是否存在   判断window.getComputedstyle
         if(window.getComputedStyle){ //标准浏览器
       
     }else{//IE低版本浏览器
       
     }
2.属性兼容      ||   一真为真
         || 短路运算  
                    如果第一个条件为false 第二个条件执行
          如果第一个条件为true   第二个条件不执行
           var a = 1;
          var b = 10;
          var c = --a || --b;// 0 || 9      a=0  b=9 c=9
          console.log(a,b,c); // 0 9 9
​
          var a = 2;
          var b = 10;
          var c = --a || --b;    //  c= 1 || --b      a = 1  c=1  b = 10
          console.log(a,b,c);// 1 10 1
​
     标准浏览器   IE浏览器
   标准浏览器的语法  || IE浏览器的语法

1.3.1获取首尾节点

• 标准浏览器 父元素.firstElementChild

• IE浏览器 父元素.firstChild

var lastLi = list.lastElementChild || list.lastChild;
lastLi.style.backgroundColor = "pink"

1.3.2获取尾结点

• 标准浏览器 父元素.lastElementChild

• IE浏览器 父元素.lastChild

var lastLi = list.lastElementChild || list.lastChild;
lastLi.style.backgroundColor = "pink"

1.3.3获取上一个兄弟节点

• 标准浏览器 参考节点.previousElementSibling

• IE浏览器 参考节点.previousSibling

var currentLi = document.getElementById("list");
var prevLi = currentLi.previousElementSibling || currentLi.previousSibling
prevLi.style.backgroundColor = "teal";

1.3.4获取下一个兄弟节点

• 标准浏览器 参考节点.nextElementSibling

• IE浏览器 参考节点.nextSibling

var currentLi = document.getElementById("list");
var nextLi = currentLi.nextElementSibling || currentLi.nextSibling;
nextLi.style.backgroundColor = "green"

2.操作节点