JavaScript高级-unit10 DOM

时间 2019-12-09

标签 javascript 高级 unit10 unit dom 栏目 JavaScript 繁體版

原文原文链接

简介

DOM描述了一个层次化的节点树，容许开发人员添加、移除和修改页面。javascript

节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的全部内容都是节点：html

整个文档是一个文档节点
每一个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每一个 HTML 属性是属性节点
注释是注释节点

每一个节点都有一个nodeType属性，用于代表节点的类型。并非全部节点类型都受到Web浏览器支持，最经常使用的事元素和文本节点。java

Node.ELEMENT_NODE(1); // 元素
Node.ATTRIBUTE_NODE(2); // 属性
Node.TEXT_NODE(3); // 文本
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8); // 注释
Node.DOCUMENT_NODE(9); // 文档
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12);node

由于IE没有公开Node类型的构造函数，因此肯定节点类型以下：跨域

// nodeType 是只读的
if (someNode.nodeType == 1) {
    alert("Node is an element");
}

Node类型

一、nodeName 和 nodeValue 属性数组

// 使用前先检查节点类型，确认是不是一个元素，对于元素节点
// nodeName 保存的是标签名（节点的名称），nodeValue = null （节点的值）;
if (someNode.nodeType == 1) {
    value = someNode.nodeName;    // nodeName的值是元素的标签名
}

二、节点关系浏览器

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

是一个数组对象，保存一组有序的节点，能够经过位置访问节点。有length属性，但不是数组实例。
基于DOM结构动态执行查询结果，结构的变化可以自动反应着NodeList对象中。
能够用 item() 方法访问其中的节点。

var firstChild  = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1); 

// 将NodeList对象转化为数组
function convertToArray(nodes) {
    var array = null;
    try {
        array = Array.prototype.slice.call(node,0);    // 针对非 IE 浏览器
    } catch {
        array = new Array();
        for (var i=0, len=nodes.length; I < len; i++) {
            array.push(nodes[I]);
        }
    }
    return array;
}

parentNode 属性：指向文档树中的父节点
父节点的 firstChild 和 lastChild 属性指向第一个和最后一个
previousSibling: 上一个同胞节点
nextSibling: 下一个同胞节点
hasChildNodes(): 节点包含一个或多个子节点返回 true
ownerDocument: 指向表示整个文档的文档节点
document.documentElement - 所有文档
document.body - 文档的主体

三、操做节点app

如下方法都须要取得父节点（使用 parentNode 属性）dom

appendChild(): 向 childNodes 列表末尾添加一个节点。若是已存在，从原来位置移动到新位置
insertBefore(): 插入节点，接受两个参数，要出入的节点和参考节点（谁的前面）
replaceChild(): 替换节点，接受两个参数，要插入的节点和要替换的节点
removeChild(): 移除节点

如下两个方法是全部类型的节点都有

cloneNode(): 建立节点的副本，参数为true，复制节点及整个子节点树，false只复制节点自己，没有父节点，须要用上面方法添加到文档中
normalize(): 处理文档树中的文本节点。可能会出现文本节点不包含文本，或者接连出现两个文本节点。调用这方法，若是找到空文本，则删除；找到相邻文本节点，则合并为一个

Document 类型

JavaScript经过 Document 类型表示文档。在浏览器中，document 对象是 HTMLDocument（继承自 Document 类型）的一个实例，表示整个HTML页面。并且 document 也是 window 对象的一个属性，所以能够将其做为全局对象来访问。经过这个文档对象，不只能够取得与页面有关的信息，并且还能操做页面的外观及其底层结构。

nodeName 的值为 “#document”;
nodeValue 的值为 null；
parentNode 的值为 null；
ownerDocument 的值为 null；
其子节点多是一个 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction 或 Comment。

一、文档的子节点

内置的访问子节点的快捷方式：

documentElement 属性：始终指向HTML页面的<html>元素
childNodes 列表访问文档元素

做为内置的HTMLDocument对象，document 对象有一个 body 属性，直接指向 <body> 元素。

