javascript--DOM講解-js教程-PHP中文網

DOM（文件物件模型）是針對HTML和XML文件的一個API（應用程式介面）。 DOM描繪了一個層次變化的節點樹，讓開發人員可以新增、移除和修改頁面的某一部分。

一、節點層次

在HTML頁面中，文件元素總是元素。

1. Node類型

JavaScript中的所有節點類型都繼承自Node類型，因此所有節點類型都共用相同的基本屬性和方法。
（1）nodeType屬性：用於表明節點的類型。

NO2NodeNode. Node. Node.COMMENT_NODE8Node.DOCUMENT_NODE 9Node.DOCUMENT_TYPE_NODE10Node.DOCUMENT_FRAGMENT_NODE111115要注意的是，在IE中不支援常數

if(someNode.nodeType === 1){    // 不使用Node.ELEMENT_NODE
    console.log("node is an element");
}123

登入後複製

（2）nodeName和nodeValue

if(someNode.nodeType === 1){    var name = someNode.nodeName,   // 元素的标签名        value = someNode.nodeValue; // null
    console.log(name, value);
}12345

登入後複製

文件中所有節點之間都存在著這樣或那樣的關係。節點間的各種關係可以用傳統的家族關係來描述，相對於把文檔樹比喻成。說明

常數	值
Node.ELEMENT_NODE	1
Node.TEXT_NODE	3
Node.CDATA_SECTION_NODE	4
Node.ENTITY_REFERENCE_NODE	5
Node.ENTITY_NODE	6





（3）節點關係	家譜
	屬性

childNodes

直接子元素；node？

previousSibling

前一個兄弟節點firstirst 最後一個子節點ownerDocument整個文件的文檔節點Document說明：hasChildNodes()在節點包含一個或多個子節點的情況下回傳範例

<div id="content">    <p>李刚</p>    <p>ligang</p>    <p>http://www.php.cn</p></div>12345

登入後複製

var div = document.getElementById("content");console.log(div.hasChildNodes());   // trueconsole.log(div.ownerDocument); 
    // #documentvar children = div.childNodes;console.log(children[0]);    
       // <p>李刚</p>  注意：这里有可能是#text，格式化回车缩进导致！！console.log(children.item(1)); 
        // <p>ligang</p>var p1 = div.firstChild;console.log(p1.parentNode);      
           // <div id="content">…</div>console.log(p1.previousSibling);  
             // nullconsole.log(p1.nextSibling);     
                // <p>ligang</p>123456789101112

登入後複製

（4）操作節點因為關係指標是只讀的，所以DOM提供了一些操作節點的方法。方法

nextSibling	後一個兄弟節點



hasChildNodes()在節點包含一個或多個子節點的情況下回傳🜎實例；其是基於DOM結構動態執行查詢的結果，因此DOM結構的變化能夠自動反應在NodeList物件中。可以透過方括號，也可以使用item()方法存取NodeList中的節點。
	：

說明

appendChild(newDom)

向Def節點作為參照節點的同胞節點，同時返回該插入節點

replaceChild(newDom, 被替換的節點)
新插入的節點將佔據被替換節點的位置
removeChild(要移除的節點)移除的節點，被移除的節點仍然為穩當所有，只是在文件中沒有了位置

注意：并不是所有节点都有子节点，如果在不支持子节点的节点上调用了上述方法，将会导致错误发生。
示例：将blog元素移动到content中

<!-- 执行前 --><div id="content">    <p>李刚</p></div><p id="blog">http://www.php.cn</p>12345

登入後複製

var div = document.getElementById("content"),
    p = document.getElementById("blog");div.appendChild(p);123

登入後複製

<!-- 执行后 --><div id="content">    <p>李刚</p>    <p id="blog">http://www.php.cn</p></div>12345

登入後複製

说明：如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。

示例：将blog作为content的第一个子元素，将company作为content的最后一个子元素

