文档对象模型（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 // 上一个兄弟节点
上面node包含所有文本
下面的只包含说哦有标签
parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
如果一个标签的nodeType等于1就说明这个标签里面没有文本内容
如果一个标签的nodeType等于3，就说明这个标签里面包含的有文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
123
<div class="c1">divvvvv</div>
<div class="c1" id="il">
<p>ppppp</p>
<div name="n1">
<span>span</span>
</div>
<div name="n1">
<a>1</a>
<a>11111</a>
</div>
</div>
<div class="c1">c111111111</div>
</div>
</body>
<script>
var li=document.getElementById("il");
var p1=li.parentNode;
var p2=li.parentElement;
//console.log(li)
//console.log(eles_nodes)
var elees_node= p1.childNodes; //含文本的所有标签
for(var j=0;j<elees_node.length;j++){
var current_node=elees_node[j];
if (current_node.nodeType==1){ //这里判断，输出current_node中不包含文本内容的标签
console.log(elees_node[j])
}
}
</script>
</html>
二、操作
1、内容
1 innerText 文本 2 outerText 3 innerHTML HTML内容 4 innerHTML 5 value 获取或者赋值表单标签中的值
下面例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="http://www.baidu.com">百度<span>666</span></a> <input id="txt" type="text"/> <select id="sel"> <option value="1">上海</option> <option value="2">北京</option> </select> <script> var obj=document.getElementsByTagName("a"); // alert(obj.innerTextr); //获取文本信息 // alert(obj.innerHTML); //获取标签内容 //获取表单中的值 var val=document.getElementById("txt").value; console.log(val); //更改值 obj.innerText='123'; obj.innerHTML="<p>123</p>" </script> </body> </html>
2、class操作
1 obj.className 以字符串形式获取样式 2 obj.classList 所有的样式放到列表中 3 obj.classList.remove 移除样式 4 obj.classList.add 添加样式
例子：实例模态多画框
点击取消又会回到上图一
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .c1{ 11 background-color: papayawhip; 12 position: fixed; 13 top: 0; 14 left: 0; 15 right: 0; 16 bottom: 0; 17 background: rgba(0,0,0,.4); 18 z-index: 2; 19 } 20 .c2{ 21 position: fixed; 22 400px; 23 height: 300px; 24 background-color: white; 25 top: 50%; 26 left: 50%; 27 margin-top: -150px; 28 margin-left: -200px; 29 z-index: 3; 30 } 31 32 </style> 33 </head> 34 <body> 35 <div> 36 <table> 37 <tr> 38 <td>注册</td> 39 <td>登录</td> 40 <td><input type="button" value="点我" onclick="show()"/></td> 41 </tr> 42 <tr> 43 <td>1</td> 44 <td>2</td> 45 <td><input type="button" value="点我"/></td> 46 </tr> 47 <tr> 48 <td>1</td> 49 <td>2</td> 50 <td><input type="button" value="点我"/></td> 51 </tr> 52 </table> 53 </div> 54 <div id="shade" class="c1 hide" ></div> 55 <div id="modal" class="c2 hide"> 56 <p>密码：<input type="text"/></p> 57 <p>密码：<input type="password"/></p> 58 <p> 59 <input type="button" value="确定"/> 60 <input type="button" value="取消" onclick="Hide()"/> 61 </p> 62 </div> 63 <script> 64 function show(){ 65 document.getElementById("shade").classList.remove("hide"); 66 document.getElementById("modal").classList.remove("hide"); 67 } 68 function Hide(){ 69 document.getElementById("shade").classList.add("hide"); 70 document.getElementById("modal").classList.add("hide"); 71 } 72 </script> 73 74 </body> 75 </html>