DOM操作

时间：2017-06-05 12:35:18 阅读：269 评论：0 收藏：0 [点我收藏+]

一、介绍

文档对象模型Document Object ModelDOM是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法可以改变文档的内容和呈现方式。我们最为关心的是DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器而不是JavaScript语言规范里的规定的核心内容。

二、查找元素

1.直接查找

1 document.getElementById         // 根据ID获取一个标签
2 document.getElementsByName      // 根据name属性获取标签集合
3 document.getElementsByClassName         // 根据class属性获取标签集合
4 document.getElementsByTagName           // 根据标签名获取标签集合

直接查找

2.间接查找

 1 parentNode          // 父节点
 2 childNodes          // 所有子节点
 3 firstChild          // 第一个子节点
 4 lastChild           // 最后一个子节点
 5 nextSibling         // 下一个兄弟节点
 6 previousSibling     // 上一个兄弟节点
 7   
 8 parentElement           // 父节点标签元素
 9 children                // 所有子标签
10 firstElementChild       // 第一个子标签元素
11 lastElementChild        // 最后一个子标签元素
12 nextElementtSibling     // 下一个兄弟标签元素
13 previousElementSibling  // 上一个兄弟标签元素

间接查找

三、操作元素

1.内容

1 innerText   // 文本
2 outerText  
3 innerHTML   // HTML内容
4 outerHTML
5 value       // 值

内容操作

2.属性

1 attributes                                      // 获取所有标签属性
2 setAttribute(key,value)                 // 设置标签属性
3 getAttribute(key)                          // 获取指定标签属性

属性操作

3.class操作

1 className               // 获取所有类名
2 classList.remove(cls)                   // 删除指定类
3 classList.add(cls)              // 添加类

class操作

4.标签操作

a.创建标签

1 // 方式一
2 var tag = document.createElement("a");
3 tag.innerText = "百度";
4 tag.className = "c1";
5 tag.href = "
6   
7 // 方式二
8 var tag = "<a class=‘c1‘ href=‘https//www.baidu.com‘>百度</a>"

创建标签

b.操作标签

 1 // 方式一
 2 function AddEle1() {
 3     //创建一个标签
 4     //将标签添加到i1里面
 5     var tag = "<p><input type=‘text‘></p>";
 6     //beforeBegin、afterBegin、beforeEnd、afterEnd
 7     document.getElementById("i1").insertAdjacentHTML("beforeEnd",tag);
 8 }
 9  
10 // 方式二
11 function AddEle2() {
12     //创建一个标签
13     //将标签添加到i1里面
14     var tag = document.createElement("input");
15     tag.setAttribute("type", "text");
16     tag.style.fontSize = "16px";
17     tag.style.color = "red";
18  
19     var p = document.createElement("p");
20     p.appendChild(tag);
21     document.getElementById("i1").appendChild(p);
22 }

操作标签

注意第一个参数只能是“beforeBegin”、"afterBegin"、"beforeEnd"、"afterEnd"

5.样式操作

1 var obj = document.getElementById("i1");
2 obj.style.fontSize = “32px”;
3 obj.style.backgroundColor = "red";

样式操作

6.位置操作

 1 总文档高度
 2 document.documentElement.offsetHeight
 3  
 4 当前文档占屏幕高度
 5 document.documentElement.clientHeight
 6  
 7 自身高度
 8 tag.offsetHeight
 9  
10 距离上级定位高度
11 tag.offsetTop
12  
13 父定位标签
14 tag.offsetParent
15  
16 滚动高度
17 tag.scrollTop

位置操作

7.提交表单

任何标签通过DOM都可以提交表单

1 document.getElementById("form").submit()

提交表单

8.其他操作

 1 console.log     输出框
 2 alert           弹出框
 3 confirm         确认框
 4  
 5 // url和刷新
 6 location.href           获取url
 7 location.href = "url" 重定向
 8 location.reload()       重新加载
 9  
10 // 定时器
11 setInterval                 多次定时器
12 clearInterval               清除多次定时器
13 setTimeout                  单次定时器
14 clearTimeout                清除单次定时器

其他操作

四、事件

技术分享

对于事件需要注意的要点

this

event

事件链以及跳出

this标签当前正在操作的标签event封装了当前事件的内容。

绑定事件方式

1.直接标签绑定 onclick="xxx()"

2.先获取Dom对象然后进行绑定

document.getElementById("xx").onclick

document.getElementById("xx").onfocus

