javascript節點型別詳細介紹

admin發表於2017-04-05
JavaScript型別

在javascript中，節點分為不同的型別，下面就做一下介紹，需要的朋友可以做一下參考。

一.節點型別:

（1）.Node:表示所有型別值的統一介面,低版本IE不支援;

（2）.Document:表示文件型別;

（3）.Element:表示元素節點型別;

（4）.Text:表示文字節點型別;

（5）.Comment:表示文件中的註釋型別;

（6）.CDATASection:表示CDATA區域型別;

（7）.DocumentType:表示文件宣告型別;

（8）.DocumentFragment:表示文件片段型別;

（9）.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為元素的標籤名;

（4）.Text型別:

[JavaScript] 純文字檢視 複製程式碼
// 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是註釋的內容。

[JavaScript] 純文字檢視 複製程式碼
var box = document.getElementById('box');
alert(box.firstChild); // Comment;

（6）.Attr型別:

Attr型別表示文件元素中的屬性。

nodeType為11。

nodeName為屬性名。

nodeValue為屬性值。

相關文章