Web Api DOM节点基础知识

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中删除节点

Web Api DOM节点基础知识

DOM节点

节点类型

查找节点

增加节点

删除节点

猜你喜欢