第一百一十四節，JavaScript文檔對象，DOM進階

時間 2019-11-12

標籤第一百一十四 javascript 文檔對象 dom 進階欄目 JavaScript 简体版

原文原文鏈接

JavaScript文檔對象，DOM進階html

學習要點：node

1.DOM類型瀏覽器

2.DOM擴展服務器

3.DOM操做內容app

DOM自身存在不少類型，在DOM基礎課程中大部分都有所接觸，好比Element類型：表示的是元素節點，再好比Text類型：表示的是文本節點。DOM也提供了一些擴展功能。dom

一．DOM類型函數

DOM基礎課程中，咱們瞭解了DOM的節點而且瞭解怎樣查詢和操做節點，而自己這些不一樣的節點，又有着不一樣的類型。性能

DOM類型學習

類型名測試	說明
Node	表示全部類型值的統一接口，IE不支持
Document	表示文檔類型
Element	表示元素節點類型
Text	表示文本節點類型
Comment	表示文檔中的註釋類型
CDATASection	表示CDATA區域類型
DocumentType	表示文檔聲明類型
DocumentFragment	表示文檔片斷類型
Attr	表示屬性節點類型

1.Node類型，返回值表示Node類型的數值

Node接口是DOM1級就定義了，Node接口定義了12個數值常量以表示每一個節點的類型值。除了IE以外，全部瀏覽器均可以訪問這個類型。

Node的常量

常量名	說明	nodeType值
ELEMENT_NODE	元素	1
ATTRIBUTE_NODE	屬性	2
TEXT_NODE	文本	3
CDATA_SECTION_NODE	CDATA	4
ENTITY_REFERENCE_NODE	實體參考	5
ENTITY_NODE	實體	6
PROCESSING_INSTRUCETION_NODE	處理指令	7
COMMENT_NODE	註釋	8
DOCUMENT_NODE	文檔根	9
DOCUMENT_TYPE_NODE	doctype,html文檔聲明類型	10
DOCUMENT_FRAGMENT_NODE	文檔片斷	11
NOTATION_NODE	符號	12

雖然這裏介紹了12種節點對象的屬性，用的多的其實也就幾個而已。

alert(Node.ELEMENT_NODE);                //1，元素節點類型值
alert(Node.TEXT_NODE);                    //2，文本節點類型值

注意：低版本ie不支持，下面會有解決方案

ELEMENT_NODE，表示元素節點返回值是1 ，實際使用方式以下

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box'); //經過ID獲取到目標節點
    //判斷元素節點的類型，若是等於文本類型
    if(asf.nodeType === Node.ELEMENT_NODE){  //ELEMENT_NODE，表示元素節點返回值是1
        alert("元素類型節點");
    }else {
        alert("不是元素類型節點")
    }
};

//元素類型節點

ps:其餘屬性使用方式相同

咱們建議使用Node類型的屬性來代替1,2這些阿拉伯數字，有可能你們會以爲這樣豈不是很繁瑣嗎？而且還有一個問題就是IE不支持Node類型。
若是隻有兩個屬性的話，用1，2來代替會特別方便，但若是屬性特別多的狀況下，一、二、三、四、五、六、七、八、九、十、十一、12，你根本就分不清哪一個數字表明的是哪一個節點。固然，若是你只用1，2兩個節點，那就另當別論了。

Node類型IE低版本不支持，咱們能夠模擬一個類，讓IE也支持

alert(Node.ELEMENT_NODE);                //1，元素節點類型值
alert(Node.TEXT_NODE);                    //2，文本節點類型值

//Node類型IE低版本不支持，咱們能夠模擬一個類，讓IE也支持
//判斷Node的類型若是等於undefined，就說明此瀏覽器不支持Node類型
if (typeof Node === 'undefined'){
    //經過window建立一個對象全局變量
    window.Node ={
        ELEMENT_NODE:1,
        ATTRIBUTE_NODE:2,
        TEXT_NODE:3,
        CDATA_SECTION_NODE:4,
        ENTITY_REFERENCE_NODE:5,
        ENTITY_NODE:6,
        PROCESSING_INSTRUCETION_NODE:7,
        COMMENT_NODE:8,
        DOCUMENT_NODE:9,
        DOCUMENT_TYPE_NODE:10,
        DOCUMENT_FRAGMENT_NODE:11,
        NOTATION_NODE:12
    };
}

