DOM笔记
网页其实是一颗树
获取元素，也叫标签
window.id(名)，或者直接.id（名）
document.getElementById('id')
document.getElementsByTagName('div')[0](所有div标签)
document.getElementsByClassName('red')[0]（所有clss为red的标签）
document.querySelector('#div')
document.querySelectorAll('#red')[0]
注意：工作中常用document.querySelector()和document.querySelector()
在demo中可以直接用.id，
兼容IE用getElementById或者getElementsTagName
获取特定元素
获取html元素
document.documentElement
获取head元素
document.head
获取body元素
document.body
获取窗口
window
获取所有元素
document.all
查看一个div的原型链
第一层原型HTMLDivElement.prototype（所有div的共有属性）
第二层原型HTMLElement.prototype（所有有HTML标签的共有属性）
第三层原型Element.prototype（这里是xml，html标签的公有属性）
第四层原型node.prototype（所有节点的共有属性，xml标签 文本，注释，html标签，文本 注释等）
第五层原型EventTarget.prototype（里面最重要的函数属性是addEventListener）
最后一层原型Object.prototype
节点，元素
节点（Node）包括以下几种
1表示元素Element，也叫标签Tag
3表示文本Text
8表示注释comment
9表示文档Document
11表示文档片段DocumentFargment
节点的增删改查
增
创建一个标签节点
div = document.createElement('div')
创建一个文本节点
text1 = document.createTextNode('你好')
标签里插入文本
div.appendChild('text')
div.innerHTML="你好"或者div.textContent="你好"
但是不能够用div.appendChild('HIHAO')
插入到页面中
创建的标签默认在js的线程中
必须把它插入到head或者中才能生效
使用bodydocumend.body.appendChild(div)
或者
页面中的元素.appendChild(div)
appendChild
页面中有两个div#text1和div#text2
let div = document.createElement('div')
text1.appendChild(div)
text.appendChild(div)
请问最终div出现在哪里
text1
text2
text1和text2中都有
答：text2中（一个元素不可能出现爱两个地方，除非复制）
删
两种方法
旧方法；parentNode.removeChild(childNode)
新方法；childNode.remove()
改
改属性（写标准属性）
改class；div.className = "reg" (全覆盖)
改class；div.classList.add('red')
改style；div.style = "widht:100px; height:50px;"
改style的一部分；div.style.color = 'red'
改data_*属性；divdataset.x = 'frank'
读标准属性
div.classList / a.href
div.getAttribute('class'),a.getAttribute('href')
改事件处理函数
div.onclick默认为；null
默认点击div不会有任何事发生
但是你把div.onclick改写为一个函数
那么点击div的时候，浏览器就会调用这个函数
并且是这样调用的fn.call(div,event)
div会被当做this
event则包含点击事件的所有信息
绑定事件
div.addEventListener
该内容
改文本内容
div.innerText = 'xxx'
div.textContent = 'xxx'
改HTML内容
div.innerHTML = `<span>666<span/>`
改标签
div.innerHTML = " "//先清空
div.appengChild(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
DON操作是跨线程的
跨线程操作
各线程各司其职
JS引擎不能操作页面，只能操作JS
渲染引擎不能操作JS，只能操作页面
document.body.appendChild(div1)(如何改变页面)
跨线程通信
当浏览器发现JS在body里天机了div1对象
浏览器就会通知渲染引擎在页面里也新增一个div元素
新增的div元素所有属性都照抄div1对象
插入新标签的完整过程
在diiv1放入压面之前
（对div1所有的操作都属于JS线程内的操作）
把div1放入页面之后
（浏览器就会发现JS的意图，就会通知渲染线程在页面中渲染div1对应的元素）
把div翻入页面之后
对div1的操作都有可能会触发重回渲染
div1.id = 'newld' 可能会重新渲染，也可能不会
div1.title = 'new' 可能会重新渲染，也可能不会
如果连续对div1对此操作，浏览器可能会合并成一侧操作，也可能不会
属性同步
标签属性
对div1的标签属性的修改，会被浏览器同步到页面中
data_*属性
同上
非标准属性
对非标准属性的修改，测只会定留在JS线程中不同步到页面里
注意：如果你有自定义属性，有想被同步到页面红，请使用data_作为前缀
property vs Attribute
property属性
JS线程中div1的所有属性，叫做div1的propety
attribute也是属性
渲染引擎中div1对应的属性，叫做attribute
区别
大部分时候，同名的property和attribue值相等
但是如果不是标准属性，那么它俩只会在开始是相等
但注意attribute只支持字符串
而property支持字符串，布尔等类型
