首頁 > 開發者 > JavaScript
DOM自身存在很多類型,在上一章中有介紹,比如Element類型:表示的是元素節點;再比如Text類型;表示的是文本節點;
一 DOM類型
類型名 說明
Node 表示所有類型值的統一介面,IE不支援;
Document 表示文件類型;
Element 表示元素節點類型;
Text 表示文本節點類型;
Comment 表示文檔中的注釋類型;
CDATASection 表示CDATA地區類型;
DocumentType 表示文檔宣告類型;
DocumentFragment 表示文檔片段類型;
Attr 表示屬性節點類型;
1.Node類型
DOM1級定義了一個Node介面,該介面將由DOM中的所有節點類型實現;
這個Node介面在JavaScript中是作為Node類型實現的;
除IE之外,在其他所有瀏覽器中都可以訪問到這個類型;
2.Document類型
// Document類型表示文檔,或文檔的根節點,而這個節點是隱藏的,沒有具體的元素標籤;
document; // document;
document.nodeType; // 9;類型值;
document.childNodes[0]; // DocumentType;第一個子節點對象;
document.childNodes[1]; // HTMLHtmlElement; 對象;
// 如果想直接得到<html>標籤的元素節點對象HTMLHtmlElement,可以直接使用documentElement即可;
document.documentElement; // HTMLHtmlElement;
// 很多時候需要得到<body>標籤,之前常用的是:document.getElementsByTagName('body')[0];
document.body; // HTMLBodyElement;
// 在<html>之前還有一個文檔聲明:<!DOCTYPE>會作為瀏覽器的第一個節點來處理;
document.doctype; // DocumentType;
// 在Document中有一些遺留的屬性和對象集合,可以快速的協助我們精確的處理任務;
// 屬性
document.title; // 擷取和設定<title>標籤的值;
document.URL; // 擷取URL路徑;
document.domain; // 擷取網域名稱;
// 當頁面中包含來自其他子域的架構或內嵌架構時,能夠設定document.domain就非常方便了;
// 由於跨域安全限制,來自不同子域的頁面無法通過JavaScript通訊;
// 而通過將每個頁面的document.domain設定為相同的值,這些頁面就可以相互訪問對方的JavaScript對象了;
document.referrer; // 儲存著連結到當前頁面的那個頁面的URL;
// 對象集合
document.anchors; // 擷取文檔中帶name屬性的<a>元素集合;
document.links; // 擷取文檔中帶href屬性的<a>元素集合;
document.forms; // 擷取文檔中<form>元素集合;
document.images; // 擷取文檔中<img>元素集合;
3.Element類型
// Element類型用於表現HTML中的元素節點.在上一章中,介紹了對元素節點進行尋找/建立等操作;
// 元素節點的nodeType為1;nodeName為元素的標籤名;
// 元素節點對象在非IE瀏覽器可以返回它具體元素節點的物件類型;
元素名 類型
HTML HTMLHtmlElement;
DIV HTMLDivElement;
BODY HTMLBodyElement;
P HTMLParamElement;
4.Text類型
// Text類型用於表現文本節點類型,文本不包含HTML,或包含轉以後的HTML;文本節點的nodeType為3;// 在同時建立兩個同一層級的文本節點的時候,會產生分離的兩個節點; var box = document.createElement('div'); var text1 = Document.createTextNode('Mr'); var text2 = Document.createTextNode('Lee!'); box.appendChild(text1); box.appendChild(text2); document.body.appendChild(box); alert(box.childNodes.length); // =>2;兩個文本節點;// 把兩個同鄰的文本節點合并在一起,使用normalize()即可; box.normalize(); // 合并成一個節點;// 將一個節點實現分離; box.firstChild.splitText(3); // 分離一個節點;// Text還提供一些別的DOM操作的方法 var box = document.getElementById('box'); box.firstChild.deleteData(0,2); // 刪除從0位置開始的2個字元; box.firstChild.insertData(0,'Hello'); // 從0位置開始添加指定字元; box.firstChild.replaceData(0,2,'Miss'); // 從0位置替換掉2個指定字元; box.firstChild.substringData(0,2); // 從0位置擷取2個字元,直接輸出; alert(box.firstChild.nodeValue); // 輸出操作後的結果;
5.Comment類型
Comment類型表示文檔中的注釋,nodeType是8,nodeName是#comment,nodeValue是注釋的內容;
var box = document.getElementById('box');
alert(box.firstChild); // Comment;
6.Attr類型
Attr類型表示文件項目中的屬性;nodeType為11;nodeName為屬性名稱,nodeValue為屬性值;詳細內容在上一章;
二 DOM擴充
1.呈現模式
// 從IE6開始區分標準模式和混雜模式(怪異模式),主要看文檔的聲明;// IE為document對象添加了一個名為compatMode屬性,這個屬性可以識別IE瀏覽器的文檔處於什麼模式;// 如果是標準模式,則返回CSS1Compat;如果是混雜模式則返回BackCompat; if(document.compatMode == 'CSS1Compat'){ alert(document.documentElement.clientWidth); }else{ alert(document.body.clientWidth); }
2.滾動
DOM提供了一些滾動頁面的方法
document.getElementById('box').scrollIntoView(); // 設定指定可見;
3.children屬性
由於子節點空白問題,IE和其他瀏覽器解釋不一致;如果只想得到有效子節點,可以使用children屬性;這個屬性是非標準的;
var box = docuemnt.getElementById('box');
alert(box.children.length); // 得到有效子節點數目;
4.contains()方法
判斷一個節點是不是另一個節點的後代,可以使用contains()方法;
var box = document.getElementById('box');
alert(box.contains(box.firstChild)); // =>true;
三 DOM操作內容
1.innerText屬性
document.getElementById('box').innerText; // 擷取常值內容(如有html直接過濾掉); document.getElementById('box').innerText = 'Mr.Lee'; // 設定文本(如有html轉義); // PS:除了Firefox之外,其他瀏覽器均支援這個方法;Firefox的DOM3級提供了另外一個類似的屬性:textContent; // 相容方法 function getInnerText(element){ 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;
document.getElementById('box').innerHTML; // 擷取文本(不過濾HTML);
document.getElementById('box').innerHTML = '<b>123</b>'; // 加粗的123;
雖然innerHTML可以插入HTML,但本身還是有一定的限制,也就是所謂的範圍元素,離開這個範圍就無效了;
box.innerHTML = "<script>alert('Lee');</script>"; // <script>元素不能被執行;
box.innerHTML = "<style>background:red;</style>"; // <style>元素不能被執行;
3.outerText
outerText在取值的時候和innerText一樣,同時Firefox不支援;
而且賦值方法相當危險,它不單替換常值內容,還將元素直接抹去;
var box = document.getElementById('box');
box.outerText = '<b>123</b>';
alert(document.getElementById('box')); // =>null; 不建議使用;
4.outerHTML
// outerHTML 屬性在取值和innerHTML一致,但和outerText一樣,賦值之後將元素抹去; var box = document.getElementById('box'); box.outerHTML = '123'; alert(document.getElementById('box')); // null;// PS:關於最常用的innerHTML 屬性和節點操作方法的比較;在插入大量HTML標記時,使用innerHTML的效率明顯要高很多;// 因為在設定innerHTML時,會建立一個HTML解析器,這個解析器是瀏覽器層級的;因此執行JavaScript會快得多;// 但是,建立和銷毀HTML解析器也會帶來效能損失,最好控制在最合理的範圍內; for(var i=0; i<10; i++){ ul.innerHTML = '<i>item</i>'; // 避免頻繁; } // 完善 for(var i=0; i<10; i++){ a = '<li>item</i>'; // 臨時儲存; } ul.innerHTML = a;
四 小結
DOM是語言中立的API,用於訪問和操作HTML和XML文檔;
DOM1級將HTML和XML文檔形象地看作一個層次化的節點樹,可以使用JavaScript來操作這個節點樹,進而改變底層文檔的外觀和結構;
DOM由各種節點構成,簡要總結如下:
1.最基本的節點類型是Node,用於抽象地表示文檔中一個獨立的部分;所有其他類型都繼承自Node;
2.Document類型表示整個文檔,是一組分層節點的根節點;在JavaScript中,document對象是Document的一個執行個體;
使用document對象,有很多種方式可以查詢和擷取節點;
3.Element節點表示文檔中的所有HTML或XML元素,可以用來操作這些元素的內容和屬性;
4.另外還有一些節點類型,分別表示常值內容/注釋/文件類型/CDATA地區和文檔片段;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