2.Document類型，返回根節點對象

document類型表示文檔，或文檔的根節點，而這個節點是隱藏的，沒有具體的元素標籤。也就是全部的html都是在這個節點下的，這個是根

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    alert(document);   //document類型表示文檔，或文檔的根節點
    //返回[object HTMLDocument],返回根節點對象

    alert(document.nodeType);  //查看文檔類型值
    //返回9，表示文檔根

    alert(document.childNodes[0]); //獲取根元素節點裏的第一個子節點
    //返回[object DocumentType]，第一個子節點對象

    alert(document.childNodes[0].nodeType); //查看第一個子節點的類型
    //返回10，表示html文檔聲明類型

    alert(document.childNodes[1]); //獲取根元素節點裏的第二個子節點
    //返回[object HTMLHtmlElement]，第二個子節點對象

    alert(document.childNodes[1].nodeType); //查看第二個子節點的類型
    //返回1，表示是元素類型也就是標籤

    alert(document.childNodes[1].nodeName);  //獲取第二個子節點的標籤名稱
    //HTML，表示是html標籤
};

若是想直接獲得<html>標籤的元素節點對象HTMLHtmlElement，沒必要使用childNodes屬性這麼麻煩，可使用documentElement便可。

documentElement屬性，直接獲取根節點下的html節點，返回html節點對象

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    alert(document.documentElement);  //documentElement屬性，直接獲取根節點下的html節點，返回html節點對象
    //返回，[object HTMLHtmlElement] html節點對象

    alert(document.documentElement.nodeName); //獲取html節點的標籤名稱
    //返回，HTML 標籤名稱
};

在不少狀況下，咱們並不須要獲得<html>標籤的元素節點，而須要獲得更經常使用的<body>標籤，以前咱們採用的是：document.getElementsByTagName('body')[0]，那麼這裏提供一個更加簡便的方法：document.body。

body屬性，直接獲取body標籤節點

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    alert(document.body);  //body屬性，直接獲取body標籤節點
    //返回：[object HTMLBodyElement] body標籤節點對象

    alert(document.body.nodeName); //獲取body標籤名稱
    //返回：BODY  標籤名稱
};

在<html>以前還有一個文檔聲明：<!DOCTYPE>會做爲某些瀏覽器的第一個節點來處理，這裏提供了一個簡便方法來處理：document.doctype。

doctype屬性，直接獲取html文檔聲明標籤節點
注意：ie7如下不支持，ie7如下只能經過父節點獲取子節點獲得，而且獲得的是文檔註釋類型，不是元素類型

PS：IE8中，若是使用子節點訪問，IE8以前會解釋爲註釋類型Comment節點，而document.doctype則會返回null。

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    alert(document.doctype);  //doctype屬性，直接獲取html文檔聲明標籤節點
    //返回：[object DocumentType] 文檔聲明標籤節點對象
};

Document中有一些遺留的屬性和對象合集，能夠快速的幫助咱們精確的處理一些任務。

title屬性，獲取和設置<title>標籤的值

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    alert(document.title);  //title屬性，獲取和設置<title>標籤的值
    //返回：JavaScript講解

    alert(document.title = '修改標題');  //設置<title>標籤的值
    //返回：修改標題
};

URL屬性，獲取URL路徑

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    alert(document.URL);  //URL屬性，獲取URL路徑
    //返回：http://localhost:63342/js/1.html?_ijt=d9jd9jpm38tl3bb99qlpgr4rbo 
};

domain屬性，獲取域名，要在服務器端

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    alert(document.domain);  //domain屬性，獲取域名，要在服務器端
    //返回：localhost 
};

referrer屬性，獲取上一個URL，要在服務器端

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    alert(document.referrer);  //referrer屬性，獲取上一個URL，要在服務器端,若是上一頁沒有返回空
};

