获取父节点
-
子元素.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"