DOM节点
DOM树里每一个内容都称之为节点
节点类型
- 元素节点
- 所有的标签 比如body,div
- html是根节点
- 属性节点
- 所有的属性 比如href
- 文本节点
- 所有的文本
- 其他
查找节点
-
父节点查找
parentNode属性
子元素.parentNode
返回最近一级的父节点 找不到返回null
<div class="box"> <span></span> </div> <script> let span = document.querySelector('span') console.dir(span.parentNode) </script>
-
子节点查找
childNodes属性
- 获得所有子节点,包括文本节点(空格,换行),注释节点等
- 返回是一个伪数组
<ul> <li>a1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> let ul = document.querySelector('ul') console.dir(ul.childNodes) </script>
children属性(重点)
-
仅获得所有元素节点
-
返回的还是一个伪数组
<ul> <li>a1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> let ul = document.querySelector('ul') console.log(ul.children) </script>
-
查找兄弟节点
-
查找下一个兄弟节点
-
nextElementSibling属性
<ul> <li>a1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> let li2 = document.querySelector('ul li:nth-child(2)') console.log(li2.nextElementSibling) </script>
-
-
-
查找上一个兄弟节点
-
previousElementSibling属性
<ul> <li>a1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> let li2 = document.querySelector('ul li:nth-child(2)') console.log(li2.previousElementSibling) </script>
-
增加节点
-
创建节点
语法:
document.createElement('标签名')
代码示例:
let li = document.createElement('li')//创建一个li标签 console.dir(li)
-
追加节点
-
插入到父元素的最后一个子元素
父元素.appendChild(要插入的元素)
代码示例:
<ul> </ul> <script> let ul = document.querySelector('ul') let li = document.createElement('li') ul.appendChild(li) </script>
-
往父元素里添加多个子元素
父元素.append(子元素, 子元素,....)
注意:哪个子元素在前面,页面里哪个元素也是在前面的
代码示例:
<div> </div> <script> let div = document.querySelector('div') let span =document.createElement('span') let p = document.createElement('p') div.append(span,p) console.dir(div) </script>
-
-
插入到父元素中某个子元素前面
父元素.insertBefore(要插入的元素,在哪个元素前面)
代码示例:
<div> <span></span> </div> <script> let div = document.querySelector('div') let span = document.querySelector('span') let p =document.createElement('p') console.dir(div.insertBefore(p,span)) </script>
-
克隆节点
元素.cloneNode(布尔值)
注意:cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值
- 若为true,则代表克隆时会包含后代节点一起克隆 (深克隆)
- 若为false,则代表克隆时不包含后代节点(浅克隆)
- 默认为false
代码示例:
<style> .box { width: 200px; height: 200px; background-color: skyblue; margin-bottom: 10px; } </style> <div class="box"> <button>你好</button> </div> <script> let box = document.querySelector('.box') // 浅克隆 let box1 = box.cloneNode() // 深克隆 let box2 = box.cloneNode(true) document.body.appendChild(box1) document.body.appendChild(box2) </script>
删除节点
在页面中如果一个节点已不再被需要时,就可以用删除节点的方法删除他
-
通过父元素删除
语法:
父元素.removeChild(要删除的元素)
代码示例:
<div> <span>1</span> <span>2</span> </div> <script> let div = document.querySelector('div') let span = document.querySelector('span:nth-child(1)') div.removeChild(span) console.log(div) </script>
注意:
-
如果不存在父子关系则删除不成功
例:
<div></div> <span></span> <script> let div = document.querySelector('div') let span = document.querySelector('span') div.removeChild(span) </script>
- 删除节点和隐藏节点(display:none)有区别的:隐藏节点还是存在的,但是删除节点,则从HTML中删除节点