JavaScript学习 7、DOM

时间 2019-12-10

原文原文链接

DOM（文档对象模型）是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树。容许开发人员添加、移除、修改页面的某一部分。javascript

节点层次

文档节点是每一个文档的根节点，文档元素是文档的最外层元素，文档中其余说有的元素都包含在文档元素中，每一个文档只能有一个文档元素，在HTML 中，文档元素始终是<html> 元素，在XML 中没有预约义的元素，所以任何元素均可能成为文档元素。html

每一段标记均可以经过树中的一个节点来表示：HTML 元素经过元素节点表示，特性（attribute）经过特性节点表示，文档类型经过文档类型节点表示，而注释则经过注释节点表示，总共有12 种节点类型。java

1.Node类型node

DOM1 级定义了一个Node 接口，该接口将由DOM中全部节点类型实现。这个Node在JavaScript中是做为Node 类型实现的；JavaScript 中全部节点都继承自Node 类型，所以全部节点类型都共享相同的基本属性和方法。编程

属性数组

每一个节点都有一个nodeType 属性，用于代表节点的类型。节点类型由在Node类型中定义的下列 12 个数值常量来表示，任何节点类型必居其一。浏览器

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)

能够用节点的nodeType属性和上面的常量比较，若是相等，则说明节点是该类型的元素。因为IE没有公开Node类型的构造函数，因此为了确保跨浏览器兼容，最好仍是将nodeType属性与数字值进行比较。缓存

if(someNode.nodeType == 1){  //Node.ELEMENT_NODE
    alert("Node is an element");
}

可使用nodeName 和 nodeValue 者两个属性来了解节点的具体信息，对于元素节点，nodeName中保存的始终都是元素的表签名，而nodeValue 则始终为null。app

每个节点都保存者一个childNodes 属性，其中保存着一个NodeList对象。NodeList是一种相似于数组的对象，用于保存一组有序的节点。NodeList 对象的独特之处在于，它其实是基于DOM结构动态执行查询的结果，所以DOM结构的变化可以自动反应在NodeList 对象中。dom

可使用方括号或者item方法来访问NodeList中的对象。

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

可使用Array.prototype.slice()方法将NodeList转换成普通的ArrayList对象。

var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes, 0);

每一个节点还有 prentNode、previousSibling、nextSibling、firstChild、lastChild等属性。顾名思义，再也不一一介绍。

方法

节点的关系指针都是只读的，因此DOM提供了一些操做节点的方法。其中最经常使用的是appendChild()，用于向childNodes 列表的末尾添加一个节点。返回新增的节点。

使用insertBefore()方法能够把节点方法childNodes 列表中某个特定的位置上。接收两个参数：要插入的节点和做为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个兄弟节点(previousSibling)，同时被方法返回。若是参照节点是null，则insertBefore() 与 appendChild() 执行相同的操做。

replaceChild()方法接收两个参数：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。

removeChild()方法接收一个参数，即要移除的节点。被移除的节点将成为方法的返回值。

cloneNode() 用于建立调用这个方法的节点的一个彻底相同的副本。该方法接收一个布尔值参数，表示是否执行深复制。

2.Document类型

JavaScript 经过Document 类型表示文档，在浏览器中，document 对象是HTMLDocument的一个实例，表示整个HTML页面。并且document对象是window对象的一个属性，所以能够做为全局对象来访问。

document 的 nodeType 为9， nodeName 为“#document”，nodeValue 为null parentNode 为null，ownerDocument为null。

Document 节点的子节点能够是DocumentType、Element、ProcessingInstruction 或 Comment，但仍是有两个内置的访问其子节点的快捷方式。

第一个就是documentElement 属性，该属性始终指向 HTML 页面中的<html> 元素。另外一个就是body 属性，直接指向<body> 元素。

document 对象有一些标准的Document 对象所没有的属性。这些属性提供了document 对象所表现的页面的一些信息。

第一个属性是 title，包含者<title> 元素中的文本----显示在浏览器窗口的标题栏或标签页上。经过这个属性能够取得当前页面的标题，也能够修改当前页面的标题并反应在浏览器的标题栏中。

