1、增

1.1 创建一个标签节点

  1. let div1 = document.createElement('div')
  2. document.createElement('style')
  3. document.createElement('script')
  4. document.createElement('li')

1.2 创建一个文本节点

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

1.3 标签里面插入文本

  1. div1.appendChild(text1)
  2. div1.innerText = '你好'或者div1.textContent = '你好'
  3. //但是不能用div1.appendChild('你好')  必须appendChild一个节点   不能appendChild一个字符串

1.4 插入页面中

你创建的标签默认处于JS线程中
必须把它插到head或者body里面，它才会生效

  1. document.body.appendChild(div1)
  2. 或者
  3. 已在页面中的元素.appendChild(div1)

2、appendChild

  1. //页面中有div#test1   div#test2
  2. let div = document.createElement('div')
  3. test1.appendChild(div)
  4. test2.appendChild(div)

请问最终div出现在哪里？ test2里面
一个元素不能出现在两个地方，除非复制一份

3、删

3.1 两种方法

旧方法：parentNode.childNode(childNode)
新方法：childNode.remove()

3.2 思考：如果一个节点被移出页面（DOM树），可以再次回到页面中吗？

答案：可以的

4、改属性

写标准属性

  1. 改class：div.className = 'red blue' (全覆盖)
  2. 改class：div.classList.add('red')
  3. 改style：div.style = 'width:200px;color:blue;'
  4. 改style的一部分：div.style.width = '200px'
  5. 大小写：div.style.backgroundColor = 'white'
  6. 改data-*属性：div.dataset.x = 'frank'

读标准属性

  1. div.classList
  2. a.href
  3. div.getAttribute('class')/a.getAttribute('href')
  4. 两种方法都可以，但值可能有些不同

5、改事件处理函数

5.1 div.onclick默认为null

默认点击div不会有任何事情发生
但是如果你把div.onclick改为一个函数fn
那么点击div的时候，浏览器就会调用这个函数
并且是这样调用的fn.call(div.event)
div会被当做this
event则包含了点击事件的所有信息

5.2 div.addEventListener

是div.onclick的升级版

6、改内容

6.1 改文本内容

  1. div.innerText = 'xxx'
  2. div.textContent = 'xxx'
  3. //两者几乎没有区别

6.2 改HTML内容

  1. div.innerHTML = `<span>你好<span>`

6.3 改标签

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

7、改爸爸

newParent.appendChild(div)
直接这样就可以了，直接从原来的地方消失

8、查

8.1 查爸爸

  1. node.parentNode或者node.parentElement

8.2 查爷爷

  1. node.parentNode.parentNode

8.3 查子代

  1. node.childNodes或者node.children(用的多)

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

8.4 查兄弟姐妹

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

8.5 查看老大

  1. node.firstNode

8.6 查看老幺

  1. node.lastNode

8.7 查看上一个兄弟

  1. node.previousSibling
  2. node.previousElementSibling

8.8 查看下一个兄弟

  1. node.nextSibling
  2. node.nextElementSibling

8.9 遍历一个div里面的所有元素

  1. travel  = (node,fn) => {
  2.   fn(node)
  3.   if(node.children){
  4.       for(let i=0;i<node.children.length;i++){
  5.             travel(node.children[i],fn)
  6.       }
  7.   }
  8. }
  9. travel(div1,(node)=>{console.log(node)})