DOM是Document Object Model的缩写，即文档对象模型，是基于文档编程的一套API接口，1998年，W3C发布了一级的DOM规范，这个规范允许访问和操作HTML页面中的每个单独远古三，如网页的表格、图片、文本、表单元素等。
DOM 定义了访问文档的标准： “W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
Core DOM - 所有文档类型的标准模型XML DOM - XML 文档的标准模型HTML DOM - HTML 文档的标准模型小结：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
DOM是以树状结构组织的HTML文档，根据DOM概念，我们可以知道，HTML文档中每个标签或元素都是一个节点，在DOM中是这样规定的：
整个文档是一个文档节点每个HTML标签是一个元素节点包含在HTML元素中的文本是文本节点每个HTML属性是一个属性节点注释属于注释节点HTML DOM 模型被结构化为对象树： 使用父(parent)、子(child)和同胞(sibling)等术语来描述这些节点的层次关系，父节点拥有子节点，同级的子节点被称为同胞或兄弟节点，关系如下：
在节点树中，顶部节点被称为根(root)，如<html>节点
每个节点都有父节点，除了根（它没有父节点），如<head>和<body>的父节点都是<html>
一个节点可以拥有任意数量的子节点，如<body>节点的子节点有<a>，<h1>。
同胞节点是拥有相同父节点的节点，如<a>和<h1>就是兄弟节点，它们的父节点均为<body>节点
通过 id 找到 HTML 元素 document.getElementById(“dv”) 它是document对象特有的函数。该方法返回一个有着给定id属性值的元素节点对应的对象。
通过 name属性找到 HTML 元素document.getElementsByName(“btn”) 方法可返回带有指定名称的对象的集合
通过标签名找到 HTML 元素 getElementsByTagName(“input”); 可返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。 该方法也只有一个参数，该参数是标签的名字。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function changeContent(){ var spn = document.getElementById("sp"); spn.innerHTML = "SS"; } function getHobbies(){ var hb = document.getElementsByName("hobby"); for(var i = 0; i<hb.length; i++){ if(hb[i].checked){ alert(hb[i].value); } } } function getValues(){ var inputs = document.getElementsByTagName("input"); for(var i = 0;i<inputs.length;i++){ document.getElementById("dv").innerHTML += inputs[i].value; } } </script> </head> <body> <span id="sp">国王</span> <input type="button" value="点击换内容" onclick="changeContent()" /> <input type="checkbox" name="hobby" value="paly" />玩游戏 <input type="checkbox" name="hobby" value="read" />读小说 <input type="checkbox" name="hobby" value="swim" />去游泳 <input type="button" name="btn" value="点击 " onclick="getHobbies()"/> <input type="button" name="btn" value="通过input标签获取值" onclick="getValues()"/> <div id="dv"></div> </body> </html>1）nodeName(节点名称)
元素节点 nodeName 是标签名 属性节点 nodeName 是属性名称 文本节点 nodeName 永远都是#text 文档节点 nodeName 永远都是#document
2）nodeValue(节点值)
对于文本节点 nodeValue 显示文本内容 对于属性节点 nodeValue 显示属性值 nodeValue 对于文档节点和元素节点不可用的
3）nodeType(节点类型) nodeType属性可返回节点的类型，是一个只读属性，如返回的是元素节点、文本节点、注释节点等。
元素 1 属性 2 文本 3 注释 8 文档 9
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>节点信息</title> </head> <body> <ul id="nodeList"><li>nodeName</li><li>nodeValue</li><li>nodeType</li></ul><p></p> <script> var nodes=document.getElementById("nodeList"); var type1=nodes.firstChild.nodeType; var type2=nodes.firstChild.firstChild.nodeType; var name1=nodes.firstChild.firstChild.nodeName; var str=nodes.firstChild.firstChild.nodeValue; var con="type1："+type1+"<br/>type2："+type2+"<br/>name1："+name1+"<br/>str："+str; document.getElementById("nodeList").nextSibling.innerHTML=con; </script> </body> </html>4）属性(查找节点)
firstChild 第一个儿子lastChild 最后一个儿子childNodes 所有子节点(集合)children 所有子元素的集合(不显示其他节点)parentNode 父节点nextSibling 下一个兄弟节点previousSibling 上一个兄弟节点 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>访问节点</title> <style> body,ul,li,div,section,header{margin: 0;padding: 0;} ul,li{list-style: none;} body{ font-family: "微软雅黑"; font-size: 12px; line-height: 28px; } #news{ border: 1px solid #cccccc; width: 280px; overflow: hidden; margin: 5px auto 0 auto; } #news header{ border-bottom: 1px solid #cccccc; font-size: 16px; line-height: 40px; padding-left:15px; color: #666666; font-weight: bold; } #news header a{text-decoration: none; color: #666666; float: right; padding-right: 10px; font-size: 12px;} #news ul li{padding-left: 10px;} #news ul li a{color: #686868; text-decoration: none; display: inline-block;} #news ul li a:hover{color: #b02f4a;} </style> </head> <body> <section id="news"> <header>京东快报<a href="#">更多 ></a></header> <ul> <li><a href="#">志玲姐姐：墨镜300减30</a></li> <li><a href="#">京东无锡馆正式启动</a></li> <li><a href="#">99元抢平板！品牌配件199-100</a></li> <li><a href="#">节能领跑京东先行</a></li> <li><a href="#">高洁丝实力撩货，领券五折</a></li> </ul> </section> <script> var obj=document.getElementById("news"); var str=obj.lastChild.firstChild.nextSibling.nextSibling.innerHTML; var str=obj.lastChild.lastChild.previousSibling.previousSibling.innerHTML; var str=obj.lastElementChild.firstElementChild.innerHTML||obj.lastChild.firstChild.innerHTML; // var str =obj.children[1].children[2].innerHTML; alert(str); </script> </body> </html>5）方法操作(添加 修改 删除)
1、创建节点
document.createElement(‘要创建的标签名’)
2、添加节点
添加到最后appendChild parent.appendChild(son);
添加到某个位置insertBefore parent.insertBefore(son,position)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>选择你喜欢的书</title> <style> *{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;} div{padding: 5px; text-align: center; } div span{display: block;} </style> </head> <body> <p>选择你喜欢的书：<input type="radio" name="book" onclick="book()">我和狗狗一起活下来 <input type="radio" name="book" onclick="book()">灰霾来了怎么办</p> <div></div> <script> function book(){ var ele=document.getElementsByName("book"); var bName=document.getElementsByTagName("div")[0]; if(ele[0].checked){ var img=document.createElement("img"); img.setAttribute("src","images/dog.jpg"); img.setAttribute("alt","我和狗狗一起活下来"); bName.appendChild(img); } else if(ele[1].checked){ var img=document.createElement("img"); img.setAttribute("src","images/mai.jpg"); img.setAttribute("alt","灰霾来了怎么办"); img.setAttribute("onclick","copyNode()") bName.appendChild(img); } } function copyNode(){ var bName=document.getElementsByTagName("div")[0]; var copy=bName.lastChild.cloneNode(false); bName.insertBefore(copy,bName.firstChild); } </script> </body> </html>3、克隆
new = old.cloneNode();
如果我们传递一个参数参数值为true 表示携带子元素一起克隆
4、设置、获取值 getAttribute（“属性名”）：用来获取属性的值
setAttribute（“属性名”，“属性值”）：用来设置属性的值
5、删除子节点
parent.removeChild(son)
6、删除自己节点
son.parentNode.removeChild(son)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>删除和替换节点</title> <style> *{padding: 0; margin: 0; font-size: 12px;} ul,li{list-style: none;} li{float: left; text-align: center; width: 140px;} </style> </head> <body> <ul> <li> <img src="images/f01.jpg" id="first"> <p><input type="button" value="删除我吧" onclick="del()"></p> </li> <li> <img src="images/f02.jpg" id="second"> <p><input type="button" value="换换我吧" onclick="rep()"></p> </li> </ul> <script> function del(){ var delNode=document.getElementById("first"); delNode.parentNode.removeChild(delNode); } function rep(){ var oldNode=document.getElementById("second"); var newNode=document.createElement("img"); newNode.setAttribute("src","images/f03.jpg"); oldNode.parentNode.replaceChild(newNode,oldNode); } </script> </body> </html>