DOM（JavaScript高程笔记）

一、节点层次

1.Node类型

if (someNode.nodeType == 1){  // 适用于所有浏览器

    alert("Node is an element.");

}

Node.ELEMENT_NODE (1)；
Node.ATTRIBUTE_NODE (2)；
Node.TEXT_NODE (3)；

nodeName 和 nodeValue 属性

在使用这两个值以前，最好是像下面这样先检测一下节点的类型。

if (someNode.nodeType == 1){

    value = someNode.nodeName; // nodeName 的值是元素的标签名

    // 对于元素节点，nodeName 中保存的始终都是元素的标签名，而 nodeValue 的值则始终为 null 。

}

节点关系

每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。

NodeList 是一种类数组对象，它实际上是基于 DOM 结构动态执行查询的结果。

// 转为数组

function convertToArray(nodes){

    var array = null;

    try {

        array = Array.prototype.slice.call(nodes, 0);

    } catch (ex) {

        //  IE8 及更早版本将 NodeList实现为一个 COM 对象

        array = new Array();

        for (var i=0, len=nodes.length; i < len; i++){

            array.push(nodes[i]);

        }

    }

    return array;

}

convertToArray(someNode.childNodes);

childNodes
parentNode
previousSibling
nextSibling
firstChild
lastChild
hasChildNode() // 在节点包含一或多个子节点的情况下返回 true
ownerDocument // 所有节点都有的属性，指向整个文档节点

操作节点

appendChild() // 如果节点已经是文档的一部分，则将该节点从原来的位置

转移到末尾
insertBefore() // 如果参照节点是

null ，则 insertBefore() 与 appendChild() 执行相同的操作
replaceChild()
removeChild()
cloneNode() // IE会复制JavaScript事件，最好先移除事件
normalize() // 处理文本节点，空则删，相邻则合并

3.Document类型

nodeType = 9
nodeName = '#document'
nodeValue = null
parentNode = null
ownerDocument = null

其子节点可能是一个 DocumentType （最多一个）、 Element （最多一个）、 ProcessingInstruction

或 Comment 。

文档的子节点

documentElement // 指向<html>
childNodes[0] // 指向<html>
body // 指向<body>
doctype // 指向<!DOCTYPE>，各浏览器支持不一致

文档信息

title // 中的文本
URL
referrer // 来源页面
domain

1 不能将这个属性设置为 URL 中不包含的域

// 假设页面来自 p2p.wrox.com 域

document.domain = "wrox.com"; // 成功

document.domain = "nczonline.net"; // 出错！

2 如果域名一开始是“松散的” （loose），那么不能将它再设

置为“紧绷的” （tight）。

// 假设页面来自于 p2p.wrox.com 域

document.domain = "wrox.com"; //松散的（成功）

document.domain = "p2p.wrox.com"; //紧绷的（出错！）

3 设置为相同的值可用于 frame 跨域

查找元素

getElementById()
getElementsByTagName() // 返回 HTMLCollection 对象
getElementsByName() // 返回 HTMLCollection 对象

特殊集合 // 返回值与 HTMLCollection 对象类似

anchors // 所有带 name 属性的

links // 所有带 href 属性的

forms // 所有

images // 所有

HTMLCollection对象

namedItem() // 通过元素的 name 属性取得集合中的项（只会取得第一项）
我们可以向方括号中传入数值或字符串形式的索引值。在后台，对数

值索引就会调用 item() ，而对字符串索引就会调用 namedItem() 。

DOM一致性检测

document.implementation.hasFeature('name', 'verson');

文档写入

// 直接写入文档末尾

document.write("<strong>" + (new Date()).toString() + "</strong>");

// 如果在文档加载结束后再调用 document.write() ，那么输出的内容将会重写整个页面

window.onload = function(){

    document.write("Hello world!");

};

write() // 原样写入
writeIn() // 末尾添加换行符(\n)
open()
close() // 打开、关闭输出流，如页面加载期间用 write 和 writeIn 则无需打开关闭

3.Element类型

nodeType = 1
nodeName = tagName = 标签名
nodeValue = null

取得属性

getAttribute() // 可取得 data- 自定义属性。
可以通过 DOM 对象的属性来取得非自定义属性。
IE 可以通过 DOM 对象属性取得自定义属性。

1 style

getAttribute() 访问返回CSS文本
DOM 对象属性访问返回对象

2 事件(onclick)

getAttribute() 访问返回字符串
DOM 对象属性访问返回函数

设置属性

setAttribute() // 可设置 data- 自定义属性
可以通过 DOM 对象的属性来设置非自定义属性。
IE 可以通过 DOM 对象属性设置自定义属性。

删除属性

removeAttribute() // 彻底删除，包括属性和值

attributes属性

attributes 属性中每一个元素属性都由一个 Attr 节点表示，保存在一个 NamedNodeMap 对象中，NamedNodeMap 与 NodeList 类似。

节点属性

nodeName
nodeValue

遍历元素属性

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;

        if (element.attribute[i].specified) {

            pairs.push(attrName + "=\"" + attrValue + "\"");

        }

    }

    return pairs.join(" ");

}

创建元素

var div = document.createElement("div");

// 在 IE 中可用以下方式

var div = document.createElement("<div id=\"myNewDiv\" class=\"box\"></div >");