this当前触发事件的标签

1.第一种绑定方式

function ClickOn(self){

// self 当前点击的标签

}

2.第二种绑定方式

document.getElementById("xx").onclick = function(){

// this 代指当前点击的标签

}

3.第三种绑定方式捕捉冒泡

addEventListener("click", function(){}, false)

addEventListener("click", function(){}, true)

五、JavaScript词法分析

1 function t1(age){:
2   console.log(age);
3   var age = 27;
4   console.log(age);
5   function age(){};
6   console.log(age);
7 }
8 t1(3);

函数在运行的瞬间生成一个活动对象Active Object简称AO

第一步分析参数

1.函数接收形式参数添加到AO的属性中并且这个时候值为undefined即AO.age=undefined

2.接收实参添加到AO的属性覆盖之前的undefined此时AO.age=3

第二步分析变量声明

1.如何上一步分析参数中AO还没有age属性则添加AO属性为undefined即AO.age=undefined

2.如果AO上面已经有age属性了则不作任何修改AO.age=3

第三部分析函数声明

如果有function age(){}把函数赋值给AO.age覆盖上一步分析的值

结果应该是

function age(){}

六、示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8     <div id="i1">欢迎xxx莅临指导</div>
 9     <script>
10         function func() {
11             // 根据ID获取标签内容
12             var tag = document.getElementById("i1");
13             // 获取标签内部的内容
14             var content = tag.innerText;
15             // 获取字符串第一个字符
16             var f = content.charAt(0);
17             // 获取字符串第二至末尾的全部字符
18             var l = content.substring(1, content.length);
19             // 拼接新的标签内容
20             var new_content = l + f;
21             // 修改标签内部的内容
22             tag.innerText = new_content;
23         }
24         // 设置计时器
25         setInterval("func()", 500);
26     </script>
27 </body>
28 </html>

跑马灯

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10         .c1{
11             position: fixed;
12             top: 0;
13             right: 0;
14             bottom: 0;
15             left: 0;
16             background-color: #000000;
17             opacity: 0.5;
18             z-index: 9;
19         }
20         .c2{
21             width: 500px;
22             height: 400px;
23             background-color: #ffffff;
24             position: fixed;
25             top: 50%;
26             left: 50%;
27             margin-top: -200px;
28             margin-left: -250px;
29             z-index: 10;
30         }
31     </style>
32 </head>
33 <body>
34     <div>
35         <input id="o1" type="button" value="添加"/>
36         <table>
37             <thead>
38                 <tr>
39                     <th>主机名</th>
40                     <th>端口</th>
41                 </tr>
42             </thead>
43             <tbody>
44                 <tr>
45                     <td>1.1.1.1</td>
46                     <td>190</td>
47                 </tr>
48                 <tr>
49                     <td>1.1.1.2</td>
50                     <td>192</td>
51                 </tr>
52                 <tr>
53                     <td>1.1.1.3</td>
54                     <td>193</td>
55                 </tr>
56             </tbody>
57         </table>
58     </div>
59     <!-- 遮罩层开始 -->
60     <div id="i1" class="c1 hide"></div>
61     <!-- 遮罩层结束 -->
62  
63     <!-- 弹出窗开始 -->
64     <div id="i2" class="c2 hide">
65         <p><input type="text"/></p>
66         <p><input type="text"/></p>
67         <p><input type="button" value="确认"/></p>
68         <p><input id="o2" type="button" value="取消"/></p>
69     </div>
70     <!-- 弹出窗结束 -->
71     <script>
72         document.getElementById("o1").onclick = function () {
73             document.getElementById("i1").classList.remove("hide");
74             document.getElementById("i2").classList.remove("hide");
75         }
76         document.getElementById("o2").onclick = function () {
77             document.getElementById("i1").classList.add("hide");
78             document.getElementById("i2").classList.add("hide");
79         }
80     </script>
81 </body>
82 </html>

模态对话框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6  
 7 </head>
 8 <body>
 9     <div>
