Justin-刘清政的博客

python/前端/13-JS的DOM操作

2020-11-03

1、DOM概述

1-1 什么是DOM

  • 文档对象模型 Document Object Model
  • 文档对象模型 是表示和操作 HTML和XML文档内容的基础API
  • 文档对象模型,是W3C组织推荐的处理可扩展标志语言的标准编程接口

12 DOM分类

  • 核心 DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

1-3 DOM分级

  • 1级dom

    1
    1级DOM在1998年10月份成为W3C的提议,由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构,允许获取和操作文档的任意部分。DOM HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。
  • 2级dom

    1
    通过对原有DOM的扩展,2级DOM通过对象接口增加了对鼠标和用户界面事件、范围、遍历(重复执行DOM文档)和层叠样式表(CSS)的支持。
  • 3级dom

    1
    3级DOM通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展,DOM3包含一个名为“DOM载入与保存”的新模块,DOM核心扩展后可支持XML1.0的所有内容,包括XML Infoset、 XPath、和XML Base。

1-4 DOM树

img

2 查找标签

2-1 直接查找

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>div上面的div</div>
<div>div上面的div</div>
<div id="d1">div
<div>div>div</div>
<p class="c1">div>p
<span>div>p>span</span>
</p>
<p>div>p</p>
</div>
<div>div下面div</div>
<div>div下面div</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
"""
id查找
类查找
标签查找
"""
# 注意三个方法的返回值是不一样的
document.getElementById('d1')
<div id="d1">…</div>

document.getElementsByClassName('c1')
HTMLCollection [p.c1]0: p.c1length: 1__proto__: HTMLCollection

document.getElementsByTagName('div')
HTMLCollection(3) [div#d1, div, div, d1: div#d1]


let divEle = document.getElementsByTagName('div')[1]
divEle
<div>div>div</div>
"""
当你用变量名指代标签对象的时候 一般情况下都推荐你书写成
xxxEle
divEle
aEle
pEle
"""

2-2 间接查找(熟悉)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
let pEle = document.getElementsByClassName('c1')[0]  # 注意是否需要索引取值

pEle.parentElement # 拿父节点
<div id="d1">"div
"<div>div>div</div><p class="c1">…</p><p>div>p</p></div>
pEle.parentElement.parentElement
<body>…</body>
pEle.parentElement.parentElement.parentElement
<html lang="en"><head>…</head><body>…</body></html>
pEle.parentElement.parentElement.parentElement.parentElement
null

let divEle = document.getElementById('d1')
divEle.children # 获取所有的子标签
divEle.children[0]
<div>div>div</div>

divEle.firstElementChild
<div>div>div</div>

divEle.lastElementChild
<p>div>p</p>

divEle.nextElementSibling # 同级别下面第一个
<div>div下面div</div>

divEle.previousElementSibling # 同级别上面第一个
<div>div上面的div</div>

3 节点操作

3-1 基本操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="d1">div
<p id="d2">div>p</p>
<span>div>span</span>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
"""
通过DOM操作动态的创建img标签
并且给标签加属性
最后将标签添加到文本中
"""
let imgEle = document.createElement('img') # 创建标签

imgEle.src = '111.png' # 给标签设置默认的属性
"111.png"
imgEle

imgEle.username = 'jason' # 自定义的属性没办法点的方式直接设置
"jason"
imgEle
<img src="111.png">


imgEle.setAttribute('username','jason') # 既可以设置自定义的属性也可以设置默认的书写
undefined
imgEle
<img src="111.png" username="jason">
imgEle.setAttribute('title','一张图片')
imgEle
<img src="111.png" username="jason" title="一张图片">

let divEle = document.getElementById('d1')
undefined
divEle.appendChild(imgEle) # 标签内部添加元素(尾部追加)
<img src="111.png" username="jason" title="一张图片">


"""
创建a标签
设置属性
设置文本
添加到标签内部
添加到指定的标签的上面
"""
let aEle = document.createElement('a')

aEle
<a></a>
aEle.href = 'https://www.mzitu.com/'
"https://www.mzitu.com/"
aEle
<a href="https://www.mzitu.com/"></a>

aEle.innerText = '点我有你好看!' # 给标签设置文本内容
"点我有你好看!"
aEle
<a href="https://www.mzitu.com/">点我有你好看!</a>
let divEle = document.getElementById('d1')
undefined
let pEle = document.getElementById('d2')
undefined
divEle.insertBefore(aEle,pEle) # 添加标签内容指定位置添加
<a href="https://www.mzitu.com/">点我有你好看!</a>


"""
额外补充
appendChild()
removeChild()
replaceChild()


setAttribute() 设置属性
getAttribute() 获取属性
removeAttribute() 移除属性
"""

# innerText与innerHTML
divEle.innerText # 获取标签内部所有的文本
"div 点我有你好看!
div>p
div>span"

divEle.innerHTML # 内部文本和标签都拿到
"div
<a href="https://www.mzitu.com/">点我有你好看!</a><p id="d2">div&gt;p</p>
<span>div&gt;span</span>
"

divEle.innerText = 'heiheihei'
"heiheihei"
divEle.innerHTML = 'hahahaha'
"hahahaha"

divEle.innerText = '<h1>heiheihei</h1>' # 不识别html标签
"<h1>heiheihei</h1>"
divEle.innerHTML = '<h1>hahahaha</h1>' # 识别html标签
"<h1>hahahaha</h1>"

3-2 获取值操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="d1">
<input type="file" id="d3">

<select name="" id="d2">
<option value="111">哈哈</option>
<option value="222">嘿嘿</option>
<option value="333">么么</option>
</select>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 获取用户数据标签内部的数据
let seEle = document.getElementById('d2')
seEle.value
"111"
seEle.value
"333"

let inputEle = document.getElementById('d1')
inputEle.value

# 如何获取用户上传的文件数据
let fileEle = document.getElementById('d3')
fileEle.value # 无法获取到文件数据
"C:\fakepath\02_测试路由.png"

fileEle.files
FileList {0: File, length: 1}0: File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}length: 1__proto__: FileList

