DOM操作

# DOM树

当网页被加载时, 浏览器会创建页面的文档对象模型(Document Object Model)
DOM标准规定HTML文档中的 每个成员 都是一个节点 (node)

标签在JavaScript里叫做元素或者节点!!

DOM树如下图:

# 查找标签

# 直接查找

document.getElementById      根据 ID 获取 唯一一个 标签
document.getElementsByClassName      根据 class属性 获取 一系列 标签
document.getElementsByTagName      根据 标签名 获取 一系列 标签
document.getElementsByName      根据 name属性 获取 一系列 标签

切记只有id不用按照索引取!! 其余的记得加上[0]!

<body>
    <div class="box"></div>
    <div class="box" name="xxx"></div>
    <div id="btn"></div>
    <input type="text" name="xxx">
    <script>
        // 通过id找只会找到一个;通过类名、标签名、name属性可能会找到多个,会放到数组对象里!
      	// 数组对象可以通过索引找到具体的某一个.
        var a = document.getElementById("btn")
        var b = document.getElementsByClassName("box")
        var c = document.getElementsByTagName("div")
        var d = document.getElementsByName("xxx")
        console.log(a) // <div id="btn"></div>
        console.log(typeof b,b.length) // object 2
        console.log(typeof c,c.length) // object 3
        console.log(typeof d,d.length) // object 2
    </script>
</body>

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

# 间接查找

可通过直接查找找到一个标签后进一步找..
元素理解成标签即可..(也是节点)

语法	含义
childNodes	获取所有的子节点, 除了元素还有文本等
children	获取所有元素子节点 , 不包含文本
parentNode	获取父级节点
previousSibling	获取上一个兄弟节点, 包含文本
previousElementSibling	获取上一个兄弟元素节点 , 不包含文本
nextSibling	获取下一个兄弟节点, 包含文本
nextElementSibling	获取下一个兄弟元素节点 , 不包含文本
firstChild	获取第一个子节点, 包含文本
firstElementChild	获取第一个子元素节点 , 不包含文本
lastChild	获取最后一个子节点, 包含文本
lastElementChild	获取最后一个子元素节点 , 不包含文本

<body>
    <div class="box"></div>
    <div class="box" name="xxx"></div>
    <div id="btn">
        <p>11</p>
        <p>22</p>
    </div>
    <input type="text" name="xxx">
    <script>
        // 1> 获取所有的子节点,childNodes包括文本内容(换行符空格也算)
        var res1 = document.getElementById("btn").childNodes
        var res2 = document.getElementById("btn").children
        console.log(res1, res2) // [text, p, text, p, text] [p, p]
        // 2> 获取父级节点
        var res3 = document.getElementById("btn").parentNode
        console.log(res3) // body 获取到的是body标签的全部内容
        // 3> 获取下一个兄弟节点 注意:若是nextSibling的话,会把换行符也当做兄弟
        var res4 = document.getElementById("btn").nextElementSibling
        console.log(res4) // input
        // 4> 获取上一个兄弟节点
        var res5 = document.getElementById("btn").previousElementSibling
        console.log(res5) // div.box
        // 5> 获取当前节点的第一个儿子标签
        var res6 = document.getElementById("btn").firstElementChild
        console.log(res6) // <p>11</p>
        // 6> 获取当前节点的最后一个儿子标签
        var res7 = document.getElementById("btn").lastElementChild
        console.log(res7) // <p>22</p>
    </script>
</body>

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

# 增加标签

box.appendChild(oDiv)
box.insertBefore(oDiv,p2)

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: lightsalmon;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>111</p>
        <p>222</p>
    </div>
    <script>
        // 创建元素/标签 此刻并未存在于文档树中
        var oDiv = document.createElement("div")
        // 给该元素添加css样式
        oDiv.style.width = "80px"
        oDiv.style.height = "80px"
        oDiv.style.backgroundColor = "red"

      	// 把新建出来的标签添加到文档树中
        // 注意: 1,2同时写,只会实现其中一个效果,谁写在后面谁生效
        // Don't ask why.I don't care.I just want the results.
        // 1> 追加一个子节点(放到最后)
        var box = document.getElementsByClassName("box")[0]
        box.appendChild(oDiv)

        // 2> 插入一个子节点(插入到某个节点前)
      	// somenode.insertBefore(新的子节点,某个节点); 
        var p2 = document.getElementsByTagName("p")[1]
        box.insertBefore(oDiv,p2)
    </script>
</body>

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

# 删除/替换标签

box.removeChild(p2)
box.replaceChild(oDiv, p1)

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: lightsalmon;
        }
    </style>
