JavaScript-2.DOM操作

发表于 | 分类于 | | 本文总阅读量 次
字数统计: 4.7k | 阅读时长 ≈ 23

JavaScript-DOM操作

DOM是W3C标准，DOM定义了访问HTML和XML文档标准

DOM（Document Object Models）W3C文档对象模型中立平台和语言的接口，它允许程序和脚本动态访问和更新文档，结构和样式

DOM分为三个部分

核心 DOM 针对任何结构化文档标准模型

XML DOM 针对XML文档标准模型，定义了所有XML元素对象和属性，已经访问它们的方法。

HTML DOM 针对HTML文档标准模型，定义了所有HTML元素对象和属性，已经访问它们的方法

DOM节点

根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点（Node）

  1. 整个文档是一个文档节点（document对象） #整个HTML文档
  2. HTML元素都是元素节点（element对象） #相当于标签
  3. HTML元素内的文本是文本节点（text对象） #相当于文本
  4. HTML元素中属性都是属性节点（attribute对象) #相当于标签属性
  5. HTML文档中注释是注释节点（comment对象）
DOM
节点属性

节点自身的属性

attributes指定节点的属性集合

nodeType 以数字值返回指定节点的节点类型，如果是1则是元素节点，如果是2则是属性节点

nodeValue 根据节点类型设置或返回节点值

nodeName 节点是元素nodeName返回标签，节点是属性nodeName返回属性

innerHTML 节点元素文本值

导航属性

parentNode 节点元素

firstChild 节点下第一个元素

lastChild 节点下最后一个元素

childNode 节点（元素）子节点

常用导航属性

parentElement 父节点标签属性

children 所有子节点标签

firstElementChild 第一个子标签元素

lastElementChild 最后一个子标签元素

nextElementSibling 下一个兄弟标签元素

previousElementSibling 上一个兄弟标签元素

节点彼此层级关系

父，子，兄弟等属于描述这些关系

父节点（parent） 拥有 子节点（child），同级子节点统称为兄弟节点（sibling）

在节点数中，顶端节点称为根（root） ，也就是<html></html>节点

每个节点都有父节点，除了 根节点

一个节点可拥有任意数量的子节点

兄弟节点是拥有相同父节点的节点

DOM操作

元素查询

getElementById() 查询ID属性，返回对拥有指定ID第一个对象的引用

getElementsByTagName() 查询标签属性，返回带有指定标签名的对象集合，返回所有元素列表

getElementByClassName() 查询class属性，返回文档中所有指定类名的元素集合

getElementsByName() 查询name属性，返回带有指定名称的对象集合

查询示例

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
<body>
    <div class="div1">div1标签
        <p class="p1" id="p1">p标签</p>
        <div class="div2">div2标签
            <div class="div1">div2子标签div1</div>
        </div>
	</div>
    <div class="table">
        <p><input type="text" name="user" id="u1">用户1</p>
        <p><input type="text" name="user" id="u2">用户2</p>
        <p><input type="text" name="user" id="u3">用户3</p>
        <p><input type="text" name="user" id="u4">用户4</p>
    </div>
