Ashun's 技術駅
ashun
2022-02-14
目录

19DOM文档对象模型

# DOM文档对象模型

# 1、查找html元素

//通过元素 id 来查找元素
document.getElementById(id)

//通过标签名来查找元素
document.getElementsByTagName(name)

//通过类名来查找元素
document.getElementsByClassName(name)

//根据选择器来查找元素
document.querySelector()

//根据选择器来查找元素集合
document.querySelectorAll()
1
2
3
4
5
6
7
8
9
10
11
12
13
14

练习中💨

旧版【不建议使用，仅参考】

<div id="a">我是id</div>
<script>
    // id属性
    var div = document.getElementById("a")
    console.log(div);

    // class属性
    var div = document.getElementsByClassName("a")
    console.log(div);

    // 标签属性
    var div = document.getElementsByTagName("div")
    console.log(div);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

获取子元素的内容【不建议使用，仅参考】

<div class="a">
	我司a
	<div class="b">
		我是b
		<div class="c">我是c</div>
	</div>
</div>
<script>
    var a = document.getElementsByClassName("a")[0]
    var b = a.getElementsByClassName("b")[0]
    var c = b.getElementsByClassName("c")[0]
    console.log(c.innerHTML);//我是c
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

新版

<div id="a">我是id</div>
<script>
    // class属性 【获取一个】
    var div = document.querySelector(".a .b .c")
    console.log(div);

    // div属性 【获取多个】
    var div = document.querySelectorAll("div")
    console.log(div);

    // class属性 【多个下层】
    var div = document.querySelectorAll(".a .b,.c")
    console.log(div);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 2、改变html元素

//改变元素的 inner HTML【包含标签】
element.innerHTML = new html content

//获取内容【只更改内容】
innerText

//获取HTML 元素的属性值
element.attributes

//例
var a = document.querySelector("a")
a.attributes.href = "www.sina.com"

//改变 HTML 元素的属性值
element.setAttribute(attribute, value)

//例
var a = document.querySelector("a")
a.setAttribute("href","www.sina.com")

//改变 HTML 元素的样式
element.style.property = new style
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

练习中💨

<div class="a">
    内容
</div>
<script>
	//改变元素的 inner HTML【包含标签】
    var div=document.querySelector(".a")
    div.innerHTML="innerHTML改变内容和标签"
</script>
1
2
3
4
5
6
7
8
<div class="a">
    内容
</div>
<script>
	//获取HTML 元素的属性值
    var div=document.querySelector(".a")
    console.log(div.attributes); 
</script>
1
2
3
4
5
6
7
8

# 3、添加和删除元素

//创建 HTML 元素
document.createElement(element)

//删除 HTML 元素
document.removeChild(element)

//删除元素
document.remove()

//添加 HTML 元素
document.appendChild(element)

//替换 HTML 元素
document.replaceChild(element)

//写入 HTML 输出流(会覆盖文档)
document.write(text)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

练习中💨

<script>
    var body = document.querySelector("body")//获取body
    var div = document.createElement("div")//创建div
    div.innerHTML = "创建div"//给div添加内容
    body.appendChild(div)//插入到body里面
</script>
1
2
3
4
5
6

# 4、Element 对象

# 1)元素属性

//返回元素属性的 NamedNodeMap
element.attributes

//设置或返回元素的 class 属性
element.className

//返回元素节点的指定属性值
element.getAttribute()

//把指定属性设置或更改为指定值
element.setAttribute()

//设置或返回元素的 id
element.id

//设置或返回元素的内容
element.innerHTML

//返回元素的名称
element.nodeName

//从元素中移除指定属性
element.removeAttribute()

//设置或返回元素的 style 属性
element.style

//返回元素的标签名
element.tagName
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

练习中💨

<div>div</div>
<script>
    //attributes:div属性
	//elemen:获取的代码
    var div=document.querySelector("div")
</script>
1
2
3
4
5
6
<div class="a">div</div>
<script>
    //设置或返回元素的 class 属性
    var div=document.querySelector("div")
    console.log(div.className);//a
