JS 学习第十四天（DOM遍历、节点增删改查）

一.DOM的遍历

1. 父元素查找

1. children 返回（元素）子节点

	  console.log(box.children);//HTMLCollection(3) [div.box1, div.box2, ul.list]

2. childNode 返回子节点（包含文本（空）节点）

	  console.log(box.childNodes);//NodeList(7) [text, div.box1, text, div.box2, text, ul.list, text]

3. firstChild 返回第一个子节点 （包含文本）

	  console.log(box.firstChild);//#text

4. firstElementChild 返回第一个子（元素）节点

	  console.log(box.firstElementChild);//div.box1

5. lastChild 返回最后一个子节点 （包含文本）

	  console.log(box.lastChild);//#text

6. lastElementChild 返回最后一个子（元素）节点

	  console.log(box.lastElementChild);//ul.list

7. parentNode 返回父级节点

	console.log(box1.parentNode);//div.box

8. parentElement 返回父级（元素节点）

	console.log(box2.parentElement);//div.box

9. offsetParent 相对关系 返回第一个由定位属性的祖元素，如果没有，返回body

	console.log(list1.offsetParent);//body

2.兄弟元素 同胞元素

1. nextElementSibling 返回下一个兄弟元素节点
console.log(box1.nextElementSibling);

2. nextSibling 返回下一个兄弟节点 包含文本
console.log(box1.nextSibling);

3. nextElementSibling 返回上一个兄弟元素节点
console.log(box2.previousElementSibling);

4. nextSibling 返回上一个兄弟节点 包含文本
console.log(box1.previousSibling);

二、DOM节点的增删改查

创建元素

1. var arr1=document.createElement('P')
arr1.innerText='段落标签6';
arr1.style.backgroundColor='yellow'

2. var arr2=document.createElement('P')
arr2.innerText='段落标签7';
arr2.style.backgroundColor='hotpink'

3. 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])