节点操作-创建createElement||appendChild-/追加-/插入insertBefore-/替换replaceChild-/删除remove-克隆元素 cloneNode（增删改查）

01-节点操作-创建元素·`createElement`||`appendChild`

<body><div class="box"><span>我是前端小白</span></div><script>// 创建元素：document.createElement('标签名')let div = document.createElement('div')console.log(div)// 需要给div添加内容：属性（或者事件）// 添加类名div.classList.add('item')// 添加文本div.innerText = '我是前端大佬'// 添加事件div.onclick = function () {this.style.backgroundColor = 'red'}// 先用以下后面的知识：父元素.appendChild(元素)// 给body增加一个divdocument.body.appendChild(div)// 扩展：现在有几种方式，可以向body添加一个标签？// 1. document.write()// document.write('<a href="">点我</a>')// // 禁用：不要用// // 2. document.body.innerHTML// document.body.innerHTML = '<span>X</span>'// 常用// inner HTML和document.createElement的取舍关系document.querySelector('span').onclick = function () {this.style.backgroundColor = 'green'}// 需求：给'我是前端小白'增加一个span兄弟：'前端是最好的语言'// document.querySelector('.box').innerHTML += '<span>前端是最好的语言</span>'// innerHTML如果操作的元素的内容本身有事件：事件会被清理掉// document.createElementlet span = document.createElement('span')span.innerText = '我不是前端新人'document.querySelector('.box').appendChild(span)// document.createElement方式是适合动态的添加元素：不会影响原来元素的事件内容// 如果要写入的内容不带事件：优先使用innerHTML（操作起来更简单）；如果原来的内容本身有事件，建议使用document.createElement()创建元素，再使用appendChild()放进去</script>
</body>

注意：
1.innerHTML如果操作的元素的内容本身有事件：事件会被清理掉
2.document.createElement方式是适合动态的添加元素：不会影响原来元素的事件内容
3.如果要写入的内容不带事件：优先使用innerHTML（操作起来更简单）；如果原来的内容本身有事件，建议使用document.createElement()创建元素，再使用appendChild()放进去

02-节点操作-追加子元素 `appendChild`

<body><ul class="now"><li>隔壁老王1</li><li>隔壁老王2</li><li>隔壁老王3</li></ul><ul class="current"><li>隔壁老李1</li><li>隔壁老李2</li><li class="current-item">隔壁老李3</li></ul><script>// 需求1：给隔壁老王添加一个li元素// 1. 先创建一个li：空lilet li = document.createElement('li')// 2. 添加文本：li.innerText = 值li.innerText = '新老王'// 3. 将li放到ul.now的后面：作为ul的最后一个孩子let now = document.querySelector('.now')now.appendChild(li)// appendChild永远是成为父元素的最后一个孩子元素// 扩展：appendChild()的特性// 1. 如果后面的元素是本身就存在：那么效果是移动效果let currentItem = document.querySelector('.current-item')console.log(currentItem)now.appendChild(currentItem)// 2. 深入扩展：如果元素本身还带子元素，打包带走let current = document.querySelector('.current')now.appendChild(current)</script>
</body>

注意：
1.appendChild永远是成为父元素的最后一个孩子元素
2.如果后面的元素是本身就存在：那么效果是移动效果
3.如果元素本身还带子元素，打包带走

03-节点操作-插入子元素 `inserBefore(新元素,旧元素)`

<body><ul class="now"><li>隔壁老王1</li><li class="current">隔壁老王2</li><li>隔壁老王3</li></ul><script>// 需求：再current对应的li之前插入一个新li：inserBefore(新元素,旧元素)// 1. 创建一个新lilet li = document.createElement('li')li.innerText = '新老王'// 2. 获取到已知li：li.currentlet oldLi = document.querySelector('.current')// 3. 给父元素now插入新lioldLi.parentElement.insertBefore(li, oldLi)// 扩展：insertBefore与appendChild的其他效果一致：如果元素已经存在：移动；如果元素带孩子：打包移动</script>
</body>

注意：
1.inserBefore(新元素,旧元素)
2.insertBefore与appendChild的其他效果一致：如果元素已经存在：移动；如果元素带孩子：打包移动

04-节点操作-替换子元素父元素.`replaceChild(新元素，旧元素)`

<body><ul class="now"><li>隔壁老王1</li><li class="current">隔壁老王2</li><li>隔壁老王3</li></ul><script>// 替换子元素：父元素.replaceChild(新元素，旧元素)// 1. 创建新元素let li = document.createElement('li')li.innerText = '新老王'// 2. 找到旧元素let oldLi = document.querySelector('.current')// 3. 父元素替换oldLi.parentElement.replaceChild(li, oldLi)// replaceChild()应用场景极少</script>
</body>

注意：
1.替换子元素：父元素.replaceChild(新元素，旧元素)
2.应用场景极少

05-节点操作-删除元素 `remove()`||`removeChild()`

<body><ul class="now"><li>隔壁老王1</li><li class="current">隔壁老王2</li><li>隔壁老王3</li></ul><script>// 需求：删掉 li.current元素// 1. 获取到目标li元素let current = document.querySelector('.current')// 2. 自己删除或者通过父级元素删除// 2.1 自己删除current.remove()// 2.2 通过父级元素删除// current.parentElement.removeChild(current)</script>
</body>

06-节点操作-克隆元素 `cloneNode`

<body><ul class="now"><li>隔壁老王1</li><li>隔壁老王2</li><li>隔壁老王3</li></ul><ul class="current"><li>隔壁老李1</li><li>隔壁老李2</li><li class="current-item">隔壁老李3</li></ul><script>// 扩展：appendChild()的特性let now = document.querySelector('.now')// 1. 如果后面的元素是本身就存在：那么效果是移动效果let currentItem = document.querySelector('.current-item')console.log(currentItem)// 复制一份// let newLi = currentItem// 无法解决：元素是一个对象，对象传值是引用传值// 克隆// let newLi = currentItem.cloneNode()  // 浅克隆：只有元素自己的结构// 深克隆：参数为true就好let newLi = currentItem.cloneNode(true)now.appendChild(newLi)// 需要用到克隆// 需要一个元素一模一样，但是又不希望原来的元素受影响：可以采用克隆// 克隆的好处：简化结构的创建过程</script>
</body>

注意：
1.克隆分为：浅克隆和深克隆
2.浅克隆：只有元素自己的结构cloneNode()
3.深克隆：复制全部结构：cloneNode(true)
4.需要一个元素一模一样，但是又不希望原来的元素受影响：可以采用克隆

07-节点三要素

1.节点都有三要素：nodeType（ul和li都一样：1），nodeValue(ul和li都一样：null)，nodeName(大写表签名)