JavaScript（七）获取节点，操作节点，BOM

1.获取节点

1.1获取父节点

• 子元素.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.操作节点

2.1追加节点

• 创建节点
  • document.createElement(“节点名称”) 创建元素节点
  • doucument.createTextNode(“文本内容”) 创建文件节点
• 追加节点
  • 父元素.appendChild(子节点)

2.2删除节点

• 参考节点.remove()

  • 删除当前节点 存在兼容问题

   var list = document.getElementsByTagName("ul")[0];
          // 1.参考节点.remove()  删除本身   存在兼容问题 不支持IE浏览器
          console.log(list)
  

• 父元素.removeChild(子节点)

  • 删除父元素下的子节点

   // 2.父节点.removeChild(子节点)
          var oli = document.getElementById("list");
          // list.removeChild(oli)
  

2.3插入节点

• 父元素.insertBefore(插入的新节点,参考位置)

 <script>
        var oUl = document.getElementsByTagName("ul")[0];
        var oLi = document.getElementsByTagName("li");
        // 1.插入节点 父元素.insertBefore(要插入的节点,参考位置)
        var createLi = document.createElement("li");
        createLi.innerHTML