程序员

脚本化文档(1)

2016-07-02  本文已影响72人  kissLife

DOM概览

HTML文档的树状表示

上图的每个方框是文档的一个节点，它表示一个Node对象。

Node节点的继承关系
注意，通用的Document和Element类型与HTMLDocument和HTMLElement类型之间是有严格的区别的。Document类型代表一个HTML或XML文档，Element类型代表该文档中的一个元素。HTMLDocument和HTMLElement子类只是针对于HTML文档和元素。

选择文档元素

获取文档的一个或多个元素有如下方法：

通过ID选取元素

可以用Document对象的getElementById()方法选取一个基于唯一ID的元素，返回包含单个Element的Node对象。

// 选择id为"section1"的唯一元素
var section1 = document.getElementById("section1");

通过name选择元素

区别于id，name属性的值不是必须唯一，多个元素可以有同样的名字。
getElementsByName()定义在HTMLDocument类中，而不是在Document类中，所以它只针对HTML文档可用，返回包含多个Elements的NodeList对象。
注意：对于<iframe>元素，返回值不是元素自身的Element对象，而是表示<iframe>元素创建的嵌套浏览器窗体的Window对象。

// 选择name为"favorite"的所有元素
var radiobuttons = document.getElementsByName("favorite");

通过标签名选择元素

Document对象的getElementsByTagName()方法可用来选取指定标签的所有HTML或XML元素，返回包含多个Elements的NodeList对象。

// 选择第1个<p>元素
var firstpara = document.getElementByTagName("p")[0];

由于历史原因，HTMLDocument类定义了一些快捷属性来访问各种各样的节点：

// 引用id为"shipping_address"的form元素
document.forms.shipping_address;

// 引用body元素
document.body;

通过CSS类(class)选择元素

类似getElementsByTagName()，在HTML文档和HTML元素上都可以调用getElementsByClassName()，它的返回值是一个实时的的NodeList对象，包含文档或元素所有匹配的后代节点。
getElementsByClassName()只需要一个字符串参数，但是该字符串可以由多个空格隔开的标识符组成，只有当元素的class属性值包含所有的标识符时才匹配，但是标识符的顺序是无关紧要的。

// 查看id为"log"的元素的所有后代中，类名中包含"fatal"和"error"的元素集合
var log = document.getElementById("log");
var fatal = log.getElementsByClassName("fatal error");

通过CSS选择器选择元素

#nav        // id="nav"的元素
div         // 所有<div>元素
.warning    // 所有在class属性中包含"warning"的元素

p[lang="fr"]    // 所有使用法语的段落，如：<p lang="fr">
*[name="x"]     // 所有包含name="x"属性的元素

span.fatal.error            // class中包含"fatal"和"error"的所有<span>元素
span[lang="fr"].warning     // 所有使用法语且class中包含"warning"的<span>元素

#log span               // id="log"元素的 *后代元素* 中的所有<span>元素
#log>span               // id="log"元素的 *子元素* 中的所有<span>元素
body>h1:first-child     // <body>的子元素中的第一个<h1>元素

Document对象的querySelectorAll()方法，接收一个包含CSS选择器的字符串参数，返回匹配选择器的所有元素的NodeList对象，但是NodeList对象并不是实时的。
同时，还有个方法querySelector()，但它只返回第1个匹配的元素（以文档顺序）或者没有匹配就返回null。
注意：CSS定义了":first-line"和":first-letter"等伪元素，在CSS中，它们匹配文本节点的一部分而不是实际元素。如果和querySelectorAll()和querySelector()一起使用它们是不匹配的。

文档结构和遍历

文档的节点(Node)树

Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象。
Node有以下一些属性:

属性 意义
parentNode 该节点的父节点，Document对象的父节点是null。
childNodes 该节点的子节点的实时表示(NodeList对象)。
firstChild、lastChild 该节点的第1个和最后1个子节点，如果没有子节点则为null。
nextSibling、previoursSibling 该节点的兄弟节点的下一个和前一个。
nodeType 该节点的类型。1代表Element节点，3代表Text节点，8代表Comment节点，9代表Document节点，11代表DocumentFragment节点。
nodeValue Text节点或Comment节点的文本内容。
nodeName 元素的标签名，以大写形式表示。

文档的元素(Element)树

如果将文档Element对象树，将忽略Text和Comment节点。
Element对象的有以下属性：

