标签：evo jid fmb opp tpcc v2p god gic swift
HTML DOM
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。
HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
查找 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();
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 来访问 .
标签：evo jid fmb opp tpcc v2p god gic swift
原文地址：http://www.cnblogs.com/ll-9621/p/7652096.html