fileEle.files[0] # 获取文件数据
File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}

3-3 class、css操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.c1 {
height: 400px;
width: 400px;
border-radius: 50%;
}
.bg_green {
background-color: greenyellow;
}
.bg_red {
background-color: red;
}
</style>
</head>
<body>
<div id="d1" class="c1 bg_red bg_green"></div>
<p>今天难得拖堂 大伙儿见谅</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
let divEle = document.getElementById('d1')
undefined
divEle.classList # 获取标签所有的类属性
DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]


divEle.classList.remove('bg_red') # 移除某个类属性
undefined

divEle.classList.add('bg_red') # 添加类属性
undefined
divEle.classList.contains('c1') # 验证是否包含某个类属性
true
divEle.classList.contains('c2')
false

divEle.classList.toggle('bg_red') # 有则删除无则添加
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false
divEle.classList.toggle('bg_red')
true



# DOM操作操作标签样式 统一先用style起手
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
"red"
pEle.style.fontSize = '28px'
"28px"
pEle.style.backgroundColor = 'yellow'
"yellow"
pEle.style.border = '3px solid red'
"3px solid red"

4 事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
onclick        当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。

onfocus 元素获得焦点。 // 练习:输入框
onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)

onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。

onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击,使用的对象是form。

4-1 基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
"""
达到某个事先设定的条件 自动触发的动作
"""
# 绑定事件的两种方式
<button onclick="func1()">点我</button>
<button id="d1">点我</button>

<script>
// 第一种绑定事件的方式
function func1() {
alert(111)
}
// 第二种
let btnEle = document.getElementById('d1');
btnEle.onclick = function () {
alert(222)
}
</script>


"""
script标签既可以放在head内 也可以放在body内
但是通常情况下都是放在body内的最底部


# 等待浏览器窗口加载完毕之后再执行代码
window.onload = function () {
// 第一种绑定事件的方式
function func1() {
alert(111)
}
// 第二种
let btnEle = document.getElementById('d1');
btnEle.onclick = function () {
alert(222)
}
}
"""