</head>
<body>
<div class="box">
    <p>111</p>
    <p>222</p>
</div>
<script>
    var box = document.getElementsByClassName("box")[0]
    var p2 = document.getElementsByTagName("p")[1]
    // 删除节点 somenode.removeChild(要删除的子节点);
    box.removeChild(p2)

    // 替换节点 somenode.replaceChild(新的子节点, 某个子节点);
    var oDiv = document.createElement("div")
    var p1 = document.getElementsByTagName("p")[0]
    oDiv.style.width = "80px"
    oDiv.style.height = "80px"
    oDiv.style.backgroundColor = "red"
    box.replaceChild(oDiv, p1)
</script>
</body>

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 class="box" id="d1" name="123">
    111
    <p>111</p>
    <div>
        <p>哈哈哈</p>
    </div>
    <p>222</p>
</div>
*/

// 1. 获取节点内容
var divEle = document.getElementById("d1")
divEle.innerText // 会取所有的文本内容,只要在此标签范围内
divEle.innerHTML // divEle标签的所有内容

// 2. 设置节点的内容
var divEle = document.getElementById("d1")
// 不管是innerText还是innerHTML都会将divEle标签的内容全部覆盖掉.
// so要注意覆盖效果! 通常会给p文本标签用innerText
// 注意: divEle.innerText="<p>2</p>" 这样写`<p>2</p>`会被当成文本内容.
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

// 3. attribute操作元素属性
var divEle = document.getElementById("d1");
divEle.getAttribute("name") // 123
divEle.setAttribute("age","18") // 自定了一个age属性添加到标签里
divEle.removeAttribute("age")
// 给元素添加css样式不建议这样做 相当于行内样式
// divEle.setAttribute("style","background-color:red;width:100px")

// 4. 标签自带的属性还可以直接`.`属性名来获取和设置
imgEle.src
imgEle.src="..."
inputEle.value

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

# 获取元素value属性

适用于input、select、textarea标签
标签 自带的 属性可以直接.属性名来获取和设置

var x = document.getElementsByTagName('input')[0]
var y = document.getElementsByTagName('select')[0]
var z = document.getElementsByTagName('textarea')[0]

x.value
y.value
z.value

1
2
3
4
5
6
7

# class属性操作

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
        }

        .box {
            background-color: lightsalmon;
        }

        /* 跟上方的div标签选择器都是直接选中 类选择器的优先级更高 */
        .box3 {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div class="box3"></div>
    <script>
        var arr = document.getElementsByTagName("div")
        for (var i = 0; i < arr.length; i++) {
            arr[i].classList.add("box") // 添加
        }

        var oDiv = document.getElementsByTagName("box3")[2]
        console.log(oDiv.classList.contains("box3")) // true 判断它包不包含这个类属性
        oDiv.classList.remove("box3") // 移除
        oDiv.classList.toggle("box3") // 若有,移除;若没有,添加..

    </script>
</body>

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

# style属性操作

JS通过style属性操作css样式的规律:

1> 对于没有中横线的CSS属性一般直接使用style.属性名即可

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

1
2
3
4

2> 对含有中横线的CSS属性, 将中横线后面的第一个字母换成大写即可

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

1
2
3
4

# 事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action).

# 常用事件

[鼠标事件]
onclick        当用户 点击 某个对象时调用的事件句柄.
ondblclick     当用户 双击 某个对象时调用的事件句柄.
onmousedown    鼠标按钮被按下.
onmousemove    鼠标被移动.
onmouseout     鼠标从某元素移开.
onmouseover    鼠标移到某元素之上.

[键盘事件]
onkeydown      某个键盘按键被按下.          
							 		应用场景:当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开.
onkeyup        某个键盘按键被松开.

[系统事件]
onload         一张页面或一幅图像完成加载.
onerror				 加载出错后
onresize			 窗口调整大小时
onscroll			 滚动时

[表单事件]
onselect       在文本框中的文本被选中时发生.
onsubmit       确认按钮被点击,提交后.
onfocus        元素获得焦点.
onblur         元素失去焦点.
							     应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       元素内容被改变.  
							 		 应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)

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

# 绑定事件

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="box1" onclick="changeColor(this)"></div>
    <div id="box2"></div>
    <script>
        // 方式一
        // 注意: this是实参,表示触发事件的当前元素. ths为函数定义过程中的形参.
        var oBox1 = document.getElementById("box1");

        function changeColor(ths) {
            ths.style.backgroundColor = "green";
        };

        // 方式二
        var oBox2 = document.getElementById('box2');
        oBox2.onclick = function () {
            this.style.backgroundColor = 'green';
        };
    </script>
</body>

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

← BOM操作 js案例→