anchors屬性，獲取文檔中帶name屬性的<a>元素集合

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    alert(document.anchors);  //anchors屬性，獲取文檔中帶name屬性的<a>元素集合
};

links屬性，獲取文檔中帶href屬性的<a>元素集合

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    alert(document.links);  //links屬性，獲取文檔中帶href屬性的<a>元素集合
};

forms屬性，獲取文檔中<form>元素集合

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    alert(document.forms);  //forms屬性，獲取文檔中<form>元素集合
};

images屬性，獲取文檔中<img>元素集合

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    alert(document.images);  //images屬性，獲取文檔中<img>元素集合
};

3.Element元素類型

Element類型用於表現HTML中的元素節點。在DOM基礎那章，咱們已經能夠對元素節點進行查找、建立等操做，元素節點的nodeType爲1，nodeName爲元素的標籤名。

元素節點對象在非IE瀏覽器能夠返回它具體元素節點的對象類型。

元素對應類型表

元素名	類型
HTML	HTMLHtmlElement
DIV	HTMLDivElement
BODY	HTMLBodyElement
P	HTMLParamElement

PS：以上給出了部分對應，更多的元素對應類型，直接訪問調用便可

4.Text類型

Text類型用於表現文本節點類型，文本不包含HTML，或包含轉義後的HTML。文本節點的nodeType爲3。

在同時建立兩個同一級別的文本節點的時候，會產生分離的兩個節點。

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('box');  //經過id獲取到標籤
    var text1 = document.createTextNode('文本1'); //建立一個文本節點
    var text2 = document.createTextNode('文本2'); //建立一個文本節點
    sdf.appendChild(text1); //將新節點添加到sdf節點裏子節點末尾
    sdf.appendChild(text2); //將新節點添加到sdf節點裏子節點末尾
    alert(sdf.childNodes.length);  //查看元素節點裏的子節點集合長度
    //返回2，說明是兩個文本節點
    //<div id="box" title="標題">文本1文本2</div>
    //注意：此時添加了兩個文本節點，可是用眼睛看就像是一個文本節點，這裏一點要注意
};

normalize()合併同級的文本節點

使用方式：

目標節點的父節點.normalize()

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('box');  //經過id獲取到標籤
    var text1 = document.createTextNode('文本1'); //建立一個文本節點
    var text2 = document.createTextNode('文本2'); //建立一個文本節點
    sdf.appendChild(text1); //將新節點添加到sdf節點裏子節點末尾
    sdf.appendChild(text2); //將新節點添加到sdf節點裏子節點末尾
    alert(sdf.childNodes.length);  //查看元素節點裏的子節點集合長度
    //返回2，說明是兩個文本節點
    //<div id="box" title="標題">文本1文本2</div>
    //注意：此時添加了兩個文本節點，可是用眼睛看就像是一個文本節點，這裏一點要注意



    //normalize()合併同級的文本節點
    sdf.normalize(); //將一個元素節點裏的同級多個文本子節點，合併成一個文本子節點
    alert(sdf.childNodes.length); //查看元素節點裏的子節點集合長度
    //返回：1 ，說明已經合併了
};

splitText()分離一個文本節點，參數是要分離的字符數
使用方式：
目標文本節點.splitText(分離幾個字符)

//<div id="box" title="標題">這是一段文本</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('box');  //經過id獲取到標籤
    alert(sdf.childNodes.length);  //查看元素裏的子節點長度
    //返回：1 ，說明是一個文本子節點
    alert(sdf.childNodes[0].nodeValue); //查看文本子節點內容
    //返回：這是一段文本

    //splitText()分離一個文本節點，參數是要分離的字符數
    sdf.childNodes[0].splitText(3);  //將文本節點前3個字符分離成一個文本節點
    alert(sdf.childNodes.length);  //查看元素裏的子節點長度
    //返回2，說明已經分離了
    alert(sdf.childNodes[0].nodeValue); //查看文本子節點內容
};

Text還提供了一些別的DOM操做的方法以下：

deleteData()刪除一個文本節點裏指定範圍的字符，參數是要刪除字符的起始位置,和結束位置
使用方式：
目標文本節點.deleteData(起始位置,結束位置)

