JavaScript之DOM对象

DOM对象

一、概述

DOM是W3C(万维网联盟)的标准。DOM定义了访问HTML和XML文档的标准。

W3C文档对象模型(DOM)是中立于平台和预言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

W3C DOM标准被分为3个不同的部分：

核心DOM：针对任何结构化文档的标准模型；
XML DOM - 针对XML文档的标准模型(定义了所有XML元素的对象和属性，以及访问它们的方法)；
HTML DOM - 针对HTML文档的标准模型(定义了所有HTML元素的对象和属性，以及访问它们的方法)。

DOM节点：根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点(NODE)。

1 整个文档是一个文档节点(document对象)
2 每个HTML元素是元素节点(element对象)
3 HTML元素内的文本时文本节点(text对象)
4 每个HTML属性是属性节点(attribute对象)
5 注释是注释节点(comment对象)

NODE对象有自身属性和导航属性：

 1 节点(自身)属性：
 2     attribute-节点(元素)的属性节点
 3     nodeType-节点类型
 4     nodeValue-节点值
 5     nodeName-节点名称
 6     innerHTML-节点(元素)的文本值
 7 导航属性：
 8     parentNode-节点(元素)的父节点(推荐)
 9     parentElement-父节点标签元素
10     firstElementChild-第一个子标签元素
11     lastElementChild-最后一个子标签元素
12     children-所有子标签
13     nextElementSibling-下一个兄弟标签元素
14     previousElementSibling-上一个兄弟标签元素

非访问HTML元素(节点),访问HTML元素等同于访问节点，我们能够以不同的方式来访问HTML元素：

1 页面查找：
2     通过使用getElementById()方法
3     通过使用getElementsByTagName()方法
4     通过使用getElementsByClassName()方法
5     通过使用getElementsByName()方法
6 局部查找：
7     支持getElementsByTagName()方法、getElementsByClassName()方法
8     不支持getElementById()方法、getElementsByName()方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <div class="div1">
10     <p class="p1" name="littleP">hello p</p>
11     <div class="div2">hello div
12         <div class="div3">hhh</div>
13     </div>
14     <span>span</span>
15 </div>
16 
17 <script>
18 //    var ele=document.getElementsByClassName('p1')[0];
19 //    console.log(ele.nodeName);
20 //    console.log(ele.nodeType);
21 //    console.log(ele.nodeValue);
22 //    console.log(ele.innerHTML);
23 
24 //    var p_ele=ele.parentNode;
25 //    console.log(p_ele.nodeName);
26 //    var b_ele=ele.nextElementSibling
27 //    console.log(b_ele.nodeName)
28 
29     var ele1=document.getElementsByName('littleP')[0];
30     var ele2=ele1.nextElementSibling;
31     console.log(ele2.innerHTML);
32     console.log(ele2.innerText);
33 
34 
35     //局部查找
36     var ele3=document.getElementsByClassName('div1')[0];
37     var ele4=ele3.getElementsByTagName('span')[0];
38     console.log(ele4.innerText);
39 
40 
41 </script>
42 
43 </body>
44 </html>

举例

二、HTML DOM Event(事件)

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

 1 onclick：当用户点击某个对象时调用的事件句柄
 2 
 3 ondblclick：当用户双击某个对象时调用的事件句柄
 4 
 5 onfocus：元素获得焦点(输入框)
 6 
 7 onblur：元素失去焦点(用于表单验证，用户离开某个输入框时，代表已经输入完了，可以对它进行验证)
 8 
 9 onchange：域的内容被改变(用户表单元素，当元素内容被改变时触发)
10 
11 onkeydown：某个键盘按键被按下(当用户在最后一个输入框按下回车按键时，表单提交)
12 
13 onkeypress：某个键盘按键被按下并松开
14 
15 onkeyup：某个键盘按键被松开
16 
17 onmousedown：鼠标按钮被按下
18 
19 onmousemove：鼠标被移动
20 
21 onmouseout：鼠标从某元素移开
22 
23 onmouseover：鼠标移到某元素之上
24 
25 onmouseleave：鼠标从元素离开
26 
27 onselect：文本被选中
28 
29 onsubmit：确认按钮被点击

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <div class="v1">
10     <div class="v2">dddd</div>
11     <div class="v2">dddd</div>
12     <div class="v2">dddd</div>
13     <div class="v2">dddd</div>
14     <div class="v2">dddd</div>
15     <p id="p1" onclick="func(this)">pppppp</p>
16 </div>
17 
18 <script>
19 
20     function func(that){
21         console.log(that);
22         console.log(that.previousElementSibling);
23     }
24 
25     //绑定事件二
26 //    var ele=document.getElementById('p1');
27 //    ele.onclick=function(){
28 //        alert(123);
29 //    };
30 //
31 //    var ele2=document.getElementsByClassName('v2')
32 //    for (var i=0;i<ele2.length;i++){
33 //        ele2[i].onclick=function(){
34 //            alert(666);
35 //        }
36 //    }
37 </script>
38 
39 
40 </body>
41 </html>

