前言：
当前大家对“html解析dom”大体比较关切，同学们都需要知道一些“html解析dom”的相关资讯。那么小编也在网络上收集了一些有关“html解析dom””的相关文章，希望大家能喜欢，同学们快快来学习一下吧！1. DOM
1.1. DOM简介
全称Document Object Model，即文档对象模型。
DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。
浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，
而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，
组建好之后，按照树的结构将页面显示在浏览器的窗口中。
1.2. 节点层次
HTML网页是可以看做是一个树状的结构，如下：
html
|-- head
| |-- title
| |-- meta
| ...
|-- body
| |-- div
| |-- form
| | |-- input
| | |-- textarea
... ... ...
这是一颗树，是由多个节点（Node）组成的，节点的类型有很多种。
节点最多有一个父节点，可以有多个子节点。
HTML DOM 定义了访问和操作HTML文档的标准方法。
document
代表当前页面的整个文档树。
访问属性
all
forms
images
links
body
访问方法(最常用的DOM方法)
<html xmlns=";><head><script type="text/javascript">// 获取dom 树, 获取document 对象.var dom = window.document;// all 获取页面中所有的标签节点 ,注释和文档类型约束.function testAll() { var allArr = dom.all; alert(allArr.length); for (var i = 0; i < allArr.length; i++) { //获取节点名称 alert(allArr[i].nodeName); }}// anchors 获取页面中的所有的锚连接.function testAnchors() { var anArr = dom.anchors; alert(anArr.length);}// froms 获取所有的form 表单对象function testForms() { var formArr = dom.forms; alert(formArr.length); alert(formArr[0].nodeName);}// imagesfunction testImages() { var imageArr = dom.images; alert(imageArr.length);}// links 获取页面的超链接.function testLinks() { var linkArr = dom.links; //alert(linkArr.length); for (var i = 0; i < linkArr.length; i++) { //alert(linkArr[i].nodeName); } for (var i in linkArr) { alert(i); } }//testLinks();// 获取页面的Bodyvar body = dom.body;alert(body.nodeName);</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>javascript</title></head><body onmousemove="test(this)"><img src="xxx" alt="这是一个美女"/><img src="xxx" alt="这是一个美女"/><img src="xxx" alt="这是一个美女"/><a href=";>百度一下</a><a href=";>百度两下</a><a href=";>百谷一下</a><a name="one"></a><a name="two"></a><form><label>姓名:</label><!--默认不写type 就是文本输入框--><input type="text"/></form></body></html>1.3. 获取节点对象案例document.getElementById("html元素的id")
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")
示例：
1，得到所有的div元素并显示信息（innerHTML）。
2，得到所有div元素中id为"test"的结果。
Var dom = window.document;function testByTagName() { var iptArr = dom.getElementsByTagName("input"); for (var i = 0; i < iptArr.length; i++) { alert(iptArr[i].value); }}// window 对象提供了一个事件, onload 事件 onload(页面加载完毕执行该代码) 是一个事件, 给事件一个方法,
//window.onload = testByTagName;
//2，得到所有标签id为"username"的结果。获取旧value值并设置value值
function testById() { var user = dom.getElementById("username"); alert(user.value); user.value = "rose"; }//testById();//3. 获取所有标签name 为like的元素.获取value值.
function testByName() { var likeArr = dom.getElementsByName("like"); for (var i = 0; i < likeArr.length; i++) { alert(likeArr[i].value); }}testByName();1.3.1. 案例
显示页面任意一个节点对象的所有子节点的nodeName、nodeType、nodeValue
1.3.2. 属性操作练习
1，写一个form，其中有多个checkbox。
2，获取所有选中的数量。
3，实现全选与全部选的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";><html xmlns=";><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title> <script type="text/javascript">function getSum(){/*需求：通过点击总金额按钮获取被选中的条目的金额的总和，并将总金额显示在按钮右边。思路：1，先获取所有的checkbox对象。2，对这些对象进行遍历。判断哪个对象被选中。3，对被选中对象的金额进行累加。4，显示在按钮右边。*/var items = document.getElementsByName("item");var sum = 0;for(var x=0; x<items.length; x++){if(items[x].checked){sum += parseInt(items[x].value);}}var str = sum+"元";document.getElementById("sumid").innerHTML = str.fontcolor('red');} function checkAll(node){ /* 需求：通过全选checkbox，将其他条目都选中。 思路： 只要将全选checkbox的checked状态赋值给其他的item checked状态即可。 */ //var allNode = document.getElementsByName("all")[index]; var items = document.getElementsByName("item"); for(var x=0; x<items.length; x++){ items[x].checked = node.checked; }}</script></head> <body> <div>商品列表</div><input type="checkbox" name="all" onclick="checkAll(this)" /> 全选<br /><input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /><input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /><input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /><input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /><input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /><input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /><input type="checkbox" name="all" onclick="checkAll(this)" /> 全选<br /><input type="button" value="总金额：" onclick="getSum()" /><span id="sumid"></span> </body></html>1.4. 通过节点关系查找节点
从一个节点出发开始查找：
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
nextSibling 获取当前节点的下一个节点。（兄节点）
previousSibling 获取当前节点的上一个节点。（弟节点）
示例1：
firstChild属性最普遍的用法是访问某个元素的文本：
var text=x.firstChild.nodeValue;
示例2：
parentNode 属性常被用来改变文档的结构。
假设您希望从文档中删除带有 id 为 "maindiv" 的节点：
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
1.4.1. 获取节点对象的信息
每个节点都包含的信息的，这些属性是：
nodeType 节点类型
nodeName 节点名称
nodeValue 节点值
nodeType
nodeType 属性可返回节点的类型。
---------------------------------
元素类型 节点类型
------------------
元素 1 就是标签元素，例<div>..</div>
文本 3 标签元素中的文本
注释 8 表示为注释
nodeName
nodeName 属性含有某个节点的名称。
--------------------------------
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
nodeValue
对于文本节点，nodeValue 属性是所包含的文本。
对于属性节点，nodeValue 属性是属性值。
对于注释节点，nodeValue 属性注释内容。
nodeValue 属性对于文档节点和元素节点是不可用的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";><html xmlns=";><head><script type="text/javascript">//节点和节点之间的关系.//获取dom树var dom = window.document;//获取指定id 的标签节点.function test() { var form = dom.getElementById("form1"); //获取父节点. //alert(form.parentNode.nodeName); // 获取子节点(Node 包含 文本,注释,标签) var childArr = form.childNodes; //alert(childArr.length); /* for (var i = 0; i < childArr.length; i++) { alert(childArr[i]); } */ // 获取第一个孩子. var first = form.firstChild; //alert(first); //最后一个孩子. var last = form.lastChild; //alert(last); // 获取下兄弟(获取弟弟) var sibling = form.nextSibling; //alert(sibling.nodeName); // 获取大哥 var previous = form.previousSibling; alert(previous.nodeName);}test();</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript</title></head> <body onmousemove="test(this)"> <a>哈哈</a> <form id="form1"> <label>姓名:</label> <input type="text" /> </form> </body></html>1.5. 节点操作1.5.1. 创建新节点
document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置属性
elt.appendChild(e) 添加元素到elt中最后的位置
elt.insertBefore(new, child); 添加到elt中，child之前。 // 参数1：要插入的节点 参数 2：插入目标元素的位置
elt.removeChild(eChild) 删除指定的子节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";><html xmlns=";><head><script>/*创建节点：document.createElement("标签名") 创建新元素节点elt.setAttribute("属性名", "属性值") 设置属性添加节点到文档树上:elt.appendChild(e) 添加元素到elt中最后的位置 把元素添加最后一个子节点的后面。elt.insertBefore(new, child); 添加到elt中，child之前。// 参数1：要插入的节点 参数2：插入目标元素的位置 *//*function add(){//var inputNode = document.createElement("input"); // 创建一个节点的对象inputNode.setAttribute("type","file"); //给新节点设置type的属性值。var body = document.getElementsByTagName("body")[0];body.appendChild(inputNode); //把新节点添加到body体中。}*/var count = 1;function add(){var trNode = document.createElement("tr");var tdNode = document.createElement("td");var inputNode = document.createElement("input");inputNode.setAttribute("type","button");inputNode.setAttribute("value",count+"");count++;tdNode.appendChild(inputNode);trNode.appendChild(tdNode);//trNode添加 到指定 的位置上。var tbodyNode = document.getElementsByTagName("tbody")[0];//tableNode.appendChild(trNode);var button1 = document.getElementById("b1");tbodyNode.insertBefore(trNode,button1); // 注意： 使用obj.insertBefore(o1,o2)这个方法的时候//obj必须是o1,o2的直接父节点。//alert(button1.nodeName+"~~"+trNode.nodeName+"~~"+tableNode.nodeName);}</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><table> <tr> <td> <input type="button" value="0"> </td> </tr> <tr id="b1"> <td> <input type="button" value="添加" onclick="add()"> </td> </tr> </table> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";><html xmlns=";><head><script>function addFile(){var trNode = document.createElement("tr");var td1 = document.createElement("td");var td2 = document.createElement("td");td1.innerHTML="<input type='file'/>";td2.innerHTML="<a href='#' onclick='deleteFile(this)'>删除附件</a>"trNode.appendChild(td1);trNode.appendChild(td2);//把trNode添加 到添加按钮上面var addButton = document.getElementById("addButton");var tbody = document.getElementsByTagName("tbody")[0];tbody.insertBefore(trNode,addButton);} function deleteFile(deleteNode){//找到要删除的tr a---->td---->trvar trNode = deleteNode.parentNode.parentNode; //获取到了要删除的tr节点。// 找 到trNode的父节点var tbodyNode =document.getElementsByTagName("tbody")[0];tbodyNode.removeChild(trNode);//trNode.removeNode(true); // removeNode() 在firefox上不 支持，在ie支持。} </script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body> <table> <tr> <td><input type="file"></td> <td><a href="#" onclick="deleteFile(this)">删除附件</a></td> </tr> <tr id="addButton"> <td> <input type="button" value="添加附件" onclick="addFile()"/> </td> </tr> </table> </body></html> 