//<div id="box" title="標題">這是一段文本</div>


window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('box');  //經過id獲取到標籤
    alert(sdf.childNodes[0].nodeValue);  //查看節點裏子元素的文本
    //返回：這是一段文本

    //deleteData()刪除一個文本節點裏指定範圍的字符，參數是要刪除字符的起始位置,和結束位置
    sdf.childNodes[0].deleteData(0,3);  //刪除文本節點裏的指定文本，從0-3位置刪除
    alert(sdf.childNodes[0].nodeValue); //查看刪除後的文本
    //返回：段文本
};

insertData()在文本節點裏的指定位置添加指定文本內容
使用方式：
目標文本節點.insertData(要添加文本的字符位置,要添加的文本內容)

//<div id="box" title="標題">這是一段文本</div>


window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('box');  //經過id獲取到標籤
    alert(sdf.childNodes[0].nodeValue);  //查看節點裏子元素的文本
    //返回：這是一段文本

    //insertData()在文本節點裏的指定位置添加指定文本內容
    sdf.childNodes[0].insertData(4,'測試'); //insertData()在文本節點裏的指定位置添加指定文本內容
    alert(sdf.childNodes[0].nodeValue);  //查看節點裏子元素的文本
    //返回：這是一段測試文本  添加成功
};

replaceData()在文本節點裏的指定範圍替換成指定文本內容
使用方式：
目標文本節點.replaceData(要替換的起始範圍位置,要替換幾個字符,要替換的字符串)

//<div id="box" title="標題">這是一段文本</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('box');  //經過id獲取到標籤
    alert(sdf.childNodes[0].nodeValue);  //查看節點裏子元素的文本
    //返回：這是一段文本

    //replaceData()在文本節點裏的指定範圍替換成指定文本內容
    sdf.childNodes[0].replaceData(2,2,'測試'); 
    alert(sdf.childNodes[0].nodeValue);  //查看替換後的文本
    //返回：這是測試文本
};

substringData()在文本節點裏獲取指定範圍文本內容
使用方式：
目標文本節點.substringData(起始範圍位置,獲取幾個字符)

//<div id="box" title="標題">這是一段文本</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var sdf = document.getElementById('box');  //經過id獲取到標籤
    alert(sdf.childNodes[0].nodeValue);  //查看節點裏子元素的文本
    //返回：這是一段文本

    //substringData()在文本節點裏獲取指定範圍文本內容
    alert(sdf.childNodes[0].substringData(0,2)); //substringData()在文本節點裏獲取指定範圍文本內容
    //返回：這是
};

5.Comment類型，html註釋節點

Comment類型表示文檔中的註釋。nodeType是8，nodeName是#comment，nodeValue是註釋的內容。

//<div id="box" title="標題"><!--這是註釋--></div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //非IE獲取註釋節點
    var asf = document.getElementById('box');  //經過ID獲取到註釋的父節點
    alert(asf.childNodes.length);  //查看節點裏的子節點長度
    //返回1：說明就一個子節點
    alert(asf.childNodes[0].nodeName);  //查看第一個子節點的標籤名稱
    //返回：#comment 表示是標籤名稱
    alert(asf.childNodes[0].nodeValue);  //查看第一個子節點的文本內容
    //返回：這是註釋

    //低版本IE獲取註釋節點
    var asf2 = document.getElementsByName('!');  //經過標籤名稱獲取到註釋標籤節點
    alert(asf2.length);  //查看獲取到的註釋節點長度
};

6.Attr類型，標籤屬性類型

Attr類型表示文檔元素中的屬性。nodeType爲2，nodeName爲屬性名，nodeValue爲屬性值。DOM基礎篇已經詳細介紹過，略。

二．DOM擴展

1.呈現模式

從IE6開始開始區分標準模式和混雜模式(怪異模式)，主要是看文檔的聲明。IE爲document對象添加了一個名爲compatMode屬性，這個屬性能夠識別IE瀏覽器的文檔處於什麼模式若是是標準模式，則返回CSS1Compat，若是是混雜模式則返回BackCompat。