属性 意义
parentNode 该节点的父节点，任何Element的parentNode总是另一个Element，或者追溯到树根的Document或DocumentFragment节点。
children 类似ChildNodes，它也是一个NodeList对象，但不同的是children列表只包含Element对象。
firstElementChild, lastElementChild 类似firstChild和lastChild，但只代表子Element。
nextElementSibling, previousElementSibling 类似nextSibling和previousSibling，但只代表兄弟Element。
childElementCount 子元素的数量。返回的值和children.length值相等。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<!-- 注释 -->
<div class="fox" id="box">123</div>
<script>
//【1】元素节点
var nodeElement = document.body;
console.log(nodeElement.nodeName, nodeElement.nodeValue, nodeElement.nodeType, nodeElement.nodeType==Node.ELEMENT_NODE);//BODY null 1 true

//【2】元素特性在DOM中以Attr类型表示，是存在于元素的attributes属性中的节点，但却不是DOM文档树的一部分。
var nodeAttribute = document.getElementById("box").attributes[0] ;
console.log(nodeAttribute.nodeName, nodeAttribute.nodeValue, nodeAttribute.nodeType,nodeAttribute.nodeType == Node.ATTRIBUTE_NODE)//id box 2 true (示例中包含2个属性，如果是attributes[1]是输出"class fox 2 true")

//【1】元素节点
var nodeChildElement = document.body.firstElementChild;
console.log(nodeChildElement.nodeName, nodeChildElement.nodeValue, nodeChildElement.nodeType,nodeChildElement.nodeType == Node.ELEMENT_NODE)//DIV null 1 true

//【3】文本节点
var nodeText = document.body.firstElementChild.firstChild;
console.log(nodeText.nodeName, nodeText.nodeValue, nodeText.nodeType,nodeText.nodeType == Node.TEXT_NODE)//#text 123 3 true

//【4】CDATASection类型只针对基于XML的文档，只出现在XML文档中，表示的是CDATA区域
//【5】ENTITY_REFERENCE_NODE 实体引用名称节点
//【6】ENTITY_NODE 实体名称节点
//【7】PROCESSING_INSTRUCTION_NODE 处理指令节点

//【8】注释节点
var nodeComment = document.body.childNodes[1];
console.log(nodeComment.nodeName, nodeComment.nodeValue, nodeComment.nodeType,nodeComment.nodeType == Node.COMMENT_NODE)//#comment 注释 8 true

//【9】文档节点
var nodeDocument = document;
console.log(nodeDocument.nodeName, nodeDocument.nodeValue, nodeDocument.nodeType,nodeDocument.nodeType==Node.DOCUMENT_NODE);//#document null 9 true

//【10】文档类型节点
var nodeDocumentType = document.firstChild;
console.log(nodeDocumentType.nodeName, nodeDocumentType.nodeValue, nodeDocumentType.nodeType,nodeDocumentType.nodeType==Node.DOCUMENT_TYPE_NODE);//html null 10 true

//【11】DocumentFragment文档片段类型在文档中没有对应的标记，是一种轻量级的文档。
var nodeDocumentFragment = document.createDocumentFragment();
console.log(nodeDocumentFragment.nodeName, nodeDocumentFragment.nodeValue, nodeDocumentFragment.nodeType,nodeDocumentFragment.nodeType == Node.DOCUMENT_FRAGMENT_NODE)//#document-fragment null 11 true

//【12】NOTATION_NODE DTD中声明的符号
</script>
</body>
</html>

可参考链接

元素属性

HTML元素由一个标签和一组称为属性(attribute)的名/值对组成。

HTML标准属性

HTMLElement定义了通用的HTTP属性，如id、lang、dir，以及事件处理程序，如onclick。
标准属性有以下特点：

HTML非标准属性

Element类型定义了getAttribute()和setAttribute()方法来查询和设置非标准的HTML属性，也可用于查询和设置XML文档的属性。
非标准属性有以下特点：

var image = document.images[0];
var width = parseInt(image.getAttribute("WIDTH"));  // 需要调用parseInt()将字符串转换成int
image.setAttribute("class", "thumbnail");           // "class"属性

数据集属性(dataset)

有时候我们需要在HTML元素上绑定一些额外的信息，可以使用getAttribute()和setAttribute()来读和写非标准属性的值，但为此付出的代价是文档将不再是合法有效的HTML。
HTML5提供了一个解决方案。在HTML5文档中，任意以"data-"为前缀的小写的属性名字都是合法的。
HTML5还在Element对象上定义了dataset属性。该属性指代一个对象，它的各个属性对应于去掉前缀的data-属性。带连字符的属性对应于驼峰命名法属性名：data-jquery-test属性就变成dataset.jqueryTest属性。

