DOM编程旧：parentNode。childChild(childNode)

网页是一棵树

文字内容也是一个节点

JS用document操作网页（Document Object Model）

获取元素，也叫标签

用哪个

  querySelector
  querySelectorAll
  做demo直接用idxxx
  兼容IE用getElement(s)Byxxx

其他

window.idxxx 或者直接idxxx
document.getElementById('idxxx')
document.getElementsByTagName('div')[0]
document.getElementsByClassName('red')[0]
documnet.querySelector('#idxxx')
document.querySelectorAll('.red')[0]

获取特定元素

html---->document.documentElement

head---->document.head

body---->document.body

窗口---->window

所有元素---->document.all 它的值为falsy,在IE中值不是falsy，一般用于判断是否为IE

获取到的元素是一个对象

console.dir(div1)

自身属性: className, id, style
第一层原型链HTMLElement.prototype；有所有div共有属性
第二层原型HTMLElement.prototype; HTML标签共有属性
第三层原型Element.prototype; XML,HTML标签的共有属性
第四层原型Node.prototype; 所有节点共有的属性，节点包括XML标签文本注释、HTML标签文本注释
第五层原型EventTarget.prototype; 函数属性是addEventListener
最后一层原型是Object.prototype

右键点击查看

节点，元素

节点包括元素和文本

元素就是标签，叫法不同而已

节点Node包括以下几种
- MDN完整描述
- 1 ----> 元素Element
- 3 ----> 文本Text
- 8 ----> 注释Comment
- 9 ----> 文档Document
- 11 ----> 文档片段DocumentFragment
- 记住1和2

节点的增删改查

增

创建一个标签节点

let div1 = document.createElement('div')
document.createElement('style')
document.createElement('script')

创建一个文本节点;文本一个是一个节点，不是单纯的字符串

let text1 = document.createTextNode('你好')

标签里面插入文本

div1.appendChild(text1)
div1.innerText = '你好'
div1.textContent = '你好'
不能用div1.appendChild('你好')

创建的标签默认处于JS线程中

要把它插入到head或者body里面，它才会生效

document.body.appendChild(div1)或者页面中的元素.appendChild(div1)

有div#test1和div#test2
let div = document.createElement('div')
test.appendChild(div)
test2.appendChild(div)

div会出现在哪里

会出现在test2里面

删

旧：parentNode。childChild(childNode)
新：childNode.remove()

改

写标准属性

改class：div.className = 'red blue'（全覆盖）

改class：div.classList.add('red')

改style：div.style='widht:100px;color:blue;'

改style的一部分：div.style.width = '200px'

大小写：div.style.backgroundColor='white'

改data-*属性：div.dataset.x='frank'

读标准属性

div.classList/a.href

div.getAttribute('class')/a.getAttribute('href')

改事件处理函数

div.onclick默认为null

默认点击div不会有任何事情发生

但是如果把div.onclick改为一个函数fn

那么点击div的时候，浏览器就会调用这个函数

并且是这样调用fn.call(div,event)

div会被当做this

event则包含了点击事件的所有信息，如坐标

div.addEventListener

该内容

改文本内容

div.innerText = 'xxx'

div.textContent = 'xxx'

改HTML内容

div.innerHTML='<strong>重要内容</strong>'

改标签

div.innerHTML = '' //先清空
div.appendChild(div2) //再加内容

改爸爸

newParent.appendChild(div)
//直接从原来的地方消失

查

查爸爸

node.parentNode 或者 node.parentElement

查爷爷

node.parentNode.parentNode

查子代

node.childNodes 或者 node.children

查兄弟姐妹

node.parentNode.childNodes还要排除自己
node.parentNode.children还要排除自己

查看老大

node.firstChild

查看老么

node.lastChild

查上一个哥哥/姐姐

node.previousSibling

查看下一个弟弟/妹妹

node.nextSibling

遍历div里面所有的元素

travel=(node,fn)=>{
    fn(node)
    if(node.children){
        for(let i=0;i<node.children.length;i++){
            travel(node.children[i],fn)
        }
    }
}

travel(div1,(node)=>console.log(node))