<!-- 执行前 --><div id="content">    <p>李刚</p></div><p id="blog">http://www.php.cn</p><p id="company">ptmind</p>123456

登入後複製

var content = document.getElementById("content"),
    blog = document.getElementById("blog"),
    company = document.getElementById("company");content.insertBefore(blog, content.childNodes.item(0)); 
    // content.firstChildcontent.insertBefore(company, null);12345

登入後複製

<!-- 执行后 --><div id="content">    <p>李刚</p>    <p id="blog">http://www.php.cn</p>    <p id="company">ptmind</p></div>123456

登入後複製

（5）其他方法

方法	说明
cloneNode(boolean)	true：复制节点及整个子节点树；false：只复制节点本身
normalize()	处理文档树中的文本节点

所有节点都有上述方法！

2. Document类型

JavaScript通过Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。而且，document对象是window对象的一个属性。

document.documentElement; // 获取对<html>的引用document.body;  // 获取对<body>的引用/* 以本人blog为例 */document.title; 
// 获取页面title信息："李刚的学习专栏 - 博客频道 - CSDN.NET"document.URL;   // 获取页面完整的URL："http://www.php.cn"document.domain;   
 // 获取页面的域名："blog.csdn.net"  document.referrer;  // 获取链接到当前页面的那个页面的URL：直接访问为空！1234567

登入後複製

技巧：由于跨域安全限制，来自不同子域的页面无法通过JavaScript通信。而通过将每个页面的document.domain设置为相同的值，这些页面就可以互相访问对方包含的JavaScript对象了。例如，在www.xxx.com中嵌入了一框架，框架内页面加载自report.xxx.com；两者不能进行访问。可以将两个页面的document.domain值都设置为xxx.com，就可以互相访问了。
需要注意的是，浏览器对domain有一限制，即如果域名开始时松散的(xxx.com)，那么不能将它再设置为紧绷的(www.xxx.com)。
（1）查找元素

方法	说明
getElementById()	只返回文档中第一次出现的元素；如果不存在带有相应id的元素，则返回null
getElementsByTagName()	返回的是包含零或多个元素的HTMLCollection对象
getElementsByName()	返回带有指定name特性的所有元素

var images = document.getElementsByTagName("img");images.item(0);images.namedItem("myImage");123

登入後複製

上述两种方式都可以通过[]代替。在后台，对数值索引会调用item()，对字符串索引会调用namedItem()。
（2）特殊集合

属性	说明
document.anchors	包含文档中所有带name特性的元素
document.applets	包含文档中所有的元素
document.forms	包含文档中所有的元素
document.images	包含文档中所有的元素
document.links	包含文字所有带href特性的元素

（3）DOM一致性检测

document.implementation.hasFeature("名称", "版本号");document.implementation.hasFeature("XML", "1.0");   // true12

登入後複製

存在实现与规范不一致的情况，所以建议除了检测hasFeature()之外，还同时使用能力检测。
（4）文档写入

方法	说明
write()	原样写入
writeln()	在字符串末尾添加有一个换行符(\n)
open()	打开网页输出流
close()	关闭网页输出流

示例：

<span>my name is:</span>
document.write("<strong>ligang</strong>");  // my name is: ligangwindow.onload = function(){
    document.write("<strong>ligang</strong>"); // ligang};12345

登入後複製

在文档加载结束后再调用document.write()，输出的内容将会重写整个页面。
write()、writeln()可以动态包含外部资源，需注意不能直接包含"</script>"，因为其会被解释为脚本块的结束。

document.write("<script type=\"text/javascript\" src=\"file.js\"><\/script>"); // ligang1

登入後複製

3. Element类型

Element类型用于表现XML和HTML元素。可以通过nodeName或tagName属性获取元素的标签名。
注意：在HTML中，标签名都以大写字母表示；在XML中，标签名始终与源代码中的保持一致。
（1）HTML元素的标准特性
示例：
<div id="myDiv" title="ligang Demo" lang="zh" dir="ltr" <br/>class="bd bf">http://www.php.cn<br/></div>