4-2 事件案例

  • 开关灯案例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div id="d1" class="c1 bg_red bg_green"></div>
    <button id="d2">变色</button>

    <script>
    let btnEle = document.getElementById('d2')
    let divEle = document.getElementById('d1')
    btnEle.onclick = function () { // 绑定点击事件
    // 动态的修改div标签的类属性
    divEle.classList.toggle('bg_red')
    }
    </script>
  • input框获取焦点失去焦点案例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <input type="text" value="老板 去吗?" id="d1">

    <script>
    let iEle = document.getElementById('d1')
    // 获取焦点事件
    iEle.onfocus = function () {
    // 将input框内部值去除
    iEle.value = ''
    // 点value就是获取 等号赋值就是设置
    }
    // 失去焦点事件
    iEle.onblur = function () {
    // 给input标签重写赋值
    iEle.value = '没钱 不去!'
    }
    </script>
  • 实时展示当前时间

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <input type="text" id="d1" style="display: block;height: 50px;width: 200px">
    <button id="d2">开始</button>
    <button id="d3">结束</button>

    <script>
    // 先定义一个全局存储定时器的变量
    let t = null
    let inputEle = document.getElementById('d1')
    let startBtnEle = document.getElementById('d2')
    let endBtnEle = document.getElementById('d3')
    // 1 访问页面之后 将访问的时间展示到input框中
    // 2 动态展示当前时间
    // 3 页面上加两个按钮 一个开始 一个结束
    function showTime() {
    let currentTime = new Date();
    inputEle.value = currentTime.toLocaleString()
    }

    startBtnEle.onclick = function () {
    // 限制定时器只能开一个
    if(!t){
    t = setInterval(showTime,1000) // 每点击一次就会开设一个定时器 而t只指代最后一个
    }
    }
    endBtnEle.onclick = function () {
    clearInterval(t)
    // 还应该将t重置为空
    t = null
    }
    </script>
  • 省市联动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    <select name="" id="d1">
    <option value="" selected disabled>--请选择--</option>
    </select>
    <select name="" id="d2"></select>

    <script>
    let proEle = document.getElementById('d1')
    let cityEle = document.getElementById('d2')
    // 先模拟省市数据
    data = {
    "河北": ["廊坊", "邯郸",'唐山'],
    "北京": ["朝阳区", "海淀区",'昌平区'],
    "山东": ["威海市", "烟台市",'临沂市'],
    '上海':['浦东新区','静安区','黄浦区'],
    '深圳':['南山区','宝安区','福田区']
    };
    // 选for循环获取省
    for(let key in data){
    // 将省信息做成一个个option标签 添加到第一个select框中
    // 1 创建option标签
    let opEle = document.createElement('option')
    // 2 设置文本
    opEle.innerText = key
    // 3 设置value
    opEle.value = key // <option value="省"></option>
    // 4 将创建好的option标签添加到第一个select中
    proEle.appendChild(opEle)
    }
    // 文本域变化事件 change事件
    proEle.onchange = function () {
    // 先获取到用户选择的省
    let currentPro = proEle.value
    // 获取对应的市信息
    let currentCityList = data[currentPro]
    // 清空市select中所有的option
    cityEle.innerHTML = ''
    // 自己加一个请选择
    let ss = "<option disabled selected>请选择</option>"
    // let oppEle = document.createElement('option')
    // oppEle.innerText = '请选择'
    // oppEle.setAttribute('selected','selected')
    cityEle.innerHTML = ss

    // for循环所有的市 渲染到第二个select中
    for (let i=0;i<currentCityList.length;i++){
    let currentCity = currentCityList[i]
    // 1 创建option标签
    let opEle = document.createElement('option')
    // 2 设置文本
    opEle.innerText = currentCity
    // 3 设置value
    opEle.value = currentCity // <option value="省"></option>
    // 4 将创建好的option标签添加到第一个select中
    cityEle.appendChild(opEle)
    }
    }
    </script>
    </body>
    </html>

使用支付宝打赏
使用微信打赏

点击上方按钮,请我喝杯咖啡!

扫描二维码,分享此文章