</script>
1
2
3
4
5
6
//返回元素的名称
//获取B站的所有标签符
  console.log(
        [
            ...new Set(
                [...document.querySelectorAll("*")].map((item) => item.nodeName)
            ),
        ].length
    );
1
2
3
4
5
6
7
8
9

image-20211215171959496

<div class="a">div</div>
<script>
    //更改颜色
	//设置或返回元素的 style 属性
    var body = document.querySelector("body")//获取body
    div.style.color = "red"
</script>
1
2
3
4
5
6
7

# 2)元素位置和尺寸

//返回元素的可见高度【本质上的高】
element.clientHeight

//返回元素的可见宽度【本质上的宽】
element.clientWidth

//返回元素的高度【实际看到的高】
element.offsetHeight

//返回元素的宽度【实际看到的宽】
element.offsetWidth

//返回元素的水平偏移位置
element.offsetLeft

//返回元素的垂直偏移位置
element.offsetTop
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

练习中💨

<div class="a" style="width: 100px; height: 100px;">div</div>
<script>
    //返回元素的可见高度【本质上的高】
    var div=document.querySelector("div")
    console.log(div.clientHeight);//100
</script>
1
2
3
4
5
6
<div class="a" style="width: 100px; height: 100px;">div</div>
<script>
	//返回元素的可见宽度【本质上的宽】
    var div=document.querySelector("div")
    console.log(div.clientWidth);//100
</script>
1
2
3
4
5
6

# 3)节点导航

//返回元素子节点的 NodeList
element.childNodes

//返回元素的首个子集
element.firstChild

//返回元素的最后一个子元素
element.lastChild

//返回元素的父节点
element.parentNode

//返回当前节点的下一个节点
element.nextSibling

//返回当前节点的上一个节点
element.previousSibling
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

练习中💨

<div class="box">
    <div class="a">a</div>
    <div class="a">a</div>
    <div class="a">a</div>
</div>
<script>
    //返回元素子节点的 NodeList
    var div=document.querySelector(".box")
    console.log(div.childNodes);//[text, div.a, text, div.a, text, div.a, text]  //text是空格
</script>

<script>
    //返回元素的首个子集
    var div=document.querySelector(".box")
    console.log(div.firstChild);//[#text]
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="box">
    <div class="a1">a1</div>
    <div class="a2">a2</div>
    <div class="a2">a3</div>
</div>
<script>
	//返回元素的父节点
    var a1=document.querySelector(".a1")
    console.log(a1.parentNode);//div.box
</script>

<script>
	//返回当前节点的下一个节点
    var a1=document.querySelector(".a1")
    console.log(a1.nextSibling);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 4)添加和删除元素

//向元素添加新的子节点，作为最后一个子节点
element.appendChild()

//在指定的已有的子节点之前插入新节点
element.insertBefore()

//克隆元素
element.cloneNode()

//从元素中移除子节点
element.removeChild()
1
2
3
4
5
6
7
8
9
10
11

练习中💨

<div class="box">
    <div class="a1">a1</div>
    <div class="a2">a2</div>
    <div class="a2">a3</div>
</div>
<script>
    //在指定的已有的子节点之前插入新节点
    var box = document.querySelector(".dox")//获取class box
    var x = document.createElement("div")//创建div

    x.innerHTML = "我是新的x" //新建添加内容
    box.insertBefore(x, box.childNodes[0]) //在box属性前面添加内容
</script>

<script>
    //向元素添加新的子节点，作为最后一个子节点
    var box = document.querySelector(".dox")//获取class box
    var x = document.createElement("div")//创建div

    x.innerHTML = "我是新的x" //新建添加内容
    box.appendChild(x) //在box属性后面添加内容
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="box">
    <div class="a1">a1</div>
    <div class="a2">a2</div>
    <div class="a2">a3</div>
</div>
<script>
    //克隆元素【放进box后面去】
    var box=document.querySelector(".box") //这里是获取box属性
    var a1=document.querySelector(".a1") //先获取a1属性
    
    var a1Clone=a1.cloneNode() //这里是克隆a1
    a1Clone.innerHTML="我是克隆a1"//新建添加内容
    box.appendChild(a1Clone) //这里是把a1克隆放进box后面去

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

