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,建議不去使用,火狐舊版未抹去 };