属性	说明	值
div.id	元素在文档中的唯一标识符	“myDiv”
div.title	附件说明信息，悬停展示	“ligang Demo”
div.lang	元素内容的语言代码	“zh”
div.dir	语言方向：ltr左到右；rtly右到左	“ltr”
div.className	CSS类	“bd bf”

（2）特性
获取特性：dom.getAttribute("特性名") 如不存在返回null

注意有两类特殊的特性：

style，返回CSS文本，通过属性访问则返回一个对象；
onclick等事件处理程序，返回相应代码的字符串。

示例：

<a href="javscript:;" style="background-color: grey;text-underline: none;"
   onclick="function(){console.log(&#39;la&#39;)}">http://www.php.cn/ligang2585116</a>12

登入後複製

var a = document.getElementsByTagName("a")[0];
a.getAttribute("style");    // "background-color: grey;text-underline: none;"a.style;    // CSSStyleDeclaration {0: "background-color", all: ""…}
a.getAttribute("onclick");  // "function(){console.log(&#39;la&#39;)}"1234

登入後複製

设置特性：dom.setAttribute("特性名","值")
（3）attributes属性
attributes属性中包含一个NamedNodeMap

属性	说明
dom.attributes.getNamedItem(name)	返回nodeName属性等于name的节点
dom.attributes.removeNamedItem(name)	从列表中移除nodeName属性等于name的节点
dom.attributes.setNamedItem(attr)	向列表中添加节点，以节点的nodeName属性为索引
dom.attributes.item(pos)	返回位于数字pos位置处的节点

示例：设置属性

// 方式一：示例：setNamedItem
var target = document.createAttribute("target");target.nodeValue = "_blank";a.attributes.setNamedItem(target);// 方式二：setAttribute
a.setAttribute("target", "_blank");123456

登入後複製

（5）创建元素

document.createElement("元素名/完整元素");1

登入後複製

创建新元素的同时，也为新元素设置了ownerDocument属性。
示例：创建元素并添加到文档树

var a = document.createElement("a");a.href = "http://www.php.cn";a.text = "http://blog.csdn.net/ligang2585116";document.body.appendChild(a);1234

登入後複製

（6）元素的子节点
元素可以有任意数量的子节点和后代节点。
示例：为了兼容浏览器差异

for(var i = 0, len = element.childNodes.length; i < len; i++){    if(element.childNodes[i].nodeType === 1){        // 执行某些操作
    }
}12345

登入後複製

4. Text类型

文本节点由Text类型表示，包含纯文本。纯文本可以包含转义后的HTML字符，但不能包含HTML代码。
（1）创建文本节点：document.createTextNode("文本")
（2）规范化文本节点：在一个包含两个或多个文本节点元素上调用normalize()，则将会所有文本节点合并成一个节点。
（3）分割文本节点：将一个文本节点分成两个文本节点，按指定的位置分割nodeValue值。
示例：规范化文本节点

var div = document.getElementById("content");var textNode = document.createTextNode("Hello"),
    anotherNode = document.createTextNode("Ligang");div.appendChild(textNode);div.appendChild(anotherNode);console.log(div.childNodes.length);
     // 2div.normalize();console.log(div.childNodes.length); 
     // 1var newNode = div.firstChild.splitText(5);  
     // "Ligang"console.log(div.childNodes.length); // 212345678910

登入後複製

5. Comment类型

注释在DOM中是通过Comment类型来表示的。
Comment类型与Text类型继承自相同的基类，因此它拥有除了splitText()之外的所有方法，当然也可通过nodeValue或data属性来取得注释的内容。

6. DocumentFragement类型

DocumentFragement类型中没有对应的标记，DOM规定文档片段是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。可以当做“仓库”使用。
示例：