image-20211225102506797

# 5、Attr 对象

//返回属性的名称
attr.name

//设置或返回属性的值
attr.value
1
2
3
4
5

# 6、Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态

# 1)事件句柄(Event Handlers)

//图像的加载被中断
onabort

//元素获得焦点(记)
onfocus

//元素失去焦点(记)
onblur

//域的内容被改变(记)
onchange

//当用户点击某个对象时调用的事件句柄(记)
onclick

//当用户双击某个对象时调用的事件句柄
ondblclick

//在加载文档或图像时发生错误
onerror

//某个键盘按键被按下
onkeydown

//某个键盘按键被按下并松开
onkeypress

//某个键盘按键被松开
onkeyup

//一张页面或一幅图像完成加载(记)
onload

//鼠标按钮被按下
onmousedown

//鼠标被移动
onmousemove

//鼠标从某元素移开
onmouseout

//鼠标移到某元素之上(记)
onmouseover

//鼠标按键被松开
onmouseup

//重置按钮被点击
onreset

//窗口或框架被重新调整大小
onresize

//文本被选中
onselect

//确认按钮被点击(记)
onsubmit
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

练习中💨

<div class="a">内容</div>
<script>
	//当用户点击某个对象时调用的事件句柄(记) 【点击生产告示我们事件叫什么名字和值】
    var a=doc.querySelector(".a") //获取a属性
    a.onclick=function(event){ //这里是点击产生事件  //event：是形参 ——可任意字母
        console.log(event); //打印事件
    }
</script>
1
2
3
4
5
6
7
8
<input type="text" class="a">
<script>
    //元素获得焦点(记)  onfocus  【点击里面就会失去】
    var a = document.querySelector(".a") //获取a属性
    a.onfocus = function () {//获取焦点✨💖
        console.log("点击里面获取"); //打印
    }
 </script>