// 全部浏览器都支持
var html = document.documentElement;    // 取得对<html>对引用
var body = document.body;    // 取得对<body>对引用

用不着在 document 对象上调用 appendChild()、removeChild()和replaceChild()方法，由于文档类型（若是存在）是只读的，并且它只能有一个元素子节点（一般早存在）。

二、文档信息

document 对象还有一些标准的Document对象所没有的属性。这些对象表现的网页的一些信息。

// 取的文档标题
var originalTitle = document.title;
// 设置文档标题
document.title = "New page title";

// 取得完成的URL
var url = document.URL;
// 取的域名
var domain = document.domain;
// 取的来源页面的URL
var referrer = document.referrer;

只有 domain 能够设置，若是包含子域名，不能设置为URL中不包含的域。
因为跨域安全限制，来自不一样子域的页面没法经过 Javascript 通讯，能够将每一个页面的document.domain设置为相同值，就能够互相访问对方包含的JavaScript对象了。
若是域名一开始是“松散的”，就不能设为“紧绷的”，设为“wrox.com”，就不能设为“p2p.wrox.com”。

三、查找元素

取得特定的某个或某组元素的引用，而后执行一些操做。

getElementById(): 要获取的元素 id，返回第一个出现的，若是没找到返回 null
getElementsByTagName(): 参数（要取得元素的标签名），返回包含零个或多个元素的 NodeList。在HTML文档中，返回一个 HTMLCollection 对象，做为动态集合。传入“*”，取得文档中的全部元素
getElementsByName(): 返回给定 name 特性的全部元素。最经常使用取得单选按钮（单选按钮必须具备相同的 name 特性）

// 取得页面中全部的<img>元素，并返回一个HTMLCollection
var images = document.getElementsByTagName("img");
alert(images.length);    // 图像的数量
alert(images[0].src);    // 第一个图像元素的src特性
alert(images.item(0).src);    // 第一个图像元素的src特性

HMTLCollection 对象

有一个 namedItem() 方法，能够经过元素的 name 特性取得集合中的项
支持按名称访问项

<img src="my image.gif" name="myImage">
var myImage = images.namedItem("myImage");

var myImage = images["myImage"];

四、特殊集合

除了属性和方法，document 对象还有一些特殊的集合，都是 HTMLCollection对象，

document.anchors ,包含文档中全部带 name 特性的 <a> 元素；
document.applets ,全部的 <applet>元素，不建议使用；
document.forms ,文档中全部的 <form> 元素；
document.images ,文档中全部的 <img> 元素；
document.links ,文档中全部带 href 特性的 <a> 元素。

五、DOM一致性检测

document.implementation 属性提供相应信息和功能的对象，与浏览器对 DOM 的实现直接对应。
规定一个方法：hasFeature（），接受两个参数：要检测的 DOM 功能名称及版本号

var hasXmlDom = document.implementation.hasFeature("XML","1.0");

六、文档写入

write(): 原样写入
writeln(): 在字符串的末尾添加一个换行符（n）
open(): 打开网页的输出流
close(): 关闭网页的输出流

// 用 write() 和 written() 动态地包含外部资源
<html>
<head>
    <title>document.write() Example</title>
</head>
<body>
    <script type="text/javascript">
        document.write("<script type=\"text/javascript\" src=\"file.js\">" +
            "<\/script>");
    </script>
</body>

严格型 XHTML 文档不支持文档写入。

Element 类型

Element 类型用于表现 XML 或 HTML 元素，提供了对元素标签名、字节点及特性的访问。

nodeType 的值为 1；
nodeName 的值为元素的标签名；
nodeValue 的值为 null；
parentNode 多是 Document 或 Element；
其子节点多是 Element、Text、Comment、ProcessingInstruction、CDATASection 或 EntityReference；
访问元素标签名，能够是使用 nodeName 属性或者 tagName 属性。

<div id="myDiv"></div>
var div = document.getElementById("myDiv");
alert(div.tagName);    // "DIV"
alert(div.tagName == div.nodeName);    // true

