DOM
Posted 张文强的园子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM相关的知识，希望对你有一定的参考价值。
文档对象模型（Document Object Model，DOM）是一种用于html和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是javascript语言规范里的规定的核心内容。
一、查找元素
1、直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
2、间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
二、操作
1、内容
innerText 文本
outerText
innerHTML HTML内容
innerHTML
value 值
2、属性
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById(\'n1\').setAttributeNode(atr);
*/
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="全选" onclick="CheckAll();"/> 9 <input type="button" value="取消" onclick="CancelAll();"/> 10 <input type="button" value="反选" onclick="ReverseCheck();"/> 11 12 <table border="1" > 13 <thead> 14 15 </thead> 16 <tbody id="tb"> 17 <tr> 18 <td><input type="checkbox" /></td> 19 <td>111</td> 20 <td>222</td> 21 </tr> 22 <tr> 23 <td><input type="checkbox" /></td> 24 <td>111</td> 25 <td>222</td> 26 </tr> 27 <tr> 28 <td><input type="checkbox" /></td> 29 <td>111</td> 30 <td>222</td> 31 </tr> 32 <tr> 33 <td><input type="checkbox" /></td> 34 <td>111</td> 35 <td>222</td> 36 </tr> 37 </tbody> 38 </table> 39 <script> 40 function CheckAll(ths){ 41 var tb = document.getElementById(\'tb\'); 42 var trs = tb.childNodes; 43 for(var i =0; i<trs.length; i++){ 44 45 var current_tr = trs[i]; 46 if(current_tr.nodeType==1){ 47 var inp = current_tr.firstElementChild.getElementsByTagName(\'input\')[0]; 48 inp.checked = true; 49 } 50 } 51 } 52 53 function CancelAll(ths){ 54 var tb = document.getElementById(\'tb\'); 55 var trs = tb.childNodes; 56 for(var i =0; i<trs.length; i++){ 57 58 var current_tr = trs[i]; 59 if(current_tr.nodeType==1){ 60 var inp = current_tr.firstElementChild.getElementsByTagName(\'input\')[0]; 61 inp.checked = false; 62 } 63 } 64 } 65 66 function ReverseCheck(ths){ 67 var tb = document.getElementById(\'tb\'); 68 var trs = tb.childNodes; 69 for(var i =0; i<trs.length; i++){ 70 var current_tr = trs[i]; 71 if(current_tr.nodeType==1){ 72 var inp = current_tr.firstElementChild.getElementsByTagName(\'input\')[0]; 73 if(inp.checked){ 74 inp.checked = false; 75 }else{ 76 inp.checked = true; 77 } 78 } 79 } 80 } 81 82 </script> 83 </body> 84 </html>
3、class操作
className // 获取所有类名
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类
4、标签操作
a.创建标签
// 方式一 var tag = document.createElement(\'a\') tag.innerText = "wupeiqi" tag.className = "c1" tag.href = "http://www.cnblogs.com/wupeiqi" // 方式二 var tag = "<a class=\'c1\' href=\'http://www.cnblogs.com/wupeiqi\'>wupeiqi</a>"
b.操作标签
// 方式一 var obj = "<input type=\'text\' />"; xxx.insertAdjacentHTML("beforeEnd",obj); xxx.insertAdjacentElement(\'afterBegin\',document.createElement(\'p\')) //注意：第一个参数只能是\'beforeBegin\'、 \'afterBegin\'、 \'beforeEnd\'、 \'afterEnd\' // 方式二 var tag = document.createElement(\'a\') xxx.appendChild(tag) xxx.insertBefore(tag,xxx[1])
5、样式操作
var obj = document.getElementById(\'i1\')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
1 <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" /> 2 3 <script> 4 function Focus(ths){ 5 ths.style.color = "black"; 6 if(ths.value == \'请输入关键字\' || ths.value.trim() == ""){ 7 8 ths.value = ""; 9 } 10 } 11 12 function Blur(ths){ 13 if(ths.value.trim() == ""){ 14 ths.value = \'请输入关键字\'; 15 ths.style.color = \'gray\'; 16 }else{ 17 ths.style.color = "black"; 18 } 19 } 20 </script>
6、位置操作
总文档高度
document.documentElement.offsetHeight
当前文档占屏幕高度
document.documentElement.clientHeight
自身高度
tag.offsetHeight
距离上级定位高度
tag.offsetTop
父定位标签
tag.offsetParent
滚动高度
tag.scrollTop
/*
clientHeight -> 可见区域：height + padding
clientTop -> border高度
offsetHeight -> 可见区域：height + padding + border
offsetTop -> 上级定位标签的高度
scrollHeight -> 全文高：height + padding
scrollTop -> 滚动高度
特别的：
document.documentElement代指文档根节点
*/
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body style="margin: 0;"> 8 <div style="height: 900px;"> 9 10 </div> 11 <div style="padding: 10px;"> 12 <div id="i1" style="height:190px;padding: 2px;border: 1px solid red;margin: 8px;"> 13 <p>asdf</p> 14 <p>asdf</p> 15 <p>asdf</p> 16 <p>asdf</p> 17 <p>asdf</p> 18 </div> 19 </div> 20 21 <script> 22 var i1 = document.getElementById(\'i1\'); 23 24 console.log(i1.clientHeight); // 可见区域：height + padding 25 console.log(i1.clientTop); // border高度 26 console.log(\'=====\'); 27 console.log(i1.offsetHeight); // 可见区域：height + padding + border 28 console.log(i1.offsetTop); // 上级定位标签的高度 29 console.log(\'=====\'); 30 console.log(i1.scrollHeight); //全文高：height + padding 31 console.log(i1.scrollTop); // 滚动高度 32 console.log(\'=====\'); 33 34 </script> 35 </body> 36 </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> body{ margin: 0px; } img { border: 0; } ul{ padding: 0; margin: 0; list-style: none; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrap{ width: 980px; margin: 0 auto; } .pg-header{ background-color: #303a40; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2); }JavaScript单行代码，也就是代码片段