关于DOM操作的实例分析-js教程-PHP中文网

首页

web前端

js教程

关于DOM操作的实例分析

零下一度

Jun 26, 2017 pm 01:38 PM

操作

一、介绍

文档对象模型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 outerHTML5 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=&#39;c1&#39; href=&#39;https//www.baidu.com&#39;>百度</a>"

创建标签

b.操作标签

 1 // 方式一 2 function AddEle1() { 3     //创建一个标签 4     //将标签添加到i1里面 5     var tag = "<p><input type=&#39;text&#39;></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.offsetTop12  13 父定位标签14 tag.offsetParent15  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(&#39;i1&#39;)">菜单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(&#39;i2&#39;)">菜单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(&#39;i3&#39;)">菜单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(&#39;i4&#39;)">菜单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操作的实例分析的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript的角色：使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心，因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容，2)通过DOMAPI操作网页，3)支持复杂的交互效果如动画和拖放，4)优化性能和最佳实践提高用户体验。

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。