DOM
节点层次
Node类型
- NodeList 是一种类数组 对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
- 基于 DOM结构动态执行查询的结果，因此 DOM结构的变化能够自动反映 在 NodeList 对象中
- 以将 NodeList 对象转换为数组
- var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);
- 每个节点都有一个 parentNode 属性
- 操作节点
- appendChild()
- insertBefore()
- replaceChild()
- 替换：接受的两个参数是：要插入的节点和要替换的节点。
- 移除：接受一个参数，即要移除的节点。
- cloneNode()
- 接受一个布尔值参数，表示是否执行深复制（true）。
- 复制后返回的节点副本属于文档所有，但并没有为它指定父节点。
- 可通过 appendChild()、insertBefore()或 replaceChild()将它添加到文档中
Document类型
documentElement属性，该属性始终指向 HTML 页面中的 <html>元素。
var html = document.documentElement; //取得对<html>的引用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild); //true
var body = document.body; //取得对<body>的引用
与对网页的请求有关的属性
- URL 属性中包含页面完整的 URL（即地址栏中显示的 URL）
- domain 属性中只包含页面的域名
- referrer属性中则保存着链接到当前页面的那个页面的 URL。
- 在没有来源页面的情况下， referrer 属性中可能会包含空字符串。
HTMLCollection 对象
- getElementById()
- getElementsByTagName()
- namedItem()
- getElementsByName()
- 常使用情况是取得须具有相同的 name 特性单选按钮
特殊集合
- document.images，包含文档中所有的<img>元素，
- document.links，包含文档中所有带 href 特性的<a>元素
Element类型
操作特性的 DOM方法
- getAttribute()
- setAttribute()
- removeAttribute() 。
div.getAttribute("id"));
alert(div.getAttribute("class"));
alert(div.getAttribute("title"));
取得自定义特性
<div id="myDiv" my_special_attribute="hello!"></div>
<div id="myDiv" align="left" my_special_attribute="hello!"></div>
div.setAttribute("class", "ft");
div.removeAttribute("class");
attributes 属性
遍历元素的特性
document.createElement()
Text 类型
分割文本节点
splitText()
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
var newNode = element.firstChild.splitText(5);
alert(element.firstChild.nodeValue); //"Hello"
alert(newNode.nodeValue); //" world!"
小结
NodeList 对象都是“动态的”，即每次访问 NodeList 对象，都会运行一次查询。所以要尽量减少 DOM操作。