compatMode屬性，識別IE瀏覽器的文檔處於什麼模式，標準模式返回CSS1Compat，混雜模式返回BackCompat

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //compatMode屬性，識別IE瀏覽器的文檔處於什麼模式，標準模式返回CSS1Compat，混雜模式返回BackCompat
    alert(document.compatMode);  //查看IE瀏覽器的文檔處於什麼模式
    //返回：CSS1Compat

    //若是把html文檔聲明<!DOCTYPE html>刪除了就是混雜模式
    //返回：BackCompat
};

clientWidth屬性，查看節點元素的寬度

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //判斷文檔處於什麼模式，若是是標準模式
    if (document.compatMode == 'CSS1Compat') {
        //若是是標準模式，獲取到html節點，查看它的寬度
        alert(document.documentElement.clientWidth);
    } else {
        //若是不是標準模式，獲取到body標籤節點，查看它的寬度
        alert(document.body.clientWidth);
    }
};

後來Firefox、Opera和Chrome都實現了這個屬性。從IE8後，又引入documentMode新屬性，由於IE8有3種呈現模式分別爲標準模式8，仿真模式7，混雜模式5。因此若是想測試IE8的標準模式，就判斷document.documentMode > 7 便可。

documentMode屬性，識別IE瀏覽器的文檔處於什麼模式，標準模式8，仿真模式7，混雜模式5，返回數值

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //documentMode屬性，識別IE瀏覽器的文檔處於什麼模式，標準模式8，仿真模式7，混雜模式5，返回數值
    if (document.documentMode <= 5) {
        alert('混雜模式');
    }else if(document.documentMode <= 7){
        alert('仿真模式');
    }else if(document.documentMode <= 8){
        alert('標準模式');
    }
};

2.滾動

DOM提供了一些滾動頁面的方法，以下：

scrollIntoView()方法，將一個元素節點設置滾動在可見範圍
注意：這裏說的可見範圍是這樣的，好比目標節點在頁面底部，而目標節點上面有不少類容，也就是目標節點超出瀏覽器範圍不可見，要手動拖動滾動條纔可見，scrollIntoView()方法能夠定位滾動條到目標節點可見範圍

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    document.getElementById('box').scrollIntoView();    //設置指定可見
};

3.children屬性

children屬性，獲取一個元素節點裏的子節點，自動過濾掉空白文本節點【推薦】

因爲子節點空白問題，IE和其餘瀏覽器解釋不一致。雖然能夠過濾掉，但若是隻是想獲得有效子節點，可使用children屬性，支持的瀏覽器爲：IE5+、Firefox3.5+、Safari2+、Opera8+和Chrome，這個屬性是非標準的。

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試2</p>
//     <p>測試3</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');    //經過id獲取到元素節點
    alert(asf.children);  //children屬性，獲取一個元素節點裏的子節點，自動過濾掉空白文本節點
    //返回：[object HTMLCollection] 子節點集合對象
    alert(asf.children.length);  //查看子節點的長度
    //返回：3 ，已經自動過濾了空白文本子節點

    //循環出全部子節點的標籤名稱和內容文本
    for (var i = 0; i < asf.children.length; i ++){  //根據子節點長度循環次數
        //每次循環打印出循環到的子節點標籤名稱和子節點標籤文本內容
        alert('標籤名稱：' + asf.children[i].nodeName + '-' + '標籤文本內容：' + asf.children[i].innerHTML);
    }
};

4.contains()方法

contains()方法，判斷一個節點是不是另一個節點的子節點，返回布爾值
使用方式：
要判斷的父節點.contains(要判斷的子節點)

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試2</p>
//     <p>測試3</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');    //經過id獲取到元素節點
    //contains()方法，判斷一個節點是不是另一個節點的子節點，返回布爾值
    alert(asf.contains(asf.children[0])); //判斷asf節點裏的第一個子節點是不是asf的子節點
    //true
};

PS：早期的Firefox不支持這個方法，新版的支持了，其餘瀏覽器也都支持，Safari2.x瀏覽器支持的有問題，沒法使用。因此，必須作兼容。