URL属性中包含页面完整的URL，domain 属性中包含页面的域名，而referrer 属性中则保存着联街道当前页面的哪一个页面的URL。在没有来源页面的状况下，referrer 属性中可能会包含空字符串。全部这些信息都存在于请求的HTTP 头部，只不过是经过这些属性让咱们可以在JavaScript中访问他们而已。

document提供了两个方法用于查找某个或某组元素的引用：getElementById() 和 getElementsByTagName()。

getElementsByTagName() 函数返回的是包含0或多个元素的 NodeList。在HTML中，这个方法会返回一个HTMLCollection 对象，做为一个动态集合，该对象与NodeList 很是相似。

getElementsByName() 方法是HTMLDocument 特有的方法，返回带有给定name 特性的全部元素。

document对象还有一些特殊的集合，这些集合都是HTMLCollection对象，为访问文档经常使用部分提供了快捷方式。

document.anchors，包含文档中全部带name特性的<a> 元素。
document.forms，包含文档中全部的<form> 元素。与 document.getElementsByTagName("form") 获得的结果相同。
document.images，包含文档中全部的<img> 元素，与 document.getElementsByTagName("img") 获得的结果相同。
document.links，包含文档中全部带href特性的<a>元素。

3.Element类型

nodeType 值为 1
nodeName 值为元素表签名
nodeValue 值为 null
parentNode 多是 Document或 Element
其子节点多是 Element、Text、Comment、ProcessingInstruction、CDATASection 或 EntityReference。

要访问元素的标签名，可使用nodeName属性，也可使用tagName 属性；这两个属性会返回相同的值。

全部的HTML元素都由HTMLElement 类型表示，不是直接经过这个类型也是经过它的子类型来表示。HTMLElement 类型直接继承自Element 并添加了一些属性。添加的这些属性分别对应于每一个HTML都存在的下列标准特性：

id，元素在文档中的惟一标识符
title，有关元素的附加说明信息，通常经过工具提示条显示出来
lang，元素内容的语言代码，不多使用
dir，语言的方向，值为“ltr”（left-to-right，从左向右）或“rtl”（right-to-left，从右向左），也甚少使用。
className，与元素class特性对应，即为元素制定的CSS 类。没有将这个属性命名为class，是由于class 是ECMAScript的保留字。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>study</title>
    </head>
    <body>
    <div id="myDiv" class="bd" title="Body text" lang="en" dir="rtl">good morning</div>
        <script type="text/javascript">
        var div = document.getElementById("myDiv");
        alert("id=" + div.id + ", class=" + div.className + ", title=" + div.title + ", lang=" + div.title + ", dir=" + div.dir);  //id=myDiv, class=bd, title=Body text, lang=Body text, dir=rtl
        </script>
    </body>
</html>

getAttribute()方法也能够取得属性内容，也能够取得自定义的特性。参数传递属性名称，不去分大小写。

在经过JavaScript 以编程方式操做DOM 时，开发人员常常不使用getAttribute()，而是只使用对象的属性。只有在取得自定义特性值的状况下，才会使用getAttribute() 方法。

setAttribute() 方法能够为对象设置属性，也能够操做自定义特性，经过这个方法设置的特性名会被统一转换成小写形式。

removeAttribute() 方法用于完全删除元素的特性。调用这个方法不只会清除特性的值，并且也会从元素中彻底删除特性。

Element 类型是使用attributes 属性的惟一一个DOM 节点类型。attributes 属性中包含一个NamedNodeMap，是一个动态集合。元素的每个特性都是一个Attr节点表示，每一个节点都保存在NamedNodeMap对象中。NamedNodeMap对象拥有下列方法：

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

attributes属性中包含一系列节点，每一个节点的nodeName 就是特性的名称，而节点的 nodeValue 就是特性的值。要取得元素的id特性，可使用如下代码。

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

var id = element.attributes["id"].nodeValue;

element.attributes["id"].nodeValue = "newId";

通常来讲，由于attributes 的方法不够方便，所以开发人员更多的会使用 getAttribute()、setAttributes()、removeAttributes()方法。

建立元素，使用document.creatElement()能够建立新元素，这个方法只接收一个参数，即要建立元素的标签名，

var div = document.createElement("div");
div.id = "myNewDiv";
div.className = "box";

4.Text类型

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