</body>
<script>
    var getid = document.getElementById('u1');	//这里查找id为u1的标签
    console.log(getid);
    //<input type="text" name="user1" id="u1">
    console.log(getid.nodeName)		//获取标签 ,因为id=u1的是input标签
    //Input
	console.log(getid.attributes);	//返回input标签属性
    //{0: type, 1: name, 2: id, type: type, name: name, id: id, length: 3}、

    
    
    var gettag = document.getElementsByTagName('p');	//这里是获取标签为<p>的标签
    console.log(gettag);	//返回标签元素集合
    //HTMLCollection(5) [p#p1.p1, p, p, p, p, p1: p#p1.p1] 
    console.log(gettag[0].nodeName);	//返回标签
    //P
    console.log(gettag[0]);	//通过索引获取全部属性
    //<p class="p1" id="p1">p标签</p>
    console.log(gettag[1]);
    //<p><input type="text" name="user" id="u1">用户1</p>
    for(var i=0;i<gettag.length;i++){
        console.log(gettag[i]);	//可通过索引来获取全部属性
    }
    console.log(gettag[0].attributes);	//第一个<p>标签有class和id属性
    //NamedNodeMap {0: class, 1: id, class: class, id: id, length: 2}
    console.log(gettag[1].attributes);	//第二个<p>标签没有属性
    //NamedNodeMap {length: 0}
    console.log(gettag[0].innerHTML);	//获取标签内的html
    //p标签
    console.log(gettag[1].innerHTML);	//获取标签的内的html
    //<input type="text" name="user" id="u1">用户1
    console.log(gettag[1].innerText)	//可以直接获取innerText,内部的文本
    //用户1
    
    
    
    
    var getclass = document.getElementsByClassName('table');	//获取class为table的标签
    console.log(getclass);	//返回标签元素集合
    //HTMLCollection [div.table]
    console.log(getclass[0].nodeName);	//返回标签
    //DIV
	console.log(getclass[0].innerHTML);
    //<p><input type="text" name="user" id="u1">用户1</p>
    //<p><input type="text" name="user" id="u2">用户2</p>
    //<p><input type="text" name="user" id="u3">用户3</p>
    //<p><input type="text" name="user" id="u4">用户4</p>
    console.log(getclass[0].innerText);
    //用户1
    //用户2
    //用户3
    //用户4
	var getclass = document.getElementsByClassName('div1');
    console.log(getclass)
    //HTMLCollection(2) [div.div1, div.div1]
    console.log(getclass[0])
    //<div class="div1">div1标签
    //    <p class="p1" id="p1">p标签</p>
    //    <div class="div2">div2标签
    //        <div class="div1">div2子标签div1</div>
    //    </div>
	//</div>
    console.log(getclass[1])
    //<div class="div1">div2子标签div1</div>
    
    
    
    
    var getname = document.getElementsByName('user');
    console.log(getname);	//指定名称的对象集合
	//NodeList(4) [input#u1, input#u2, input#u3, input#u4]
    console.log(getname[0]);
    //<input type="text" name="user" id="u1">
    console.log(getname[0].nodeName);
    //INPUT
</script>
局部查询

局部查找不支持getElementById() 和 getElementsByName()

但是getElementsByTagName() 和 getElementsByClassName() 支持

示例

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
<body>
	<div class="div1">div1标签
        <p class="p1" id="p1">p标签</p>
        <div class="div2">div2标签
            <div class="div1">div2子标签div1</div>
        </div>
	</div>
</body>
<script>
	//全局查找
    var gettag1 = document.getElementById("p1");
    console.log(gettag1);
    //<p class="p1" id="p1">p标签</p>
    
    var ret = gettag1.nextElementSibling;	//nextElementSibling下一个兄弟标签
    console.log(ret)
    //<div class="div2">div2标签
    //   <div class="div1">div2子标签div1</div>
    //</div>
            
    console.log(ret.innerHtml);	//使用getElementById不可用查找兄弟标签的内部html
    //undefined
    
    
    //局部查找
    var getclass1 = document.getElementsByClassName('p1')[0];
    console.log(getclass1)
    var ret1 = getclass1.nextElementSibling;
    console.log(ret1)
    console.log(ret1.innerHTML)
    //<p class="p1" id="p1">p标签</p>
</script>
事件

DOM Event事件

HTML4.0的特性之一是由能力使HTML事件触发游览器中的Action动作

比如：当用户点击某个HTML元素时触发一段JavaScript

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

Event通常和函数结合使用，函数不会发送在事件发送前被执行！

Event对象在时间发生时系统以及创建好，并且会在事件函数被调用时传给事件函数，只需要接受下即可

如：onkeydown，我们想知道那个按键被按下，需要通过event对象的属性，这里就是keycode

事件属性

onclick 点击某个对象时调用的句柄

ondblclick 双击某个对象时调用的句柄

onfocus 元素获得焦点（通常用于点击输入框后效果）

onblur 元素失去焦点（用于表单验证，当用户离开某个输入框，代表完成输入，可以对他验证）

onchange 域的内容被改变（用于表单元素，当元素内容被改变时触发（三级联动））

onkeydown 键盘按下（用户在最后输入框后，按回车时，表单提交）

onkeypress 键盘按下并松开

onkeyup 键盘松开

onload 页面/图片完成后加载

onmousedown 鼠标按钮被按下

onmousemove 鼠标移动

onmouseout 鼠标离开元素

onmouseover 鼠标在某元素之上

onmouseleave 鼠标离开被选元素

onselect 文本被选中

onsubmit 确认按钮被提交

事件传播

通过event.stopPropagation() 方法阻止事件传播