在Firefox的DOM3級實現中提供了一個替代的方法compareDocumentPosition()方法。這個方法肯定兩個節點之間的關係。

compareDocumentPosition()方法，判斷兩個節點之間的關係，返回關係掩碼
使用方式：
要判斷的a節點.compareDocumentPosition(要判斷的b節點)

關係掩碼錶

掩碼	節點關係
1	無關(節點不存在)
2	居前(節點在參考點以前)
4	居後(節點在參考點以後)
8	包含(節點是參考點的祖先)
16	被包含(節點是參考點的後代)

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試2</p>
//     <p>測試3</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');    //經過id獲取到元素節點
    //compareDocumentPosition()方法，判斷兩個節點之間的關係，返回關係掩碼
    alert(asf.compareDocumentPosition(asf.children[0])); //判斷asf節點裏的第一個子節點與asf節點是什麼關係
    //返回：20，
    //爲何會出現20，那是由於知足了4和16兩項，最後相加了
};

PS：爲何會出現20，那是由於知足了4和16兩項，最後相加了。爲了能讓全部瀏覽器均可以兼容，咱們必須寫一個兼容性的函數。

contains()方法和compareDocumentPosition()方法的兼容方式

自定義一個判斷兩個節點關係的函數，判斷一個節點是不是另一個節點的子節點，返回布爾值

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試2</p>
//     <p>測試3</p>
// </div>

//contains()方法和compareDocumentPosition()方法的兼容方式
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //首先建立兩個節點，用於判斷它們之間的關係
    var jd1 = document.getElementById('box');  //獲取到父節點
    var jd2 = jd1.children[0]; //獲取到子節點

    //執行判斷兩個節點關係函數
    alert(containsjr(jd1,jd2));

    //自定義兼容函數
    function containsjr(jdx1,jdx2) {  //函數接收兩個參數，第一個參數父節點，第二個參數子節點
        //判斷瀏覽器若是支持contains()方法 ，而且非Safari瀏覽器 ，導入瀏覽器檢測模塊browserdetect.js
        if (typeof jdx1.contains != 'undefined' && !(BrowserDetect.browser == 'Safari' && BrowserDetect.version < 3)){
            //返回contains()方法執行後的結果
            return jdx1.contains(jdx2); //contains()方法，判斷一個節點是不是另一個節點的子節點，返回布爾值
        }else if(typeof jdx1.compareDocumentPosition == 'function'){  //判斷瀏覽器若是支持compareDocumentPosition方法
            return jdx1.compareDocumentPosition(jdx2) > 16; //compareDocumentPosition()方法，判斷兩個節點之間的關係，返回關係掩碼
        }else {
            //更低的瀏覽器兼容，經過遞歸一個個獲取他的父節點是否存在
            var node = jdx2.parentNode; //經過子節點獲取父節點
            //do...while語句是一種先運行，後判斷的循環語句。也就是說，無論條件是否知足，至少先運行一次循環體。
            do {
                if (node === jdx1){ //判斷經過子節點獲取到的父節點若是等於函數傳參的父節點
                    return true;
                }else {
                    node = node.parentNode; //不然node變量等於父節點的父節點
                }
            }while (node != null);
            return false;
        }
    }
};

三．DOM操做內容

雖然在以前咱們已經學習了各類DOM操做的方法，這裏所介紹是innerText、innerHTML、outerText和outerHTML等屬性。除了以前用過的innerHTML以外，其餘三個還麼有涉及到。

1.innerText屬性【推薦】

innerText屬性，設置或獲取一個元素的文本內容，獲取(若有html直接過濾掉)，設置文本(若有html轉義)

使用方式：

目標節點.innerText

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試2</p>
//     <p>測試3</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');  //經過ID獲取一個節點
    alert(asf.innerText);   //innerText屬性，設置或獲取一個元素的文本內容，獲取(若有html直接過濾掉)，設置文本(若有html轉義)
    //返回
    // 測試1
    // 測試2
    // 測試3
    asf.innerText = '<b>修改</b>';  //從新設置節點內容
    alert(asf.innerText);  //從新查看節點內容
    //<b>修改</b>
};