attributes属性

Node类型定义了attributes属性。针对非Element对象的节点，该属性为null。对于Element对象，attributes属性是实时只读的类数组对象，它代表元素的所有属性。Attr对象是一类特殊的Node.

document.body.attributes[0];        // <body>元素的第1个属性
document.body.attributes.bgcolor;   // <body>元素的bgcolor属性
document.body.attributes["ONLOAD"]; // <body>元素的onload属性

元素内容

innerHTML&outerHTML属性

如，对于<p>元素：<p>This is a <i>simple</i> document</p>
innerHTML属性的值为：This is a <i>simple</i> document
outerHTML属性的值为：<p>This is a <i>simple</i> document</p>

textContent属性

有时需要查询纯文本形式的内容，或在文档中插入纯文本，则可以使用Node的textContent属性来实现。
textContent属性就是将指定元素的所有后代Text节点简单地串联在一起。
如，对于<p>元素：<p>This is a <i>simple</i> document</p>
textContent属性的值为：This is a simple document
注意：在IE中要使用innerText属性来代替。

// 实现textContent
function textContent(e) {
    var child, type, s = "";
    for(child = e.firstChild; child != null; child = child.nextSibling) {
        type = child.nodeType;
        if(type === 3 || type === 4)    // Text和CDATASection节点
            s += child.nodeValue;
        else if(type === 1)             // 递归Element节点
            s += textContent(child);
    }
    return s;
}

创建、插入和删除节点

创建节点

// 从指定的URL，异步加载和执行脚本
function loadasync(url) {
    var head = document.getElementsByTagName("head")[0];
    var s    = document.createElement("script");
    s.src    = url;
    head.appendChild(s);
}

<!DOCTYPE html>
<html>

<script>
function myFunction()
{
    var itm=document.getElementById("myList2");
    var cln=itm.cloneNode(true);    // 深拷贝
    document.body.appendChild(cln);
}
</script>

<body>

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>

<button onclick="myFunction()">添加一个列表</button>

</body>
</html>

注意：拷贝出来的元素id与原始的相同，但通过getElementById()获取到的将还是原始的元素，而不是拷贝出来的元素。

插入节点

Node的方法appendChild()或insertBefore()方法可以实现将一个节点插入到已知文档中。
appendChild()将新节点插入到最后，作为该节点的最后一个子节点。
insertBefore()则将新节点插入到指定的子节点之前。
注意：如果使用上述方法将已存在的一个节点再次插入，那么节点将自动从它原有的位置删除并在新的位置重新插入（类似于先删除后新增）。

删除和替换节点

node.parentNode.removeChild(node);  // 删除自身节点

node.parentNode.replaceChild(document.createTextNode("[ REPLACED ]"), node);    // 替换自身节点

// 使用innerHTML实现outerHTML属性
( function() {
    // 如果outerHTML存在，则直接返回
    if(document.createElement("div").outerHTML) return;
    
    // get方法
    function outerHTMLGetter() {
        var container = document.createElement("div");  // 创建一个虚拟节点
        container.appendChild(this.cloneNode(true));
        return container.innerHTML;
    }
    
    // set方法
    function outerHTMLSetter(value) {
        var container = document.createElement("div");  // 创建一个虚拟节点
        container.innerHTML = value;
        // 将value的所有节点插入到this节点之前
        // NOTE: 由于同一个documnet中，firstChild插入后，原始位置上的节点将被删除
        while(container.firstChild) 
            this.parentNode.insertBefore(container.firstChild, this);
        // 删除当前节点
        this.parentNode.removeChild(this);
    }
    
    // 设置outerHTML属性的getter和setter
    if(Object.defineProperty) {
        Object.defineProperty(Element.prototype, "outerHTML", {
                                get: outerHTMLGetter,
                                set: outerHTMLGetter,
                                enumerable: false,
                                configurable: true
                              });
    } else {
        Element.prototype._defineGetter_("outerHTML", outerHTMLGetter);
        Element.prototype._defineSetter_("outerHTML", outerHTMLSetter);
    }
}());

DocumentFragment节点

// 倒序排列节点node的子节点
function reverse(node) {
    var f = document.createDocumentFragment();
    // NOTE: 给f添加一个节点，该节点会自动从node中删除
    while(node.lastChild) f.appendChild(node.lastChild);
    
    // 将临时节点f的所有子节点全部移回到node中
    node.appendChild(f);
}
上一篇下一篇

猜你喜欢

热点阅读