关于DOM操作的实例分析
一、介绍
文档对象模型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) // 添加类
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.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(){}
27
27
六、示例
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操作的实例分析的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
PyCharm使用教程：详细指引你运行操作
Feb 26, 2024 pm 05:51 PM
PyCharm是一款非常流行的Python集成开发环境（IDE），它提供了丰富的功能和工具，使得Python开发变得更加高效和便捷。本文将为大家介绍PyCharm的基本操作方法，并提供具体的代码示例，帮助读者快速入门并熟练操作该工具。1.下载和安装PyCharm首先，我们需要前往PyCharm官网（https://www.jetbrains.com/pyc
什么是 sudo，为什么它如此重要？
Feb 21, 2024 pm 07:01 PM
sudo（超级用户执行）是Linux和Unix系统中的一个关键命令，允许普通用户以root权限运行特定命令。sudo的功能主要体现在以下几个方面：提供权限控制：sudo通过授权用户以临时方式获取超级用户权限，从而实现了对系统资源和敏感操作的严格控制。普通用户只能在需要时通过sudo获得临时的特权，而不需要一直以超级用户身份登录。提升安全性：通过使用sudo，可以避免在常规操作中使用root账户。使用root账户进行所有操作可能会导致意外的系统损坏，因为任何错误或不小心的操作都将具有完全的权限。而
Linux Deploy的操作步骤及注意事项
Mar 14, 2024 pm 03:03 PM
LinuxDeploy的操作步骤及注意事项LinuxDeploy是一款强大的工具，可以帮助用户在Android设备上快速部署各种Linux发行版，让用户能够在移动设备上体验到完整的Linux系统。本文将详细介绍LinuxDeploy的操作步骤以及注意事项，同时提供具体的代码示例，帮助读者更好地使用这一工具。操作步骤：安装LinuxDeploy：首先在
win10开机密码忘记按F2怎么操作
Feb 28, 2024 am 08:31 AM
想必很多的用户家里都有那么几台不用的电脑，因为长时间不用完全忘记了开机密码，于是想要知道一下，忘记密码要怎么操作呢？那就一起来看看吧。win10开机密码忘记按F2怎么操作1、按下电脑的电源键，然后开机时按下F2（不同电脑品牌进入bios的按键也不同）。2、在bios界面中，找到security选项（不同品牌电脑的位置可能有所不同）。一般都在顶部的设置菜单中。3、然后找到SupervisorPassword选项并且点击。4、这时候用户就可以看到自己的密码了，同时找到旁边的Enabled切换为Dis
如何在 iPhone 15 Pro 和 15 Pro Max 上禁用操作按钮
Nov 07, 2023 am 11:17 AM
Apple在iPhone15Pro和15ProMax中带来了一些Pro独有的硬件功能，吸引了所有人的注意力。我们正在谈论钛合金框架、时尚的设计、全新的A17Pro芯片组、令人兴奋的5倍长焦镜头等等。在iPhone15Pro机型添加的所有花里胡哨的功能中，操作按钮仍然是一个突出和突出的功能。毋庸置疑，它是在iPhone上启动操作的有用补充。也就是说，您可能会不小心按住“操作”按钮并无意中触发功能。坦率地说，这很烦人。要避免这种情况，您应该禁用iPhone15Pro和15ProMax上的操作按钮。让
华为Mate60 Pro截屏操作步骤分享
Mar 23, 2024 am 11:15 AM
随着智能手机的普及，截屏功能成为日常使用手机的必备技能之一。华为Mate60Pro作为华为公司的旗舰手机之一，其截屏功能自然也备受用户关注。今天，我们就来分享华为Mate60Pro手机的截屏操作步骤，让大家能够更加便捷地进行截屏操作。首先，华为Mate60Pro手机提供了多种截屏方式，可以根据个人习惯选择适合自己的方式进行操作。下面详细介绍几种常用的截
CSS网页滚动监听：监听网页滚动事件并执行相应的操作
Nov 18, 2023 am 10:35 AM
CSS网页滚动监听：监听网页滚动事件并执行相应的操作随着前端技术的不断发展，网页的效果和交互也越来越丰富多样。其中，滚动监听是一种常见的技术，可以实现在用户滚动网页时，根据滚动位置执行一些特效或者操作。一般来说，滚动监听可以通过JavaScript来实现。但是，在某些情况下，我们也可以通过纯CSS来实现滚动监听的效果。本文将介绍如何通过CSS来实现网页的滚动
自定义操作按钮：探索iPhone 15 Pro的个性化设置
Sep 24, 2023 pm 03:05 PM
苹果的iPhone15Pro和iPhone15ProMax引入了一个新的可编程动作按钮，取代了音量按钮上方的传统响铃/静音开关。继续阅读以了解“操作”按钮的功能，以及如何对其进行自定义。苹果iPhone15Pro型号上全新的动作按钮取代了激活Ring和Silent的传统iPhone开关。默认情况下，新按钮仍会通过长按激活这两个功能，但您也可以让长按执行一系列其他功能，包括快速访问相机或手电筒、激活语音备忘录、对焦模式、翻译和放大镜等辅助功能。您还可以将其与单个快捷方式相关联，从而开辟大量其他可能