10         <input id="i1" type="button" value="全选"/>
11         <input id="i2" type="button" value="取消"/>
12         <input id="i3" type="button" value="反选"/>
13         <table>
14             <thead>
15                 <tr>
16                     <th>选择</th>
17                     <th>主机名</th>
18                     <th>端口</th>
19                 </tr>
20             </thead>
21             <tbody id="tb">
22                 <tr>
23                     <td><input type="checkbox"/></td>
24                     <td>1.1.1.1</td>
25                     <td>190</td>
26                 </tr>
27                 <tr>
28                     <td><input type="checkbox"/></td>
29                     <td>1.1.1.2</td>
30                     <td>192</td>
31                 </tr>
32                 <tr>
33                     <td><input type="checkbox"/></td>
34                     <td>1.1.1.3</td>
35                     <td>193</td>
36                 </tr>
37             </tbody>
38         </table>
39     </div>
40     <script>
41         document.getElementById("i1").onclick = function () {
42             var tb = document.getElementById("tb");
43             var tr_list = tb.children;
44             for(var i=0;i<tr_list.length;i++){
45                 var current_tr = tr_list[i];
46                 var checkbox = current_tr.children[0].children[0];
47                 checkbox.checked = true;
48             }
49         };
50         document.getElementById("i2").onclick = function () {
51             var tb = document.getElementById("tb");
52     &bsp;       var tr_list = tb.children;
53             for(var i=0;i<tr_list.length;i++){
54                 var current_tr = tr_list[i];
55                 var checkbox = current_tr.children[0].children[0];
56                 checkbox.checked = false;
57             }
58         };
59         document.getElementById("i3").onclick = function () {
60             var tb = document.getElementById("tb");
61             var tr_list = tb.children;
62             for(var i=0;i<tr_list.length;i++){
63                 var current_tr = tr_list[i];
64                 var checkbox = current_tr.children[0].children[0];
65                 if(checkbox.checked) {
66                     checkbox.checked = false;
67                 }else{
68                     checkbox.checked = true;
69                 }
70             }
71         };
72     </script>
73 </body>
74 </html>

全选、反选、取消

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .hide{
 8             displa: none;
 9         }
10         .item .header{
11             height: 35px;
12             background-color: #2459a2;
13             color: #ffffff;
14             line-height: 35px;
15         }
16     </style>
17 </head>
18 <body>
19     <div style="width: 300px">
20         <div class="item">
21             <div id="i1" class="header" onclick="ChangeMenu(‘i1‘)">菜单1</div>
22             <div class="content">
23                 <div>内容1</div>
24                 <div>内容1</div>
25           &;bsp;     <div>内容1</div>
26             </div>
27         </div>
28         <div class="item">
29             <div id="i2" class="header" onclick="ChangeMenu(‘i2‘)">菜单2</div>
30             <div class="content hide">
31                 <div>内容2</div>
32                 <div>内容2</div>
33                 <div>内容2</div>
34             </div>
35         </div>
36         <div class="item">
37             <div id="i3" class="header" onclick="ChangeMenu(‘i3‘)">菜单3</div>
38             <div class="content hide">
39                 <div>内容3</div>
40                 <div>内容3</div>
41                 <div>内容3</div>
42             </div>
43         </div>
44         <div class="item">
45             <div id="i4" class="header" onclick="ChangeMenu(‘i4‘)">菜单4</div>
46             <div class="content hide">
47                 <div>内容4</div>
48                 <div>内容4</div>
49                 <div>内容4</div>
50             </div>
51         </div>
52     </div>
53     <script>
54         function ChangeMenu(nid) {
55             var current_header = document.getElementById(nid);
56             var item_list = current_header.parentElement.parentElement.children;
57             for(var i=0;i<item_list.length;i++){
58                 var current_item = item_list[i];
59                 current_item.children[1].classList.add("hide");
60             }
61             current_header.nextElementSibling.classList.remove("hide");
62         };
63     </script>
64 </body>
65 </html>

左侧菜单

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10         .item .header{
11             height: 35px;
12             background-color: #2459a2;
13             color: #ffffff;
14             line-height: 35px;
15         }
16     </style>
17 </head>
18 <body>
19     <div style="width: 600px;margin: 0 auto">
20         <input id="i1" type="text" value="请输入关键字"/>
21         <input type="text" placeholder="请输入关键字" />
22     </div>
23     <script>
24         document.getElementById("i1").onfocus = function () {
25             var val = this.value;
26             if(val == "请输入关键字"){
27                 this.value = "";
28             }
29         }
30         document.getElementById("i1").onblur = function () {
31             var val = this.value;
32             if(val == ""){
33                 this.value = "请输入关键字";
34             }
35         }
36     </script>
37 </body>
38 </html>

搜索框

DOM操作

标签：计时兄弟节点 images 身高自身 dev text city doc

原文地址：http://www.cnblogs.com/qiang8216/p/6944034.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行