PS：除了Firefox火狐瀏覽器以外，其餘瀏覽器均支持這個方法。但Firefox的DOM3級提供了另一個相似的屬性：textContent，作上兼容便可通用。

textContent屬性(只有火狐支持)，設置或獲取一個元素的文本內容，獲取(若有html直接過濾掉)，設置文本(若有html轉義)

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試2</p>
//     <p>測試3</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');  //經過ID獲取一個節點
    alert(asf.textContent);   //textContent屬性，設置或獲取一個元素的文本內容，獲取(若有html直接過濾掉)，設置文本(若有html轉義)
    //返回
    // 測試1
    // 測試2
    // 測試3
    asf.textContent = '<b>修改</b>';  //從新設置節點內容
    alert(asf.textContent);  //從新查看節點內容
    //<b>修改</b>
};

innerText和textContent兼容方案

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試2</p>
//     <p>測試3</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');  //經過ID獲取一個節點
    alert(getInnerText(asf)); //獲取節點文本
    setInnerText(asf,'<b>賦值</b>')
    alert(getInnerText(asf)); //獲取節點文本

};

//兼容方案
//獲取方案
function getInnerText(element) { //接收節點
    //三元運算，判斷節點的textContent類型等於string，執行element.textContent，不然執行element.innerText
    return (typeof element.textContent == 'string') ? element.textContent : element.innerText;
}

//設置方案
function setInnerText(element, text) { //接收節點，和要設置的字符串
    if (typeof element.textContent == 'string') {
        element.textContent = text;
    } else {
        element.innerText = text;
    }
}

2.innerHTML屬性【推薦】

innerHTML屬性，獲取節點裏的文本內容，不過濾html

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試2</p>
//     <p>測試3</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');  //經過ID獲取一個節點
    alert(asf.innerHTML); //獲取節點裏的文本內容，不過濾html
    asf.innerHTML = '<b>123</b>'; //設置節點裏的文本內容，可解析HTML
    alert(asf.innerHTML); ////獲取節點裏的文本內容，不過濾html
};

PS：關於最經常使用的innerHTML屬性和節點操做方法的比較，在插入大量HTML標記時使用innerHTML的效率明顯要高不少。由於在設置innerHTML時，會建立一個HTML解析器。這個解析器是瀏覽器級別的(C++編寫)，所以執行JavaScript會快的多。但，建立和銷燬HTML解析器也會帶來性能損失。最好控制在最合理的範圍內，以下：

for (var i = 0; i < 10; i ++) {
ul.innerHTML = '<li>item</li>';            //避免頻繁
}
//改
for (var i = 0; i < 10; i ++) {
a = '<li>item</li>';                        //臨時保存
}
ul.innerHTML = a;

雖然innerHTML能夠插入HTML，但自己仍是有必定的限制，也就是所謂的做用域元素，離開這個做用域就無效了

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試2</p>
//     <p>測試3</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');  //經過ID獲取一個節點
    asf.innerHTML = "<script>alert('Lee');</script>";    //<script>元素不能被執行
    asf.innerHTML = "<style>background:red;</style>";    //<style>元素不能被執行

};

3.outerText

outerText在取值的時候和innerText同樣，同時火狐不支持，而賦值方法至關危險，他不單替換了文本內容，還將節點元素直接抹去。【不建議使用】

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試2</p>
//     <p>測試3</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');  //經過ID獲取一個節點
    asf.outerText = '<b>123</b>';  //給節設置文本內容
    alert(document.getElementById('box'));            //null，建議不去使用

};

4.outerHTML

outerHTML屬性在取值和innerHTML一致，但和outerText也同樣，很危險，賦值的以後會將元素抹去。【不建議使用】

// <div id="box" title="標題">
//     <p>測試1</p>
//     <p>測試2</p>
//     <p>測試3</p>
// </div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');  //經過ID獲取一個節點
    asf.outerHTML = '123'; //設置節點文本內容
    alert(document.getElementById('box'));            //null，建議不去使用，火狐舊版未抹去
};

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。