事件绑定方法

onsubmit是当表单在提交时触发，该属性也只能给form元素使用，应用场景：在表单提交前验证用户输入是否正确，如果验证失败，在该方法中我们应该阻止表单的提交。

1 阻止表单提交方式一：onsubmit命名的事件函数，可以接受返回值，其中返回false表示拦截表单提交，其他为放行
2 阻止表单提交方式二：event.preventDefault();==>通知浏览器不要执行与事件关联的默认动作

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <form action="" id="form1">
10     <input type="text" name="username">
11     <input type="submit" value="提交">
12 </form>
13 
14 <script>
15     var ele=document.getElementById('form1');
16     ele.onsubmit=function(e){
17         //console.log('hello')
18         alert(1234)
19 
20         //阻止表单提交
21         //return false
22 
23         //e.preventDefault()
24     }
25 </script>
26 
27 </body>
28 </html>

onsubmit

Event对象：Event对象代表事件的状态，比如事件在其中发生的元素，键盘按键的状态，鼠标的位置，鼠标按钮的状态。事件通常与函数结合使用，函数不会再事件发生前被执行！Event对象在事件发生时系统已经创建好了，并且会在事件函数被调用时传给事件函数，我们仅仅需要接受一下即可。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .outer{
 8             width: 300px;
 9             height: 300px;
10             background-color: antiquewhite;
11         }
12 
13         .inner{
14             width: 100px;
15             height: 100px;
16             background-color: rebeccapurple;
17         }
18     </style>
19 
20 </head>
21 <body>
22 
23 <div class="outer" onclick="func2()">
24     <div class="inner" ></div>
25 </div>
26 
27 <script>
28     var ele=document.getElementsByClassName('inner')[0];
29     ele.onclick=function(e){
30         alert('I am inner');
31         //阻止事件传播
32         e.stopPropagation();
33     };
34 
35 
36     function func2(){
37         alert('I am outer')
38     }
39 </script>
40 </body>
41 </html>

事件传播

node的增删改查：

 1 增：
 2 createElement(name) 创建元素
 3 appendChild() 将元素添加
 4 
 5 删：
 6 1.获取待删除的元素
 7 2.获取它的父元素
 8 3.使用removeChild()方法删除
 9 
10 改：
11     第一种：用上面的增和删结果完成修改
12     第二种：
13                 a.使用setAttribute()；修改属性
14                 b.使用innerHTML属性修改元素的内容
15 
16 查：
17     a.通过使用 getElementById() 方法 
18     b.通过使用 getElementsByTagName() 方法 
19     c.通过使用 getElementsByClassName() 方法 
20     d.通过使用 getElementsByName() 方法

增删改查

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .div1,.div2,.div3,.div4{
 8             width: 300px;
 9             height: 100px;
10         }
11         .div1{
12             background-color: green;
13         }
14         .div2{
15             background-color: yellow;
16         }
17         .div3{
18             background-color: rebeccapurple;
19         }
20         .div4{
21             background-color: deeppink;
22         }
23     </style>
24 </head>
25 <body>
26 
27 <div class="div1">
28     <button onclick="add()">add</button>
29     hello div1
30 </div>
31 <div class="div2">
32     <button onclick="del()">del</button>
33     hello div2
34 </div>
35 <div class="div3">
36     <button onclick="change()">change</button>
37     <p>hello div3</p>
38 </div>
39 <div class="div4">hello div4</div>
40 
41 <script>
42 
43     function add(){
44         var ele=document.createElement('p');
45         ele.innerHTML='hello p';
46         var father=document.getElementsByClassName('div1')[0];
47         father.appendChild(ele);
48     }
49 
50     function del(){
51         var father=document.getElementsByClassName('div1')[0];
52         var sons=father.getElementsByTagName('p')[0];
53         father.removeChild(sons);
54     }
55 
56     function change(){
57         var img=document.createElement('img');
58         img.src='ct_rss.jpg';
59 //        img.setAttribute('src','ct_rss.jpg');
60         var ele=document.getElementsByTagName('p')[0];
61         var father=document.getElementsByClassName('div3')[0];
62         father.replaceChild(img,ele);
63 
64     }
65 
66 
67 
68 </script>
69 
70 </body>
71 </html>

举例

三、修改HTML DOM

 1 改变HTML内容
 2     innerHTML
 3     innerText
 4 改变CSS样式
 5     .style.color='blue'
 6     .style.fontSize=48px
 7 改变HTML属性
 8     elementNode.setAttribute(name,value)
 9     elementNode.getAttribute(name)<-->elementNode.value(DHTML)