事件绑定
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
实例1
<body>
<p><input type="submit" onclick="alert('单击提交完成')" value="单击提交"></p>
    <!--这里直接绑定，当onclick单击后，就执行alert('单击提交完成')-->
<p><input type="submit" ondblclick="console.log('双击提交完成')" value="双击提交"></p>
    <!--这里直接绑定，当ondblclick双击后，就执行console.log('提交完成')-->
<p><button onclick="alert('button')">button</button></p>
    <!--这里也是直接绑定，当点击button按钮时，执行alert('button')--->
</body>


实例2
<body>
	<p><input type="text" name='user' name="please input user" onfocus="f1()" onblur="f2()"></p>
    <!--调用f1函数，但鼠标进入执行f1(),当鼠标移走执行f2()--> 
</body>
<script>
	var ele=document.getElementsByName("user");
    console.log(ele)
    function f1(){
        if(ele[0].value=="please input user" || ele[0].value=="no user"){
            ele[0].value="请输入用户";	
            console.log(ele[0].value);
            //如果ele的value为no user或者please input user时，点击进入input标签时会改成请输入用户
        }
    }
    function f2(){
        if(ele[0].value.trim()){	// trim(去除空字符)后，如果value为空
            ele[0].value="no user";	//当value为空时候，鼠标离开input后设置value为no user
            console.log(ele[0].value);
        }
    }
</script>


实例3:
<body>
    <div class="div"> hello div</div>
    <!--可以通过查找class属性，然后在绑定事件-->
    
	<p id="p1">ppp</p>
    <!--通过查找id，然后在绑定事件-->
   
</body>
<script>
    window.onload = function(){
        var ele_div = document.getElementsByClassName('div')[0];
        ele_div.style.color="red";
        console.log(ele_div.innerHTML);
        //加载完成后，绑定class为div名称属性，将ele_div属性设置颜色为红色，返回值
    }
    
    var ele_p=document.getElementById("p1");
    ele_p.onclick=function(){
        alert(ele_p.innerHTML);
        //通过id=p1的标签，绑定单击按钮，弹出innerHTML
    }
</script> 


实例4
<body>
    <div class="v1">    
        <div class="v2">div111</div>
        <div class="v2">div222</div>
        <div class="v2">div333</div>
        <div class="v2">div444</div>
    </div>
</body>
<script>
    var ele_div=document.getElementsByClassName("v2");
    for(var i=0;i<ele_div.length;i++){
        ele_div[i].onclick=function(){
            alert(123);
        }
        //为每一个class为v2的绑定一个onclick，弹出123
    }
    //如果想弹出每一个innerHTML怎么办？
    for(var i=0;i<ele_div.length;i++){
        ele_div[i].onclick=function(){
            alert(this.innerHTML);
            //这里的this，表示ele_div自身
        }
    }
</script>   

实例5,直接在标签类绑定事件加this，和绑定标签时候加this区别
<body>
    <div>div1
        <div>div2
            <div>div2 子div标签</div>
            <p>123</p>
    		<a id="a1" onclick="func_A(this)" style="color: red">aaaaa1</a>
            <p>div2 子p标签</p>
        </div>
        <hr>
		<div>div3
            <div>div3 子div标签</div>
            <a id="a2" style="color: red">aaaaaa2</a>
            <p>div3 子p标签</p>
        </div>
    </div>
</body>
<script>
    function func_A(than){
        console.log(than);
        console.log(than.innerHTML);
        console.log(than.nextElementSibling);	//获取下一个标签
        console.log(than.previousElementSibling);	//获取上一个标签
        console.log(than.parentElement);	//获取父标签div3
    }

    var ele_A = document.getElementById('a2');
    ele_A.onclick=function(){
        console.log(this);
        //<a id="a2" style="color: red;">aaaaaa2</a>
        console.log(this.innerHTML);
        //aaaaaa2
        console.log(this.nextElementSibling)	//获取下一个标签
        //<p>div3 子p标签</p>
        console.log(this.previousElementSibling)	//获取上一个标签
        //<div>div3 子div标签</div>
        console.log(this.parentElement)	//获取父标签div3
        
    }
</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
<body>
    <p onclick="funcP()" id='p1'>ppp</p>
    <div>
        div
    </div>
    <a onclock="funcA(this)">aaa</a>
