* 增：

① 创建一个标签节点：

✔ let div1 = document.createElement('div')

✔ document.createElement('style')

✔ document.createElement('script')

✔ document.createElement('li')

② 创建一个文本节点

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

(‘你好’是一个字符串，但是text1文本节点【有很多函数的】是一个对象)

③ 标签里面插入文本

✔ div1.appendChild(text1)

✔ div1.innerText = '你好' 或者 div1.textContent = '你好'

✘ 但是不能用 div1.appendChild('你好')

（不同的原型提供了不同的函数）

④ 插入页面中

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

✔ 你必须把它插到 head 或者 body 里面，它才会生效。

✔ document.body.appendChild(div) 或者 已在页面中的元素.appendChild(div)

appendChild

代码：

页面中 div#test1 和 div#test2

let div = document.createElement('div')
test1.appendChild(div)
test2.appendChild(div)

请问：最终div出现在哪里？
答案：是在 test2 里【因为一个元素不能同时出现在两个地方，除非复制一份。】

然后Head里面就有一个div1

body里面最后一个元素div2

所以克隆的话就可以放两个地方。

* 删

两种方法

✔ 旧方法： parentNode.childChild(childNode)

✔ 新方法：childNode.remove()

思考：
如果一个node被移出页面（DOM树）
那么它还可以再次回到页面中吗？
答：可以的。

彻底移出div2的方法

这个时候它在内存里面

div2 = null

div2就跟内存断开联系了，然后那个内存就会被垃圾回收掉了

* 改

写标准属性

✔ 改class: div.className = 'red blue'(全覆盖)//注意不是class而是className

✔ 改class: div.classList.add('red')

div2 id="blue"

此时的class就可以改名为“blue red”

或者直接 div.classList.add('red')

✔ 改style: div.style = 'width:100px; color:blue;'

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

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

div.style.background-color(不存在)，所以 -c 要改成 C

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

读标准属性

✔ div.classList/a.href

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

两种方法都可以，但值可能稍微有些不同。

改事件处理函数

div.onclick 默认为 null

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

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

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

✔ div 会被当做 this

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

div.addEventListener

✔ 是div.onclick的升级版

改内容

改文本内容

div.innerText = 'xxx'
div.textContent = 'xxx'
两者几乎没有区别

改html内容 ✔ div.innerHTML = '<strong>重要内容</strong>'
改标签

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

改parent改爸爸

想要找一个新爸爸？ ✔ newParent.appendChild(div)

✔ 直接这样就可以修改，直接从原来的地方消失

*查

查自己

div(名称)

查爸爸：

node.parentNode  或者  node.parentElement

查爷爷：

node.parentNode.parentNode

查子代：

node.childNodes 或者 node.children

使用childNodes时查看子代空格和回车算一个儿子，li标签算一个儿子，所以总共加起来是7个儿子

去掉空格和回车以后则只有3个儿子

使用node.children(一般情况下使用node.children.length查长度)

思考：当子代变化时，两者也会实时变化吗？

答案是length会自动的变化。

querySelectorAll()这个不会自动变化长度。

查兄弟姐妹：

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))

DOM (3) : 创建元素的 API（增删查改）