Javascript高级程序设计 第八章 --- DOM
-
- 节点层次
- Node类型
- nodeName 和 nodeValue
- 节点关系
- 操作节点
- 其他方法
- Document类型
- 文档的子节点
- 查找元素
- Element 类型
- 取得特性
- 设置属性
- 删除属性
- attribute属性
- Node类型
- 节点层次
DOM（文档对象模型）是针对HTML和XML文档的一个API。
节点层次
<html>
<head>
<title>Sample Pagetitle>
head>
<body>
<p>Hello World!p>
body>
html>Node类型
每个节点都有一个 nodeType 属性，用于表明节点类型：
- Node.ELEMENT_NODE(1)
- Node.ATTRIBUTE_NODE(2)
- Node.TEXT_NODE(3)
if(someNode.nodeType == 1){
alert("Node is an element.")
}开发人员最常用的是元素和文本节点。
nodeName 和 nodeValue
if(someNode.nodeType == 1){
value = someNode.nodeName; // nodeName的值是元素的标签名
}对于元素节点，nodeName 中始终保存的都是元素的标签名，而 nodeValue的值始终是 Null。
节点关系
每个节点都有一个 childNodes属性，其中保存着一个NodeList对象。NodeList 是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
下面展示了如何访问保存在 NodeList中的节点 — 可以方括号，也可以 item()方法。
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;操作节点
最常用的方法为 appendChild()，用于向 childNodes列表末尾添加一个节点。 appendChild()返回新增的节点。
var returnedNode = someNode.appendChild(newNode);
alert(returnNode == newNode); // true
alert(someNode.lastChild == newNode); // true如果调用 appendChild()时 传入一个父节点的第一个节点，那么该节点就会成为父节点最后一个节点。
// someNode 有多个子节点
var returnNode = someNode.appendChild(someNode.firstChild);
alert(returnNode == someNode.firstChild); // false
alert(returnNode == someNode.lastChild); // true
需要把某个节点放在某个特定位置，就要使用 insertBefore(),
这个方法只接受两个参数：
- 要插入的节点
- 作为参照的节点，如果参照节点为 null，则执行和 appendChild()相同
// 插入后成为最后一个节点
returnedNode = someNode.insertBefore(newNode, null);
alert(newNode == someNode.lastChild); // true
// 插入成为第一个节点
var returnedNode = someNode.insertBefore(newNode,someNode.firstChild);
alert(newNode == someNode.firstNode) // true
// 插入到最后一个子节点前
returnedNode = someNode.insertBefore(newNode,someNode.lastChild);
alert(newNode == someNode[someNode.childNodes.length - 2]); // true注意：appendChild() 和 insertBefore()方法只插入节点，不会移除节点。
replaceChild() 方法接受两个参数
- 要插入的节点
- 要替换的节点
要替换的节点将由这个方法返回并从文档树移除，同时插入的节点占据其位置。
// 替换第一个子节点
var returnedNode = someNode.replaceChild(newNode,someNode.firstNode);
// 替换最后一个子节点
var returnedNode = someNode.replaceChild(newNode,someNode.lastNode);如果只移除而非替换，用 removeChild()
// 移除第一个元素
var formerFirstChild = someNode.removeChild(someNode.firstChild);其他方法
cloneNode() 方法，用于创建调用这个方法的节点的一个完全相同的副本。
cloneNode()方法接受一个布尔值参数 ,表示是否执行深拷贝。
- 当参数为 true 的情况下，深复制，也就是复制节点以及其整个子节点树
- 当参数为 false 的情况下，浅复制，只复制节点本身
假设有这样的HTML代码
<ul>
<li>item 1li>
<li>item 2li>
<li>item 3li>
ul>将 ul元素保存在变量 myList中，那么我们可以看出使用 cloneNode()方法的两种模式。
var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); // 3
var shallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length); // 0Document类型
Javascript 通过 Document类型表示文档。在浏览器中， document对象是 HTMLDocument(继承自Document类型)的一个实例，表示整个HTML页面。而且，document对象是 window对象的一个属性，因此可以用全局变量来访问。Document 节点具有以下特征：
- nodeType 的值为9
- nodeName 的值为 “#document”
- nodeValue 的值为 null
- parentNode 的值为 null
- ownerDocument 的值为 null
文档的子节点
对 html 的引用
var html = document.documentElement; // 取得对的引用document 有一个 body属性，直接指向 body元素
var body = document.body; // 取得对的引用查找元素
Document类型提供两种方法：getElementById() 和 getElementsByTagName()。
getElementById() 接受一个参数：要取得元素的id，如果不存在，返回 null
<div id="myDiv">Some textdiv>
var div = document.getElementById("myDiv");
getElementsByTagName() 该方法接受一个参数，既要取得元素的标签名，返回的是包含0个或者多个元素的 NodeList
var images = document.getElementsByTagName("img");
alert(images.length); // 输出图像的数量
alert(images[0].src); // 输出第一个图像的src特性
alert(images.items(0).src); // 输出第一个图像的src特性getElementsByName() 只有HTMLDocument类型才有的方法，这个方法返回带给定 name 特性的所有元素。
Element 类型
Element 节点具有以下特征：
- nodeType 的值为1
- nodeName 的值为元素的标签名
- nodeValue 的值为 null
- parentNode 可能是 Document 或 Element
要访问元素的标签名，可以使用 nodeName 属性，也可以使用 tagName属性，返回的值相同
var div = document.getElementById("myDiv");
alert(div.tagName); // "DIV"
alert(div.tagName == div.nodeName); // true取得特性
操作特性的DOM方法主要有三种：
- getAttribute()
- setAttribute()
- removeAttribute()
比如：
var div = document.getElementById("myDiv");
alert(div.getAttribute("id")); // "myDiv"
alert(div.getAttribute("class")); // "bd"getAttribute()可以获取自定义特性的值，比如：
<div id="myDiv" data-special-attribute="hello">div>
var value = div.getAttribute("data-special-attribute");注意：根据HTML5规范，自定义特性应该加上 “data-” 前缀。
设置属性
setAttribute() ，这个方法接受两个参数：
- 要设置的参数名
- 值
如果特性已经存在，会以指定值替换现有值；如果不存在，创建该属性并设置相应值。
div.setAttribute("id", "someOtherId");
div.setAttribute("class", "ft");删除属性
removeAttribute(),用这个方法彻底删除元素的特性。
div.removeAttribute("class");attribute属性
attribute属性包含一个 NamedNodeMap，与 NodeList类似，元素每个特性都包含在 NameNodeMap对象中。NameNodeMap对象有以下方法：
getNamedItem(name)返回nodeName属性等于 name的节点removeNamedItem(name)从列表中移除 nodeName属性等于 name的节点setNamedItem(node)向列表中添加节点，以节点的nodeName属性索引item(pos)返回位于数字pos位置处的节点
attribute属性中包含一系列的节点，每个节点的 nodeName 就是特性名称，而节点的 nodeValue就是特性的值，要取得ID,可以使用以下代码。
var id = element.getNamedItem("id").nodeValue;
// 或者
var id = element.attributes["id"].nodeValue;
// 将nodeValue设置成新值
element.attributes["id"].nodeValue = "someOtherId";
// 删除Attr节点
var oldAttr = element.attributes.removeNamedItem("id");遍历元素的特性：
function outputAttributes(element){
var pairs = new Array(),
attrName,
attrValue,
i,
len;
for(i = 0, len = element.attributes.length; i < len; i++ ){
attrName = element.attributes[i].nodeName;
attrValue = element.attributes[i].nodeValue;
pairs.push(attrName + "=\"" + attrValue + "\"");
}
return pairs.join(" ");
}