在 HTML 中，标签名始终都以所有大写表示；而在 XML（有时包括 XHTML），标签名始终与源代码中的保持一致。

if (element.tagName.toLowerCase() == "div") {    // 适用于任何文档
    // ...
}

一、HTML 元素

全部的 HTML 元素都由 HTMLElement 类型表示。每一个 HTML 元素都存在的下列标准特性。

id，元素中文档中的惟一标识符
title，有关元素的附加说明信息，通常经过工具提示条现实出来
lang，元素内容的语言代码
dir，语言的方向，值为“ltr”（左到右），或“rtl”（右到左）
className，与元素的 class 特性对应，即为元素指定的CSS类。（是 ECMAScript 的保留字）

// 上述这些属性均可以用来取得或修改相应的特性值
<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>
var div = document.getElementById("myDiv");
alert(div.id);
div.id = "someOtherId";
alert(div.className);
div.className = "ft";

二、取得特性

每一个元素都有一或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。

getAttribute(): 取得特性，传递的特性名与实际的特性名相同，能够是自定义的特性。
setAttribute(): 设置特性。设置的特性名统一转为小写。
removeAttribute(): 不只会清除特性值，也会从元素中完成删除特性。

有两类特殊的特性：

style: 经过getAttribute()访问返回特性值中包含的文本，经过属性来访问返回一个对象。
onclick: 经过 getAttribute()返回相应代码的字符串，访问属性时返回函数。

div.setAttribute("id","someOtherId");

三、attributes 属性

attributes 属性包含一系列节点，每一个节点的 nodeName 就是特性的名称，而节点的 nodeValue 就是特性的值。
包含一个 NamedNodeMap，“动态”集合。

getNamedItem()：返回 nodeName 等于 name 的节点
removeNamedItem()：从列表中移除 nodeName 属性等于 name 的节点
setNamedItem()：向类表添加节点，以节点的 nodeName 属性为索引
item(pos)：返回位于数字pos 的节点

var id = element.attributes.getNamedItem("id").nodeValue;
var id = element.attributes["id"].nodeValue;

遍历元素的特性，attributes 属性能够派上用场。

function outputAttributes(element) {
    var pairs = new Array(),
        attrName,
        attrValue,
        y,
        len;
     
     for（y = 0, len = element.attributes.length; y < len; y++) {
         attrName = element.attributes[y].nodeName;
         attrValue = element.attributes[y].nodeValue;
         if (element.attributes[y].specified) {
             pairs.push(attrName + "=\"" + attrValue + "\"");
         }
     }
     return pairs.join(" ");
}

// attributes 对象的中的特性，不一样浏览器返回的顺序不一样
// IE7 及更早版本会返回 HTML 元素中全部可能的特性，包括没有指定的特性。每一个特性节点都有一个 specified 的属性，true：在 HTML 中指定来相应特性，要么能够经过 setAttribute() 方法设置了该特性。

四、建立元素

// 接受一个参数，即要建立元素的标签名
var div = document.createElement("div");

// 也为新元素设置了 ownerDocument 属性，还能够操做元素的特性，添加更多的子节点
div.id = "myNewDiv";
div.className = "box";

// 新元素添加到文档树中 appendChild()、insertBefore()、replaceChild()
document.body.appendChild(div);

在 IE 中能够另外一种方法，传入完整的元素标签

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

五、元素的子节点

不一样浏览器看待节点是不一样的。
若是要经过 childNodes 属性遍历子节点，不要忘了浏览器之间的区别，一般先检查一下 nodeType 属性

for (var y = 0, len = element.childNodes.length; y < len; y++) {
    // 表示是元素节点
    if (element.childNodes[y].nodeType == 1) {
        // ...
    }
}

经过特定的标签名取得子节点或后代节点

var ul = document.getElementById("myList");
var items = ul.getElementsByTagName("li");

Text 类型

文本节点由 Text 类型表示，包含纯文本内容，即包含转义后的 HTML 字符，但不包含 HTML 代码。

nodeType 的值为 3；
nodeName 的值为 “#text”；
nodeValue 的值为节点所包含的文本；
parentNode 是一个 Element；
不支持（没有）子节点；

