DOM

# 简介

# 概念

DOM：文档对象模型（Document object Model），操作网页上元素的API。可以改变网页的内容、结构和样式

# 节点

节点（Node）：是网页中最基本的单位，网页中每一个部分都可以看作一个节点

# DOM树

HTML以树状的形式表现出来，提现出标签与标签的关系

# 节点分类

从上图可以看出节点（node）分为：

文档节点（文档）：document,整个html文档
元素节点（标签）：html标签
属性节点（属性）：href、src，元素的属性
文本节点（文本）：html标签中的文本内容
注释节点（注释）：/**/

我们又可以把以上的内容都可以看作一个对象，节点不同，所以每个对象都有自己的属性和方法

# DOM可以做啥

摘对象（元素节点）
设置元素的属性值
设置元素的样式
动态创建和删除元素
事件处理响应：事件源、事件、事件处理函数

# 获取节点

如果我们要操作节点，我们必须知道如何获取节点

# 兼容性好

var div1 = document.getElementById('box')
var div2 = document.getElementsByTagName('box')
var div3 = document.getElementsByClassName('box')

1
2
3

# 兼容性略差

var div1 = document.querySelector('#box') // 获取第一个元素
var arr1 = document.querySelectorAll('.box') // 获取数组集合，伪数组

1
2

以上：

参数：css选择器字符串
返回值：css选择器中的第一个元素（对象），没有则返回null

伪数组：有长度有索引，但是没有数组方法，遍历只能用for

# 查找节点

# 节点关系

父节点
子节点
兄弟节点

# 父节点查找

parentNode属性
返回为最近一级父节点，找不到返回null

子元素.parentNode

上案例1：

<html>
    <div class="demo-father">
        <div class="demo-son"></div>
    </div>
</html>
<script>
    let son = document.getElementsByClassName('demo-son')
    son.addEventListener('click',function (){
        this.parentNode.style.display = 'none'
    })
</script>

1
2
3
4
5
6
7
8
9
10
11

上案例2：

<div class="demo-close">
    <span class="close"></span>
</div>

<div class="demo-close">
    <span class="close"></span>
</div>

<div class="demo-close">
    <span class="close"></span>
</div>
<script>
    let demoClose = document.querySelectorAll('demo-close')
    for (let i = 0;i < demoClose.length;i++) {
        demoClose[i].addEventListener('click',function () {
            this.parentNode.style.display = 'none'
        })
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 子节点查找

childNodes 获取所有的子节点，包括文本节点(空格、换行)、注释节点
children 仅获取所有元素节点，返回的是一个伪数组

父元素.childNodes
父元素.children(重点)

1
2

上案例：

<button>点击</button>
<ul>
    <li>666</li>
    <li>666</li>
    <li>666</li>
    <li>666</li>
</ul>
<script>
    let btn = document.querySelector('button')
    let ul = document.getElementsByTagName('ul')
    for(let i = 0; i < ul.children.length; i++) {
        btn.addEventListener('click',function () {
            ul.children[i].style.display = 'none'
        })
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 查找兄弟节点

nextElementSibling 下一个兄弟节点
previousElementSibling 上一个兄弟节点

上案例：

<button>点击</button>
<ul>
    <li>666</li>
    <li class="two">666</li>
    <li>666</li>
    <li>666</li>
</ul>
<script>
    let btn = document.querySelector('button')
    let ul = document.getElementsByTagName('ul')
    let two = document.querySelector('two')
    two.nextElementSibling.style.display = none
    two.previousElementSibling.style.display = none
    for(let i = 0; i < ul.children.length; i++) {
        btn.addEventListener('click',function () {
            ul.children[i].style.display = 'none'
        })
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 增加节点

创建一个新的节点
把新的节点放到指定元素的内部

# 创建节点

创造出一个新的网页元素，再把内容添加到元素中

document.createElement('标签名')  // 创建一个div标签
标签名.className = 'current'  // 追加属性
div.innerHTML = '内容' // 追加内容

1
2
3

# 追加节点

要想在界面看到，还得插入到某个父元素中

父元素.appendChild(要插入的元素) // 插入到父元素的最后
父元素.insertBefore(要插入的元素,在哪个元素之前) // 插入到父元素的前面

1
2

# 克隆节点

复制一个原有节点
把复制的节点放到指定的元素中

元素.cloneNode(布尔值)  // 克隆一个已有的元素节点

布尔值为true，代表会包含后代节点一起克隆
布尔值为false，代表不包含后代节点
默认false

上代码：

<ul class="clone-demo">
    <li>666</li>
</ul>
<script>
    let cloneDemo = document.querySelector('.clone-demo')
    let newNode =cloneDemo.cloneNode(false)
    console.log(newNode)  // 布尔值为false打印结果 <ul class="clone-demo"></ul>
    console.log(newNode)  // 布尔值为true打印结果 <ul class="clone-demo" <li>666</li></ul>
</script>

1
2
3
4
5
6
7
8
9

# 删除节点

原生dom操作中删除元素必须通过父元素来删除

父元素.removeChild(要删除的元素)

注：
如果不存在父子关系则删除不成功
删除节点和隐藏节点是有区别，删除则从html中删除，隐藏则是节点还存在

上次更新: 2023/01/29, 11:01:00

← 闭包重绘和回流 →