<script>
    //元素失去焦点(记)  onblur 【点击外面就会失去】
    a.onblur = function () {//失去焦点✨💖
        console.log("点击外面失去"); //打印
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

image-20211225105511206

域的内容被改变(记) onchange

<input type="text" class="a">
<script>
    //域的内容被改变(记) onchange
    var a=document.querySelector(".a") //获取a属性
    a.onchange=function(){
        console.log(123); //【这里就输入内容就会打印123哦】
    }
</script>
1
2
3
4
5
6
7
8
<input type="text" class="a">
<select name="city" class="city">
    <option value="广州">广州</option>
    <option value="威武">威武</option>
    <option value="深圳">深圳</option>
</select>

<script>
    //域的内容被改变  onchange
    var a = document.querySelector(".city")
    a.onchange = function (event) {
        console.log(event.target.value); //【获取选择的对象】
    }
</script>

<script>
    //域的内容被改变(记) onchange
    var a=document.querySelector(".a") //获取a属性
    a.onchange=function(evwnt){
        console.log(event.target.value); //【输入内容就获取】
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
    //一张页面或一幅图像完成加载(记)
    // onload
    window.onload = function () {
        console.log(window);
    }
</script>
1
2
3
4
5
6
7

这里就用得最最多了💖✨🚀

<form action="" class="form">
    <label for="">账号</label>
    <input type="text">
    <button>提交</button>
</form>
<script>
    //确认按钮被点击(记)
    // onsubmit
    var form = document.querySelector(".form")
    form.onsubmit = function () {
        console.log(123);
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 2)鼠标 / 键盘属性

//返回当事件被触发时，鼠标指针的水平坐标
clientX

//返回当事件被触发时，鼠标指针的垂直坐标
clientY
1
2
3
4
5

# 3）事件传播

1、事件捕获 		  【父级元素传播到触发的子级元素上（只有低版本Ie浏览器是捕获事件）】
2、事件派发发阶段   【传递过程】
3、事件冒泡 		  【触发的元素往父级元素传播】
1
2
3

# 4)event属性

//返回其事件监听器触发该事件的元素
currentTarget

//返回触发此事件的元素（事件的目标节点）
target

//target和currentTarget的区别（重点必记）
currentTarget 绑定该事件的元素 【跟冒泡事件】
target        触发了事件的元素

//返回事件传播的当前阶段
eventPhase
捕获阶段 1
事件派发 2
冒泡阶段 3

//返回事件生成的日期和时间(时间戳)
timeStamp

//返回当前 Event 对象表示的事件的名称
type
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

练习中💨💖✨

<style>
    .a { width: 300px; height: 300px; background: #ff0;}
    .b { width: 100px; height: 100px; background: #0ff;}
</style>

<div class="a" onclick="eventHandler(event)"> 比如：3
    <div class="b" onclick="eventHandler(event)"></div> 点击这元素就网上传播 比如：2
</div>

<script>
    function eventHandler(e) {
        console.log(e.eventPhase);//返回事件传播的当前阶段eventPhase
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

target和currentTarget的区别**（重点必记）**✨✨✨

<style>
    .a { width: 300px; height: 300px; background: #ff0;}
    .b { width: 100px; height: 100px; background: #0ff;}
</style>

<div class="a" onclick="eventHandler(event)"> 比如：3
    <div class="b" onclick="eventHandler(event)"></div> 点击这元素就网上传播 比如：2
</div>

<script>
    //target和currentTarget的区别（重点必记）
    function eventHandler(e) {
        console.log(e.currentTarget); //放定该事件的元素 【用这里点击是：2 3】💥
        console.log(e.target); //触发了事件的元素 【用这里点击是：2】💥
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 5）标准Event方法

//通知浏览器不要执行与事件关联的默认动作(取消事件的默认行为)
preventDefault()

//不再派发事件
stopPropagation()
1
2
3
4
5

练习中preventDefault()💨

<form action="" onsubmit="sumbit(event)"> <!--这里这传一个形参给他-->
    <input type="text" name="username">
    <button>按钮</button>
</form>
<script>
    function sumbit(e) {
        e.preventDefault() //表单取消事件的默认行为【就是不让他消失永久显示在控制台上】
        console.log(123);
    } 
</script>
1
2
3
4
5
6
7
8
9
10

不再派发传播事件stopPropagation()💨

<style>
    .a { width: 300px; height: 300px; background: #ff0;}
    .b { width: 100px; height: 100px; background: #0ff;}
</style>

<div class="a" onclick="eventHandler(event)">我是a <!--比如：3-->
    <div class="b" onclick="eventHandler(event)">我是b</div> <!--比如：2-->
</div>

<script>
    //不再派发事件💥 【】
    function eventHandler(e) {
        e.stopPropagation()
        console.log(e.currentTarget); //2
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 7、事件监听器

//第一个参数是事件的类型（比如 "click" 或 "mousedown"）
//第二个参数是当事件发生时我们需要调用的函数
//第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的
element.addEventListener(event, function, useCapture)

//removeEventListener()删除事件监听
element.removeEventListener("mousemove", myFunction)
1
2
3
4
5
6
7

练习中💨

<!-- 这是第一种 -->
<div>内容</div>
<script>
    var div = document.querySelector("div")
    div.onclick = function () {
        console.log("我是事件监听器，第一种");
    }
</script>
1
2
3
4
5
6
7
8
<!-- 这第二种添加的功能 写法不同-->
<div>内容</div>
<script>
    var div = document.querySelector("div")
    div.addEventListener("click", function () {
        console.log("我是事件监听器，第二种");
    })
</script>
1
2
3
4
5
6
7
8
<!-- 删除===第二种才有删除的功能哦 -->
<div>内容</div>
<script>
    var div = document.querySelector("div") //获取元素

    function eventHandler() {//这个函数只是打印123
        console.log(123);
    }
    div.addEventListener("click", eventHandler) //这里是触发函数【用这个控制台就打印123咯】
    div.removeEventListener("click", eventHandler) //这里是清除【用这个控制台上是什么也没有哦】
</script>
1
2
3
4
5
6
7
8
9
10
11

# 8、事件委托

目的：减少代码执行优化资源

原理：在目标集合元素的父级元素添加事件，点击目标集合元素时，因为事件冒泡的作用实现事件委托

 let ul = document.querySelector("ul")
ul.onclick = function(event){
  console.log(event.target)
}

ul.addEventListener("click",function(event){
  console.log(event.target)
})
1
2
3
4
5
6
7
8

练习中💨

<!-- 第一种 -->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var list = document.querySelectorAll("li")
    list.forEach(function (item) {
        item.onclick = function () {
            console.log(123); //这里是每一个成员添加的点击事件
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 第二种 -->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var list = document.querySelectorAll("li")
    list.forEach(function (item) {
        item.onclick = function () {
            console.log(item.innerText); //这里是实现每一个成员点击打印相应值出来
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 第三种，优化 -->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var lu = document.querySelector("ul")
    ul.onclick = function (event) { //event添加事件对象
        console.log(event.target.innerText); //target事件委托
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12

# 案例

<select name="country" class="country">
    <option value="">==请选择国家==</option>
</select>

<select name="city" class="city">
    <option value="">==请选择城市==</option>
</select>

<script>
    var arr = [
        {
            countryName: "中国",
            cities: [
                { cityName: "广州" },
                { cityName: "深圳" },
                { cityName: "东莞" },
            ],
        },
        {
            countryName: "美国",
            cities: [
                { cityName: "纽约" },
                { cityName: "华盛顿" },
                { cityName: "洛杉矶" },
            ],
        },
        {
            countryName: "日本",
            cities: [
                { cityName: "大阪" },
                { cityName: "东京" },
                { cityName: "札幌" },
            ],
        },
    ];

    var country = document.querySelector(".country"); //获取country
    var city = document.querySelector(".city"); //获取city

    //循环迭代国家
    arr.forEach(function (item) {
        var option = document.createElement("option"); //创建一个空白的option标签
        option.value = item.countryName; //设置value
        option.innerText = item.countryName; //设置内容
        country.appendChild(option); //把option插入到country里面
    });

    // 每次国家切换的时候触发事件
    country.onchange = function (event) {
        city.innerHTML = '<option value="">==请选择城市==</option>'
        var currentCountry = event.target.value; //获取到选中的国家
        arr.forEach(function (item) {
            if (item.countryName === currentCountry) {
                //判断当前选中的国家和数据进行比较
                item.cities.forEach(function (items) {
                    console.log(items);
                    var option = document.createElement("option"); //创建一个空白的option标签
                    option.value = items.cityName; //设置value
                    option.innerText = items.cityName; //设置内容
                    city.appendChild(option); //把option插入到country里面
                });
            }
        });
    };
</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

这种自己了【不建议使用】

<body>
    <!-- 使用下拉列表做城市联动效果，选择完国家，出现对应得城市 -->
    <select onchange="setSecond(this)" id="first">
        <option value="">==请选择国际==</option>
        <option value="zh">中国</option>
        <option value="en">美国</option>
        <option value="jn">日本</option>
    </select>

    <select name="" id="second">
        <option value="">==请选择国际==</option>
    </select>

</body>

<script>
    function setSecond(obj) {
        var val = obj.value;
        if (val == 'en') {
            var sec = document.getElementById('second');
            sec.options[0] = new Option("洛杉矶", "one");
            sec.options[1] = new Option("纽约", "two");
            sec.options[2] = new Option("凤凰城", "three");
        } else if (val == 'jn') {
            var sec = document.getElementById('second');
            sec.options[0] = new Option("东京", "one");
            sec.options[1] = new Option("北海市", "two");
            sec.options[2] = new Option("广岛", "three");
        }
        else {
            var sec = document.getElementById('second');
            sec.options[0] = new Option("移动", "one");
            sec.options[1] = new Option("广州", "two");
            sec.options[2] = new Option("上海", "three");//可设置循环配置，也可一个一个配置
        }
    }
</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
编辑 (opens new window)
上次更新: 2022/04/24, 13:33:34
18BOM 浏览器对象模型
20json

← 20json→

最近更新
01
课件-react路由-V6
01-22
02
课件-国际化
01-22
03
课件-redux-toolkit
01-22
更多文章>
Theme by Vdoing | Copyright © 2019-2024 Evan Xu | MIT License