经过 nodeValue 属性或 data 属性访问 Text 节点包含的文本。

appendData(text)：将 text 添加到节点的末尾。
deleteData(offset, count)：从 offset 指定的位置开始删除 count 个子符。
insertData(offset, text)：在 offset 指定的位置插入 text。
replaceData(offset, count, text)：用 text 替换从 offset 指定的位置开始到 offset + count 为止的文本。
splitText(offset)：从 offset 指定的位置将当前文本节点分为两个文本节点。
substringData(offset, count)：提取从 offset 指定的位置开始到 offset + count 为止的字符串。

在默认状况下，每一个能够包含内容的元素最多只能有一个文本节点，并且必须确实有内容存在。

// 没有内容，也就没有文本节点
<div></div>

// 有空格，于是有一个文本节点
<div> </div>

// 有内容，于是有一个文本节点
<div>hello world!</div>

// 访问，先取得引用
var textNode = div.firstChild;  // 获取 div.childNodes[0]
textNode.nodeValue = "some other message";

在修改文本节点时，此时的字符串会经 HTML 编码（转义）。

一、建立文本节点

document.createTextNode()：建立文本节点，接受一个参数，要插入的文本，也会进行转义。

var element = document.createElement("div");
element.className = "message";

var textNode = document.createTextNode("Hello world");
element.appendChild(textNode);

var anotherTextNode = document.createTextNode("Yippee");
element.appendChild(anotherTextNode);

document.body.appendChild(element);

若是两个文本节点是相邻的同胞节点，那么这两个节点中的文本会连起来显示，中间不会有空格。

二、规范化文本节点

normalize()：在一个包含两个或多个文本节点的父元素上调用，则会将全部文本节点合并成一个节点。

Comment 类型

nodeType 的值为 8；
nodeName 的值为 “#comment”;
nodeValue 的值是注释的内容；
parentNode 多是 Document 或 Element；
不支持（没有）子节点。

和 Text 类型类似，能够经过 nodeValue 或 data 属性来取得注释的内容。

<div id="myDiv"><!-- A comment --></div>

// 经过父节点访问
var div = document.getElementById("myDiv"); 
var comment = div.firstChild;
alert(comment.data);

使用 document.createComment() 为其传递注释文本也能够建立注释节点。

var comment = document.createComment("A comment");

若是要访问注释节点，必定要保证他们是 <html> 元素的后代。

DocumentFragment 类型（文档片断）

在文档中没有对应的标记；
nodeType 的值为 11；
nodeName 的值为 “#document-fragment”;
nodeValue 的值为 null；
parentNode 的值为 null；

不能把文档片断直接添加到文档中，但能够做为一个“仓库”，保存未来可能添加到文档中的节点。若是将文档中的节点添加到文档片断中，就会从文档树移除该节点，文档片断自己不会成为文档树的一部分。

// 建立文档片断 
var fragment = document.createDocumentFragment();

// 为 ul 元素添加3个列表项
var ul = document.getElementById("myList");
var li = null;

for (var i=0; i < 3; i++) {
    li = document.createElement("li");
    li.appendChild(document.createTextNode("Item " + (i+1)));
    fragment.appendChild(li);
}

ul.appendChild(fragment);

Attr 类型

元素的特性在 DOM 中以 Attr 类型来表示。特性就是存在于元素的 attributes 属性中的节点。

nodeType 的值 2；
nodeName 的值是特性的名称；
nodeValue 的值是特性的值；
parentNode 的值为 null；
在 HTML 中不支持子节点；
在 XML 中子节点能够是 Text 或 EntityReference。

尽管是节点，但不是 DOM 文档树但一部分。有3个属性：

name：特性名称（与 nodeName 相同）；
value：特性的值（与 nodeValue 的值相同）；
specified：一个布尔值，区别特性在代码中是指定的，仍是默认的。

// 建立
var attr = document.createAttribute("align");
attr.value = "left";
// 添加到元素中
element.setAttributeNode(attr);