HTML DOM
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。
HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
HTML文档可以说由节点构成的集合，DOM节点有:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.adminwang.com"。
节点属性:
遍历节点树:
DOM操作:
查找 HTML 元素
有三种方法来做这件事：
1.通过 id 找到 HTML 元素:document.getElementById("intro");
2.通过标签名找到 HTML 元素:document.getElementsByTagName("p");
3.通过类名找到 HTML 元素:document.getElementsByClassName(“classname”)
DOM创建
DOM节点创建最常用的便是document.createElement和document.createTextNode方法：
var node1 = document.createElement('div');
var node2 = document.createTextNode('hello world!');
DOM查询
// 返回当前文档中第一个类名为 "myclass" 的元素
var el = document.querySelector(".myclass");
// 返回一个文档中所有的class为"note"或者 "alert"的div元素 var els = document.querySelectorAll("div.note, div.alert");
// 获取元素
var el = document.getElementById('xxx');
var els = document.getElementsByClassName('highlight'); var els = document.getElementsByTagName('td');
// 获取父元素、父节点
var parent = ele.parentElement;
var parent = ele.parentNode;//只读，没有兼容性问题
var offsetParent=ele.offsetParent;//只读，找到最近的有定位的父节点.没有定位父级时,默认是body;但在IE7以下，如果当前元素没有定位属性，返回body，如果有，返回HTML;
// 获取子节点，子节点可以是任何一种节点，可以通过nodeType来判断
var nodes = ele.children;//标准下、非标准下都只含元素类型
var nodes = ele.childNodes;//非标准下：只包含元素类型，不会包含非法嵌套的子节点. 标准下：包含元素和文本类型，会包含非法嵌套的子节点。
//第一个alert输出 <p id="p1" class="class1">我是第一个P</p><p id="p2" class="class2">我是第二个P</p>
第二个输出我是第一个P - 我是第二个P ，因为本方法文本节点也会获取,也就是说0,2,4是文本节点.
//获取元素属性列表
var attr = ele.attributes;
// 当前元素的第一个/最后一个子元素节点
var el = ele.firstChild;var el = ele.lastChild;
var el = ele.firstElementChild;//非标准不支持 var el = ele.lastElementChild;
// 下一个/上一个兄弟元素节点
var el = ele.nextSibling; var el = ele.previousSibling;
var el = ele.nextElementSibling; var el = ele.previousElementSibling;
DOM更改
// 添加、删除子元素
ele.appendChild(el); ele.removeChild(el);
// 替换子元素
ele.replaceChild(el1, el2);//el1为目标元素，el2为被替换的元素
// 插入子元素
parentElement.insertBefore(newElement, referenceElement);
//克隆元素
ele.cloneNode(true) //该参数指示被复制的节点是否包括原节点的所有属性和子节点
属性操作
// 获取一个{name, value}的数组 var attrs = el.attributes;
// 获取、设置属性
var c = el.getAttribute('class');
el.setAttribute('class', 'highlight');
// 判断、移除属性
el.hasAttribute('class');
el.removeAttribute('class');
// 是否有属性设置 el.hasAttributes();
getElementsByClassName()方法
返回带有指定名称的节点对象的集合。
语法：
document.getElementsByName(name)
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。
注意:
1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:
getElementsByTagName(Tagname)
说明:
1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
getAttribute()方法
通过元素节点的属性名称获取属性的值。
语法：
elementNode.getAttribute(name)
说明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
2. name：要想查询的元素节点的属性名字
setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：
elementNode.setAttribute(name,value)
说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数
节点属性
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
1. nodeName : 节点的名称
2. nodeValue ：节点的值
3. nodeType ：节点的类型
一、nodeName 属性: 节点的名称，是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
访问子结点childNodes()
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：
elementNode.childNodes
注意：
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
我们来看看下面的代码:
运行结果:
IE8及更早的版本:
UL子节点个数:3
节点类型:1
其它浏览器:
UL子节点个数:7
节点类型:3
注意:
1. IE全系列、firefox、chrome、opera、safari兼容问题
2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7
从IE9开始不存在这个问题
访问子结点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title></head><body><div id="con"> <p>javascript</p> <div>jQuery</div> <h5>PHP</h5></div><script type="text/javascript"> var x=document.getElementById("con"); document.write(x.firstChild.nodeName+"<br>"); //输出指定元素(div)的第一个子节点。 document.write(x.lastChild.nodeName+"<br>"); //第16行输出指定元素(div)的最后一个子节点。</script></body></html>
访问父节点parentNode()
获取指点节点的父节点
语法：
elementNode.parentNode
注意:父节点只能有一个。
访问兄弟节点
1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：
nodeObject.nextSibling
说明：如果无此节点，则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：
nodeObject.previousSibling
说明：如果无此节点，则该属性返回 null。
注意: 两个属性获取的是节点，而不是元素
创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：
document.createElement(tagName)
参数:
tagName：字符串值，这个字符串用来指明创建元素的类型。
注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。
我们来创建一个<div>元素并向其中添加一条消息，代码如下：
<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style type="text/css">.message{ width:200px; height:100px; background-color:#CCC;} </style></head><body><script type="text/javascript"> var element = document.createElement("p"); element.className = "message"; var textNode = document.createTextNode("I love JavaScript!"); element.appendChild(textNode); document.body.appendChild(element); </script></body></html>运行结果：
插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:
appendChild(newnode)
参数:
newnode：指定追加的节点。
我们来看看，div标签内创建一个新的 P 标签，代码如下:
运行结果:
HTML
JavaScript
This is a new p
插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:
insertBefore(newnode,node);
参数:
newnode:要插入的新节点。
node:可选，指定此节点前插入节点。
删除节点removeChild()
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法:
nodeObject.removeChild(node)
参数:
node ：必需，指定需要删除的节点。
替换元素节点replaceChild()
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法：
node.replaceChild (newnode,oldnew )
参数：
newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。
classList 属性
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。
remove(value)：从列表中删除给定的字符串 .
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
1. innerText 属性
通过 innertText 属性可以操作元素中包含的所有文本内容，包括子文档树中的文本
在通过 innerText 写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点.
支持 innerText 属性的浏览器包括 IE4+、 Safari 3+、 Opera 8+和 Chrome。 Firefox 虽然不支持innerText，但支持作用类似的 textContent 属性。 textContent 是 DOM Level 3 规定的一个属性，其他支持 textContent 属性的浏览器还有 IE9+、 Safari 3+、 Opera 10+和 Chrome。为了确保跨浏览器兼容，有必要编写一个类似于下面的函数来检测可以使用哪个属性。
2.outerText 属性
除了作用范围扩大到了包含调用它的节点之外，outerText 与 innerText 基本上没有多大区别 ,在读取文本值时，outerText 与 innerText 的结果完全一样。但在写模式下， outerText 就完全不同了:outerText 不只是替换调用它的元素的子节点，而是会替换整个元素（包括子节点）,由于这个属性会导致调用它的元素不存在，因此并不常用.
3.innerHTML 属性
在读模式下， innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记。在写模式下， innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点.
4.outerHTML 属性
在读模式下， outerHTML 返回调用它的元素及所有子节点的 HTML 标签。在写模式下， outerHTML会根据指定的 HTML 字符串创建新的 DOM 子树，然后用这个 DOM 子树完全替换调用元素。
5.访问元素的样式
任何支持 style 特性的 HTML 元素在 JavaScript 中都有一个对应的 style 属性。这个 style 对象包含着通过 HTML 的 style 特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式对于使用短划线（分隔不同的词汇，例如 background-image）的 CSS 属性名，必须将其转换成驼峰大小写形式，才能通过 JavaScript 来访问 .
6.元素大小
1. 偏移量
元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（注意，不包括外边距）。
offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。
offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。
2. 客户区大小
元素的客户区大小指的是元素内容及其内边距所占据的空间大小
clientWidth 属性是元素内容区宽度加上左右内边距宽度；
clientHeight 属性是元素内容区高度加上上下内边距高度 .
3. 滚动大小
滚动大小指的是包含滚动内容的元素的大小。
scrollHeight：在没有滚动条的情况下，元素内容的总高度.
scrollWidth：在没有滚动条的情况下，元素内容的总宽度.
scrollLeft：被隐藏在内容区域左侧的像素数 .
scrollTop：被隐藏在内容区域上方的像素数 .
浙公网安备 33010602011771号