var fragment = document.createDocumentFragment();var li = null;for(var i = 0; i < 5; i++){
    li = document.createElement("li");
    li.appendChild(document.createTextNode("Item "+ (i+1)));
    fragment.appendChild(li);
}// 文档片段的所有子节点都被删除并转移到<ul>元素中document.getElementById("myUl").appendChild(fragment);123456789

登入後複製

7. 其他类型

CDATASection类型、DocumentType类型很少用到，这里不再赘述。

二、DOM操作技术

1. 动态脚本

在元素添加到页面之前，是不会下载外部文件的。（不同于image）
相关内容请查看：事件:事件类型-UI事件

示例：动态加载JavaScript文件

function loadScript(url){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);}123456

登入後複製

示例：动态加载JavaScript代码

function loadScriptString(code){    var script = document.createElement("script");
    script.type = "text/javascript";    try{
        script.appendChild(document.createTextNode(code));
    }catch (e){
        script.text = code; // 兼容IE
    }
    document.body.appendChild(script);
}12345678910

登入後複製

2. 动态样式

同动态加载脚本类似，添加到页面之后才会加载资源。

示例：动态加载CSSt文件

function loadStyle(url){    var link = document.createElement("link");    link.rel = "stylesheet";    link.type = "text/css";    link.href = url;
    document.head.appendChild(link);
}1234567

登入後複製

示例：动态加载CSS代码

function loadStyleString(code){
    var style = document.createElement("style");
    style.type = "text/css";
    try{
        style.appendChild(document.createTextNode(code));
    }catch (e){
        style.stylesheet.cssText = code;    // 兼容IE
    }
    document.head.appendChild(style);}12345678910

登入後複製

3. 操作表格

为了方便构建表格，HTML DOM还为<table>、<code><tbody> 和 <code><tr>元素添加了一些属性： <br>为<code><teble></teble>元素添加的属性和方法：

元素的指针元素的指针元素的HTMLCollection元素，放到表格中，返回引用元素，放到表格中，返回引用

属性方法	说明
caption	(若有)保存着对`<caption></caption>`元素的指针
tHead	(若有)保存着对
tFoot	(若有)保存着对
tBodies	一个所有
rows	一个所有行的HTMLCollection
createCaption	创建`<caption></caption>`元素，放到表格中，返回引用
createTHead()	创建
createTFoot()	创建
deleteCaption()	删除`<caption></caption>`元素
deleteTHead()	删除`<thead>元素<tr> <td align="left">deleteTFoot()</td> <td align="left">删除<code><tfoot>元素<tr> <td align="left">insertRow(pos)</td> <td align="left">向rows集合中的指定位置插入一行</td> </tr> <tr> <td align="left">deleteRow(pos)</td> <td align="left">删除指定位置的一行</td> </tr> </tfoot>`

<tbody>元素添加的属性和方法：<table> <thead><tr class="firstRow"> <th align="left">属性方法</th> <th align="left">说明</th> </tr></thead> <tbody><tr> <td align="left">rows</td> <td align="left">一个保存着<code><tbody>元素中行的HTMLCollection<tr> <td align="left">insertRow(pos)</td> <td align="left">向rows集合中指定位置插入一行，返回新行的引用</td> </tr> <tr> <td align="left">deleteRow(pos)</td> <td align="left">删除指定位置的行</td> </tr> </tbody>

<tr>元素新增的屬性與方法：<table> <thead><tr class="firstRow"> <th align="left">屬性方法</th> <th align="left">說明</th> </tr></thead> <tbody> <tr> <td align="left"></td>insertCell(pos)<td align="left"><code>向cells集合中的指定位置插入一個單元格，返回新單元格引用 deleteCell(pos)刪除指定位置的單元總結：NodeList、NameNodeMap和HTMLColletction三個集合都是動態的。應盡量減少存取NodeList的次數，因為每次造訪NodeList都會執行一次基於上下文檔的查詢。可以考慮將從NodeList中取得的值緩存起來！

以上是javascript--DOM講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！