js.4.27

一.DOM的遍历

• 1. 父元素查找
     children 返回（元素）子节点
     console.log(box.children);//HTMLCollection(3) [div.box1, div.box2, ul.list]
     childNode 返回子节点（包含文本（空）节点）
     console.log(box.childNodes);//NodeList(7) [text, div.box1, text, div.box2, text, ul.list, text]
     firstChild 返回第一个子节点 （包含文本）
     console.log(box.firstChild);//#text
     firstElementChild 返回第一个子（元素）节点
     console.log(box.firstElementChild);//div.box1
     lastChild 返回最后一个子节点 （包含文本）
     console.log(box.lastChild);//#text
     lastElementChild 返回最后一个子（元素）节点
     console.log(box.lastElementChild);//ul.list
     parentNode 返回父级节点
     console.log(box1.parentNode);//div.box
     parentElement 返回父级（元素节点）
     console.log(box2.parentElement);//div.box
     offsetParent 相对关系 返回第一个由定位属性的祖元素，如果没有，返回body
     console.log(list1.offsetParent);//body
• 2.兄弟元素 同胞元素
  nextElementSibling 返回下一个兄弟元素节点
  console.log(box1.nextElementSibling);
  nextSibling 返回下一个兄弟节点 包含文本
  console.log(box1.nextSibling);
  nextElementSibling 返回上一个兄弟元素节点
  console.log(box2.previousElementSibling);
  nextSibling 返回上一个兄弟节点 包含文本
  console.log(box1.previousSibling);

二、DOM节点的增删改查

创建元素
var arr1=document.createElement(‘P’)
arr1.innerText=‘段落标签6’;
arr1.style.backgroundColor=‘yellow’
var arr2=document.createElement(‘P’)
arr2.innerText=‘段落标签7’;
arr2.style.backgroundColor=‘hotpink’
var arr3=document.createElement(‘P’)
arr3.innerText=‘段落标签8’;
arr3.style.backgroundColor=‘lightblue’
插入元素
aBtn.insertBefore(arr2,aBoxs[1])
替换元素
aBtn.replaceChild(arr3,aBoxs[4])
删除元素
aBtn.removeChild(aBoxs[3])