首页 > 代码库 > DOM操作
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 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) // 添加类
4.标签操作
a.创建标签
1 // 方式一 2 var tag = document.createElement("a"); 3 tag.innerText = "百度"; 4 tag.className = "c1"; 5 tag.href = "http://www.mamicode.com/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 = "http://www.mamicode.com/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.第一种绑定方式
<input type="button" />
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操作
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。