点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

关于DOM操作的实例分析

来源：动视网责编：小采时间：2020-11-27 20:19:50

关于DOM操作的实例分析

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

推荐度：

点击下载本文 文档为doc格式

导读关于DOM操作的实例分析:一、介绍文档对象模型Document Object ModelDOM是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法可以改变文档的内容和呈现方式。我们最为关心的是DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器而不是JavaScr

一、介绍

文档对象模型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='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(){}

六、示例

 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操作的实例分析

推荐度：

点击下载本文 文档为doc格式

标签：操作案例操作的

热门焦点

关于DOM操作的实例分析

关于DOM操作的实例分析

关于DOM操作的实例分析

最新推荐

猜你喜欢

热门推荐