</body>
<script>
    var ele_p = document.getElementById("p1");
    //绑定方式1
    function funcP(){
        console.log(this);
        alert(ele_p.innerText);
    }
    
    var ele_div = document.getElementsByTagName("div");
    //绑定方式2
    ele_div[0].onclick=function(){
        console.log(this);
        console.log(ele_div[0].innerText);
    }
    
    var ele_a = document.getElementsByTagName("a");
    //绑定方式3
    function funcA(self){
        console.log(self);
    }
    function funcA(than){
        console.log(ele_a[0].innerText);
    }
</script>

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
<body>
    <form action="" id=form1>
        <p><input type="text" name="user"></p>
        <p><input type="password" name="password"></p>
        <p><input type="submit" value="提交"></p>
	</form>
	<form action="" id=form2>
        <p><input type="text" name="user"></p>
        <p><input type="password" name="password"></p>
        <p><input type="submit" value="提交"></p>
	</form>
</body>
<script>
	var form_Ele1 = document.getElementById("form1");
    form_Ele1.onsubmit = function(){
        alert("格式有误");
        return false;
    }
    /*如果onsubmit绑定的form表单，当用户点击提交，是先提交onsubmit事件，在提交submit类型
    通常用于登录框验证用户名，密码，等是否正常
    return false 在提交时，如果返回false，则不会忘action发送信息
    */
    
    var form_Ele2 = document.getElementById("form2");
    form_Ele2.onsubmit=function(e){	//e表示事件对象，状态，e可以自定义
    	alert('格式有误');
    	e.preventDefault();
        //preventDefault()表示阻止默认事件，类似return false
    }
</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
想象下，有一个大div盒子，里面有一个小div盒子，如何使小盒子不受大盒子影响

<head>
    <meta charset="UTF-8">
    <title>阻止传播</title>
	<style>
        .outer {
            width:300px;
            height: 300px;
            background-color: #0d6aad;
        }
        .inner {
            width:100px;
            height:100px;
            background-color: #14d1ff;
        }
    </style>
</head>
<body>
	<div class="outer" onclick="func()">
    	<div class="inner"></div>
	</div>