10 创建新的HTML元素
11     createElement(name)
12 删除已有的HTML元素
13     elementNode.removeChild(node)
14 关于class的操作
15     elementNode.className
16     elementNode.classList.add
17     elementNode.classList.remove

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <div class="div1 div2"></div>
10 
11 <script>
12     var ele=document.getElementsByTagName('div')[0];
13     console.log(ele.className);
14     console.log(ele.classList[0]);
15     console.log(ele.classList[1]);
16     ele.classList.add('hide');
17     console.log(ele.className);
18 </script>
19 
20 </body>
21 </html>

class属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .content{
 8             height: 1800px;
 9             background-color: white;
10 
11         }
12         .shade{
13             position: fixed;
14             top:0;
15             left: 0;
16             right: 0;
17             bottom: 0;
18             background-color: gray;
19             opacity: 0.5;
20         }
21 
22         .model{
23             width: 200px;
24             height: 200px;
25             background-color: bisque;
26             position: absolute;
27             top: 50%;
28             left: 50%;
29             margin-top: -100px;
30             margin-left: -100px;
31 
32         }
33         .hide{
34             display: none;
35         }
36     </style>
37 </head>
38 <body>
39 
40 <div class="content">
41     <button onclick="show()">显示</button>
42 </div>
43 
44 <div class="shade hide"></div>
45 
46 <div class="model hide">
47     <button onclick="cancel()">取消</button>
48 </div>
49 
50 <script>
51     function show(){
52         var ele_share=document.getElementsByClassName('shade')[0];
53         var ele_model=document.getElementsByClassName('model')[0];
54         ele_model.classList.remove('hide');
55         ele_share.classList.remove('hide');
56     }
57     function cancel(){
58         var ele_share=document.getElementsByClassName('shade')[0];
59         var ele_model=document.getElementsByClassName('model')[0];
60         ele_model.classList.add('hide');
61         ele_share.classList.add('hide')
62     }
63 </script>
64 
65 </body>
66 </html>

模态对话框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <button onclick="selectAll()">全选</button>
10 <button onclick="Cancel()">取消</button>
11 <button onclick="reverse()">反选</button>
12 
13 <table>
14     <tr>
15         <td><input type="checkbox"></td>
16         <td>111</td>
17         <td>111</td>
18         <td>111</td>
19     </tr>
20     <tr>
21         <td><input type="checkbox"></td>
22         <td>222</td>
23         <td>222</td>
24         <td>222</td>
25     </tr>
26     <tr>
27         <td><input type="checkbox"></td>
28         <td>333</td>
29         <td>333</td>
30         <td>333</td>
31     </tr>
32 </table>
33 
34 <script>
35     function selectAll(){
36         var inputs=document.getElementsByTagName('input');
37         for (var i=0;i<inputs.length;i++){
38             input=inputs[i];
39             input.checked=true;
40         }
41     }
42     function Cancel(){
43         var inputs=document.getElementsByTagName('input');
44         for (var i=0;i<inputs.length;i++){
45             input=inputs[i];
46             input.checked=false;
47         }
48     }
49     function reverse(){
50         var inputs=document.getElementsByTagName('input');
51         for (var i=0;i<inputs.length;i++){
52             input=inputs[i];
53             if(input.checked){
54                 input.checked=false;
55 
56             }else{
57                 input.checked=true;
58             }
59         }
60     }
61 </script>
62 
63 </body>
64 </html>

正反选

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <select id="provinces">
10     <option value="">请选择省份</option>
11 
12 </select>
13 
14 <select name="" id="citys">
15     <option value="">请选择城市</option>
16 </select>
17 
18 <script>
19     data={"河北省":["石家庄","廊坊"],"福建省":["厦门","龙岩"],"山西省":["晋城","大同"]}
20     var pro_ele=document.getElementById('provinces');
21     var city_ele=document.getElementById('citys');
22     for(var i in data){
23         var ele=document.createElement('option');
24         ele.innerHTML=i;
25         pro_ele.appendChild(ele);
26     }
27 
28     pro_ele.onchange=function(){
29 
30         var city=data[this.options[this.selectedIndex].innerHTML];
31         city_ele.options.length=1;
32         for (var i=0;i<city.length;i++){
33             var ele=document.createElement('option');
34             ele.innerHTML=city[i];
35             city_ele.appendChild(ele);
36         }
37 
38     }
39 
40 </script>
41 
42 
43 </body>
44 </html>

二级联动

posted @ 2019-10-12 16:24 流浪代码阅读(205) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

千万野心

Having dreams is what makes life tolerable

JavaScript之DOM对象

公告