节点遍历，父找子，子找父

节点遍历

父找子

1. firstElementChild – 找父元素下的第一个子元素

var p = document . body . firstElementChild . innerHTML

console . log(p) // 鸡哥

1. lastElementChild – 找父元素下的最后一个子元素

var oUl = document . querySelector（’ul’）

console.log(oUl)

var oLi = oUl . lastElementChild . innerHTML

console.log(oLi) //rap

1. childNodes – 找父元素下的所有子元素，包括文本和节点

var oUl = document . body . firstElementChild . nextElementSibling . childNodes

console.log(oUl) // [text , li , text , li , text , li , text]

1. children -找出父元素下的所有子元素，不包括文本元素

var oUl = document . body . firstElementChild . nextElementSibling . children

console . log (oUl)  // [li , li , li]

兄弟关系查找

1. nextElementSibling – 找下一个兄弟节点

var oLi = document . body . firstElementChild . nextElementSibling . firstElementChild

. nextElementSibling

       console . log(oLi) //<li>跳<li>

1. previousElementSibling – 找上一个兄弟节点

var tet = document . querySelector（'.text’）

console.log(tet) //rap

var rap = tet . previousElementSibling

console.log(rap) //跳

子找父

1. parentNode – 找父级元素

var txt = document . querySelector(‘.text’)

var oUl = txt . parentNode

节点增删

1. 增加节点 --- 分两部，先增再追加

语法：document . createElement(‘<标签名>’)

var pdd = document . createElement(‘p’)

console.log(pdd) // <p></p>

pdd.innerHTML = ‘泰山’

1. 节点删除 --- remove

pdd . remove

1. 节点追加 --- 父元素.appendChild(子元素)

document . body . appengChild (pdd)