</body>
<script>
    function func1(){
        alert('i am outer')
    }
    var ele_inner = document.getElementsByClassName("inner")[0];
    ele_i.onclick=function (e) {
        // alert('i am inner');
        console.log(this);
        e.stopPropagation();
</script>
元素操作

所有操作都是先要找到元素，然后在进行操作

增

需要先创建元素，在将元素添加到指定位置。

createElement(name) 创建name元素

appendChild() 将元素添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>
	<style>
        .div1 {
            backgroup-color:blue;
        }
    </style>
</head>
<body>
    <div class="div1">hello div1
        <button onclick="add()">add</button>
    </div>
</body>
<script>
    function add(){
        var ele=document.createElement("p");   //只是创建了<p>标签
        ele.innerHTML="hello p";               //在<p>标签里面添加hello p"
        var get_div = document.getElementsByClassName("div1")[0];	//找到位置
        get_div.appendChild(ele);
    }
</script>
删

在删除元素前，需要获取所要删除的元素

removeChild() 删除元素

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
<head>
	<style>
        .div1{
            width:300px;
            height:100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="div1">hello div1
        <button onclick="add()">add</button>
        <button onclick="del()">del</button>
    </div>
</body>
<script>
    function add(){
        var ele=document.createElement("p");
        ele.innerHTML="hello p";
        var get_div = document.getElementsByClassName("div1")[0];
        get_div.appendChild(ele);
    }
    function del(){
        var ele_div=document.getElementsByClassName("div1")[0];	//先找到div1标签
        var ele_p = ele_div.getElementsByTagName("p")[0];	//在从div1标签中找到要删除的标签
        if(ele_p==undefined){		//如果没有要删除的标签，提示没有，有的话则删除
            alert('没有删除的标签');
        }
        else{ele_div.removeChild(ele_p)}
    }
</script>
改

修改HTML内容方法

innerHTML 如果内部有html标签，会显示html标签，也会被渲染

innerText 如果内部有html标签，直接显示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
<head>
    <style>
        .div2 {
            width: 400px;
            height: 400px;
            background-color: #0d6aad;
        }
    </style>
</head>
<body>
<div class="div2">
    <p><a>hello world</a></p>
    <p><a>hello world</a></p>
    <button onclick="changehtml()">修改html</button>
    <button onclick="changetext()">修改text</button>
</div>
</body>
<script>
    function changehtml(){
        var get_div = document.getElementsByClassName("div2")[0];
        var get_p = get_div.getElementsByTagName("p")[0];
        get_p.innerHTML="<h1>hello world!</h1>"
        //这里会将样式改成<h1>标签
    }
    function changetext(){
        var get_div = document.getElementsByClassName("div2")[0];
        var get_p = get_div.getElementsByTagName("p")[1];
        get_p.innerText="<h1>hello world!</h1>"
        //这里会将<h1>显示出来不渲染，就算设置空值,标签p依然存在只是控制
    }
</script>

修改CSS样式

找到标签后，直接设置样式即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <p id="p1">hello world</p>
    <p id="p2">hello world</p>
    <button onclick="change()">修改id=p2的字体和颜色</button>
</body>
<script>
        var get_p = document.getElementById("p1");
        get_p.style.color="red";

        function change(){
            var get_p2 = document.getElementById("p2");
            get_p2.style.color="yellow";
            get_p2.style.fontSize="48px"
        }
</script>

修改HTML属性

先找到标签，在修改属性

setAttribute(name,value)

getAttribute(name) ==> elementNode.value(DHTML) 查看属性

也可以增加class名称属性

className

classList.add

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
<head>
    <style>
        .div1 {
            height: 200px;
            width: 200px;
            background: #00c0ef;
        }
    </style>
</head>
<body>
    <div class="div1">
        <a href="https://www.baidu.com">百度</a>
        <br>
        <button onclick="change()">修改连接为sina</button>
        <button onclick="select()">查看div属性</button>
    </div>
</body>
<script>
    function change(){
        var get_a = document.getElementsByTagName("a")[0];
        console.log(get_a);
        console.log(get_a.getAttribute("href"));	//获取属性
        get_a.setAttribute("href","https://www.sina.com");//设置属性
        get_a.href="https://www.sina.com";		//直接修改也可以
        get_a.innerText="新浪";
    }
    function select(){
        var get_div = document.getElementsByTagName("div")[0];
        console.log(get_div.className);
        //查看class名称
        console.log(get_div.classList);
        //查看class列表
        get_div.classList.add('div2');
        //增加class名称
        console.log(get_div.classList);
        get_div.classList.remove('div1');
        //删除class名称
    }
</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
<div>
    <input type="checkbox">1<input type="checkbox">2<input type="checkbox">3<br>
    <input type="checkbox">4<input type="checkbox">5<input type="checkbox">6<br>
    <input type="checkbox">7<input type="checkbox">8<input type="checkbox">9<br>
    <button onclick="selall()">全选</button>
    <button onclick="selresover()">反选</button>
    <button onclick="selclean()">取消</button>
</div>
<script>
    function selall(){
        var get_input = document.getElementsByTagName("input");
        for(var i=0;i<get_input.length;i++){
            get_input[i].checked=true;	//直接将所有的checked属性添加为true
        }
    }
    function selresover(){
        var get_input = document.getElementsByTagName("input");
        console.log(1)
        for(var i=0;i<get_input.length;i++){
            get_input[i].checked = !get_input[i].checked;	//将checked的实在为false
        }
    }
    function selclean(){
        var get_input = document.getElementsByTagName("input");
        for(var i=0;i<get_input.length;i++){
            get_input[i].checked=false;	//直接将所有checked属性添加为false
        }
    }
</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

<body>
<select id="prov">
    <option>省份</option>
</select>
<select id="city">
    <option>城市</option>
</select>
</body>
<script>
    var city={'江苏省':['南京市','淮安市','常州市'],'安徽省':['宣城市','芜湖市','黄山市'],'浙江省':['杭州市','宁波市']}
    // console.log(city);
    // console.log(city['江苏省'])
    var get_prov=document.getElementById("prov");
    for(var i in city){
        // console.log(i);
        var add_prov=document.createElement("option");
        add_prov.innerHTML=i;
        get_prov.appendChild(add_prov);
    }
    
    var get_city=document.getElementById("city");
    get_prov.onchange=function(){
        // console.log(this.options);          //获取options
        // console.log(this.selectedIndex);    //获取索引
        // console.log(this.options[this.selectedIndex]);   //根据索引获取options值
        var citys = city[this.options[this.selectedIndex].innerHTML];;
        get_city.options.length=1;				//需要重新设置长度，不然城市会持续增加
        for(var i=0;i<citys.length;i++){
            var add_city=document.createElement('option');
            add_city.innerHTML=citys[i];
            get_city.appendChild(add_city);
        }
    }
</script>
看完了?赏个鸡腿钱,谢谢老板!