能够经过nodeValue 属性或者 data 属性来访问Text 节点中包含的文本，这两个属性中包含的值相同。对nodeValue的修改也会经过data反映出来，反之亦然。

可使用下列方法来操做节点中的文本。

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 为止处的字符串。

文本节点还有一个length 属性，保存着节点中字符的数目。

建立文本节点，可使用 document.createTextNode()建立新文本节点，这个方法接受一个参数----要插入的文本。

DOM操做技术

操做表格

<table> 元素是 HTML中最复杂的结构之一，要想建立表格，通常都必须设计表示表格行、单元格、表头等方面的标签。因为涉及的标签多，所以使用核心的DOM方法建立和修改表格每每都免不了要编写大量的代码。为了方便构建表格，HTML DOM 还为<table>、<tbody>和<tr>元素添加了一些属性和方法。

为<table>元素添加的属性和方法：

caption：保存着对<caption>元素的指针；
tBodies：是一个<tbody> 元素的HTMLCollection。
tFoot：保存着对 <tfoot>元素的指针；
tHead：保存着对<thead>元素的指针；
rows：是一个表格中全部行的HTMLCollection；
createTHead()：建立<thead> 元素，将其放到表格中，返回引用；
createTFoot()：建立<tfoot> 元素，将其放到表格中，返回引用。
createCaption()：建立<caption> 元素，将其放到表格中，返回引用。
deleteTHead()：删除<thead>元素。
deleteTFoot()：删除<tfoot>元素。
deleteCaption()：删除<caption> 元素。
deleteRow(pos)：删除指定位置的行。
insertRow(pos)：向rows集合中的制定位置插入一行。

为<tbody> 元素添加的属性和方法：

rows：保存着<tbody>元素中的行的HTMLCollection。
deleteRow(pos)：删除指定位置的行。
insertRow(pos)：向rows集合中的制定位置插入一行，返回对新插入行的引用。

为<tr>元素添加的属性和方法：

cells：保存着<tr>元素中单元格的HTMLCollection。
deleteCell(pos)：删除制定位置的单元格。
insertCell(pos)：向cells集合中的指定位置插入一个单元格返回对新单元格的引用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>study</title>
    </head>
    <body>
    
        <script type="text/javascript">
        var table = document.createElement("table");
        table.border = 1;
        table.width = "100%";

        //create tbody
        var tbody = document.createElement("tbody");
        table.appendChild(tbody);

        //first row
        tbody.insertRow(0);
        tbody.rows[0].insertCell(0);
        tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1, 1"));
        tbody.rows[0].insertCell(1);
        tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 1, 2"));

        //second row
        tbody.insertRow(1);
        tbody.rows[1].insertCell(0);
        tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 2, 1"));
        tbody.rows[1].insertCell(1);
        tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2, 2"));

        document.body.appendChild(table);
        
        </script>
    </body>
</html>

NodeList

NodeList、NamedNodeMap 和 HTMLCollection 三个集合都是动态的集合，每当文档结构发生变化是，他们都会更新。所以他们始终都会保存着最新、最准确的信息。从本质上说，全部NodeList对象都是在访问DOM文档时实时运行查询。

var divs = document.getElementsByTegName("div"), i, div;

for(i = 0; i < divs.length; i++){
    div = document.createElement("div");
    document.body.appendChild(div);
}

因为divs是动态集合，因此上面代码会致使无限循环，解决方法是把divs.length保存到另外一个变量中进行缓存。

通常来讲，应该尽可能减小访问NodeList的次数。

小结

DOM是语言中立的 API，用于访问HTML 和XML 文档。DOM1级将HTML和XML 文档形象地看作一个层次化的节点树，可使用JavaScript来操做这个节点树，进而改变底层文档的外观和结构。

最基本的节点类型是Node，用于抽象地表示文档中一个独立的部分；全部其余类型都继承自Node。
Document 类型表示整个文档，是一组分层节点的根节点，在JavaScript 中， document对象是Document的一个实例。使用document 对象，有不少中方式能够查询和取得节点。
Element 节点表示文档中全部HTML 或 XML 元素，能够用来操做这些元素的内容和特性。
另外还有一些节点类型，分别表示文本内容、注释、文档类型、CDATA区域和文档片断。