文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
1、直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
注：以后设置id，不能以数字开头并且与其他id不能重复，不然会找错
示例：
<div> <div class="c1">cla1</div> <div class="c1" id="i1"> <div name="n1">n1</div> <div name="n1"> <a>a1</a> <a>a2</a> </div> </div> <div class="c1">cla3</div> </div>
这里直接在终端浏览器上进行演示，演示效果图：
我们找到的分为两类，一类是元素，一类是元素集合。其他的直接查找也是通过这种方法来找，这里就不一一演示了。
2、间接查找
包含文本和标签： parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 只包含标签： parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
示例1：
<div> 123 <div class="c1">cla1</div> <div class="c1" id="i1"> <p>pppppp</p> <div name="n1"> <span>span</span> </div> <div name="n1"> <a>a1</a> <a>a2</a> </div> </div> <div class="c1">cla3</div> </div>
效果演示图:
效果演示图2:
如果nodeType=3，就是文本，如果nodeType=1，就是标签。
示例2：
<div> <div class="c1">cla1</div> <div class="c1" id="i1"> <p>pppppp</p> <div name="n1"> <span>span</span> </div> <div name="n1"> <a>a1</a> <a>a2</a> </div> </div> <div class="c1">cla3</div> </div>
效果演示图：
实例：只获取标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> 123 <div class="c1">asdf</div> <div class="c1" id="i1"> <p>p</p> <div name="n1"> <span>n1</span> </div> <div name="n2"> <a>a1</a> <a>a11111</a> </div> </div> <div class="c1">casdf</div> </div> <script> var i1 = document.getElementById("i1");//id为i1的标签 var p1_text = i1.parentNode;//含文本，也有标签 var p1 = i1.parentElement;//不含文本，只有标签 var eles_node = p1_text.childNodes //含文本和所有标签 for(var j=0;j<eles_node.length;j++){ var current_node = eles_node[j]; if(current_node.nodeType == 1){//nodeType==1是标签，nodeType>1是文本 console.log(eles_node[j]) } } var eles = p1.children;//不含文本所有标签 for(var i=0;i<eles.length;i++){ console.log(eles[i]) } </script> </body> </html>
结果：
二、操作
1、内容
1 innerText 文本 2 outerText 3 innerHTML HTML内容 4 outerHTML 5 value 值
示例：
<body> <a href="http://www.baidu.com">hello<span>world</span></a> <script> var obj = document.getElementsByTagName("a")[0]; alert(obj.innerText); alert(obj.innerHTML); </script> </body>
Text效果演示图：
Html效果演示图：
如果要赋值：
<body> <a href="http://www.baidu.com">百度<span>ok</span></a> <input id="txt" type="text"/> <select id="sel"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> </select> <script> var obj =document.getElementsByTagName("a")[0]; obj.innerText = "123"//赋值 obj.innerHTML = "<p>333</p>"//赋值 </script> </body>
value：可以获取值，也可以设置值。
<input id="txt" type="text"> <select id="sel"> <option value="1">上海</option> <option value="2">北京</option> </select>
效果演示图：
1、文本为空时取值：
2、文本有值时取值：
3、赋值：
获取例子中表单里面的值：
1、
2、
value可操作的标签：input:text、checkbox、radio、password、select、textarea
其他实例：
复选框操作：checked=true：选中；checked=false：未选中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>好吃的</h1> <div id="i1"> <ul> <li><input type="checkbox" value="1">芒果</li> <li><input type="checkbox" value="2">桂圆</li> <li><input type="checkbox" value="3">提子</li> </ul> </div> <div id="i2"> <ul> <li><input type="checkbox" value="11">火锅</li> <li><input type="checkbox" value="22">冒菜</li> <li><input type="checkbox" value="33">串串</li> </ul> </div> </body> </html>
效果演示图：
实例：全选、取消、反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选、取消、反选</title> </head> <body> <h1>今天你想吃什么</h1> <div> <input type="button" value="全选" onclick="CheckAll();"/> <input type="button" value="取消" onclick="CancleAll();"/> <input type="button" value="反选" onclick="ReverseAll();"/> </div> <table> <thead> <tr> <th>序号</th> <th>菜名</th> <th>价格</th> </tr> </thead> <tbody id="tb"> <tr> <td><input class="c1" type="checkbox"/></td> <td>火锅</td> <th>188</th> </tr> <tr> <td><input class="c1" type="checkbox"/></td> <td>冒菜</td> <th>68</th> </tr> <tr> <td><input class="c1" type="checkbox"/></td> <td>烧烤</td> <th>88</th> </tr> </tbody> </table> <script> function CheckAll() {//全选 var tb = document.getElementById("tb"); var checks = tb.getElementsByClassName("c1"); for(var i=0;i<checks.length;i++){ var current_check = checks[i]; current_check.checked = true; } } function CancleAll() {//取消 var tb = document.getElementById("tb"); var checks = tb.getElementsByClassName("c1"); for(var i=0;i<checks.length;i++){ var current_check = checks[i]; current_check.checked = false; } } function ReverseAll() {//反选 var tb = document.getElementById("tb"); var checks = tb.getElementsByClassName("c1"); for(var i=0;i<checks.length;i++){ var current_check =checks[i]; if(current_check.checked){//如果选中，就是true current_check.checked = false;//将选中的变为false }else{//如果没有选中，就是false current_check.checked = true;//将没有选中的变为true } } } </script> </body> </html>