欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript DOM進(jìn)階方法

 更新時(shí)間：2015年04月13日 14:23:56   投稿：mdxy-dxy  
這篇文章主要介紹了JavaScript DOM進(jìn)階,需要的朋友可以參考下

DOM自身存在很多類型,在上一章中有介紹,比如Element類型:表示的是元素節(jié)點(diǎn);再比如Text類型;表示的是文本節(jié)點(diǎn);

一 DOM類型

類型名                        說明
Node                 表示所有類型值的統(tǒng)一接口,IE不支持;
Document             表示文檔類型;
Element              表示元素節(jié)點(diǎn)類型;
Text                 表示文本節(jié)點(diǎn)類型;
Comment              表示文檔中的注釋類型;
CDATASection         表示CDATA區(qū)域類型;
DocumentType         表示文檔聲明類型;
DocumentFragment     表示文檔片段類型;
Attr                 表示屬性節(jié)點(diǎn)類型;

1.Node類型

 DOM1級定義了一個(gè)Node接口,該接口將由DOM中的所有節(jié)點(diǎn)類型實(shí)現(xiàn);
 這個(gè)Node接口在JavaScript中是作為Node類型實(shí)現(xiàn)的;
 除IE之外,在其他所有瀏覽器中都可以訪問到這個(gè)類型;

2.Document類型

// Document類型表示文檔,或文檔的根節(jié)點(diǎn),而這個(gè)節(jié)點(diǎn)是隱藏的,沒有具體的元素標(biāo)簽;
document; // document;
document.nodeType; // 9;類型值;
document.childNodes[0]; // DocumentType;第一個(gè)子節(jié)點(diǎn)對象;
document.childNodes[1]; // HTMLHtmlElement; 對象;

// 如果想直接得到<html>標(biāo)簽的元素節(jié)點(diǎn)對象HTMLHtmlElement,可以直接使用documentElement即可;
document.documentElement; // HTMLHtmlElement;

// 很多時(shí)候需要得到<body>標(biāo)簽,之前常用的是:document.getElementsByTagName('body')[0];
document.body; // HTMLBodyElement;

// 在<html>之前還有一個(gè)文檔聲明:<!DOCTYPE>會作為瀏覽器的第一個(gè)節(jié)點(diǎn)來處理;
document.doctype; // DocumentType;

// 在Document中有一些遺留的屬性和對象集合,可以快速的幫助我們精確的處理任務(wù);
// 屬性
document.title; // 獲取和設(shè)置<title>標(biāo)簽的值;
document.URL; // 獲取URL路徑;
document.domain; // 獲取域名;
　　　　// 當(dāng)頁面中包含來自其他子域的框架或內(nèi)嵌框架時(shí),能夠設(shè)置document.domain就非常方便了;
　　　　// 由于跨域安全限制,來自不同子域的頁面無法通過JavaScript通信;
　　　　// 而通過將每個(gè)頁面的document.domain設(shè)置為相同的值,這些頁面就可以相互訪問對方的JavaScript對象了;
document.referrer;　　　　　　　　　 // 保存著鏈接到當(dāng)前頁面的那個(gè)頁面的URL;
// 對象集合
document.anchors; // 獲取文檔中帶name屬性的<a>元素集合;
document.links; // 獲取文檔中帶href屬性的<a>元素集合;
document.forms; // 獲取文檔中<form>元素集合;
document.images; // 獲取文檔中<img>元素集合;

3.Element類型

// Element類型用于表現(xiàn)HTML中的元素節(jié)點(diǎn).在上一章中,介紹了對元素節(jié)點(diǎn)進(jìn)行查找/創(chuàng)建等操作;
// 元素節(jié)點(diǎn)的nodeType為1;nodeName為元素的標(biāo)簽名;
// 元素節(jié)點(diǎn)對象在非IE瀏覽器可以返回它具體元素節(jié)點(diǎn)的對象類型;
元素名                     類型
HTML             HTMLHtmlElement;
DIV              HTMLDivElement;
BODY             HTMLBodyElement;
P                HTMLParamElement;

4.Text類型 

// Text類型用于表現(xiàn)文本節(jié)點(diǎn)類型,文本不包含HTML,或包含轉(zhuǎn)以后的HTML;文本節(jié)點(diǎn)的nodeType為3;
// 在同時(shí)創(chuàng)建兩個(gè)同一級別的文本節(jié)點(diǎn)的時(shí)候,會產(chǎn)生分離的兩個(gè)節(jié)點(diǎn);
  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;兩個(gè)文本節(jié)點(diǎn);

// 把兩個(gè)同鄰的文本節(jié)點(diǎn)合并在一起,使用normalize()即可;
  box.normalize();          // 合并成一個(gè)節(jié)點(diǎn);

// 將一個(gè)節(jié)點(diǎn)實(shí)現(xiàn)分離;
  box.firstChild.splitText(3);    // 分離一個(gè)節(jié)點(diǎn);

// Text還提供一些別的DOM操作的方法
  var box = document.getElementById('box');
  box.firstChild.deleteData(0,2);       // 刪除從0位置開始的2個(gè)字符;
  box.firstChild.insertData(0,'Hello');    // 從0位置開始添加指定字符;
  box.firstChild.replaceData(0,2,'Miss');   // 從0位置替換掉2個(gè)指定字符;
  box.firstChild.substringData(0,2);      // 從0位置獲取2個(gè)字符,直接輸出;
  alert(box.firstChild.nodeValue);       // 輸出操作后的結(jié)果;

5.Comment類型

 Comment類型表示文檔中的注釋,nodeType是8,nodeName是#comment,nodeValue是注釋的內(nèi)容;
     var box = document.getElementById('box');
     alert(box.firstChild);                        // Comment;

6.Attr類型
 Attr類型表示文檔元素中的屬性;nodeType為11;nodeName為屬性名,nodeValue為屬性值;詳細(xì)內(nèi)容在上一章;

二 DOM擴(kuò)展
1.呈現(xiàn)模式

// 從IE6開始區(qū)分標(biāo)準(zhǔn)模式和混雜模式(怪異模式),主要看文檔的聲明;
// IE為document對象添加了一個(gè)名為compatMode屬性,這個(gè)屬性可以識別IE瀏覽器的文檔處于什么模式;
// 如果是標(biāo)準(zhǔn)模式,則返回CSS1Compat;如果是混雜模式則返回BackCompat;
  if(document.compatMode == 'CSS1Compat'){
    alert(document.documentElement.clientWidth);
  }else{
    alert(document.body.clientWidth);
  }

2.滾動

 DOM提供了一些滾動頁面的方法
   document.getElementById('box').scrollIntoView();        // 設(shè)置指定可見;

3.children屬性

 由于子節(jié)點(diǎn)空白問題,IE和其他瀏覽器解釋不一致;如果只想得到有效子節(jié)點(diǎn),可以使用children屬性;這個(gè)屬性是非標(biāo)準(zhǔn)的;
     var box = docuemnt.getElementById('box');
     alert(box.children.length);                             // 得到有效子節(jié)點(diǎn)數(shù)目;

4.contains()方法

 判斷一個(gè)節(jié)點(diǎn)是不是另一個(gè)節(jié)點(diǎn)的后代,可以使用contains()方法;
    var box = document.getElementById('box');
    alert(box.contains(box.firstChild));                    // =>true;

三 DOM操作內(nèi)容
1.innerText屬性

document.getElementById('box').innerText;        // 獲取文本內(nèi)容(如有html直接過濾掉);
  document.getElementById('box').innerText = 'Mr.Lee';  // 設(shè)置文本(如有html轉(zhuǎn)義);
  // PS:除了Firefox之外,其他瀏覽器均支持這個(gè)方法;Firefox的DOM3級提供了另外一個(gè)類似的屬性: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,但本身還是有一定的限制,也就是所謂的作用域元素,離開這個(gè)作用域就無效了;
    box.innerHTML = "<script>alert('Lee');</script>";           // <script>元素不能被執(zhí)行;
    box.innerHTML = "<style>background:red;</style>";           // <style>元素不能被執(zhí)行;

3.outerText

 outerText在取值的時(shí)候和innerText一樣,同時(shí)Firefox不支持;
 而且賦值方法相當(dāng)危險(xiǎn),它不單替換文本內(nèi)容,還將元素直接抹去;
     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:關(guān)于最常用的innerHTML屬性和節(jié)點(diǎn)操作方法的比較;在插入大量HTML標(biāo)記時(shí),使用innerHTML的效率明顯要高很多;
// 因?yàn)樵谠O(shè)置innerHTML時(shí),會創(chuàng)建一個(gè)HTML解析器,這個(gè)解析器是瀏覽器級別的;因此執(zhí)行JavaScript會快得多;
// 但是,創(chuàng)建和銷毀HTML解析器也會帶來性能損失,最好控制在最合理的范圍內(nèi);
  for(var i=0; i<10; i++){
    ul.innerHTML = '<i>item</i>';      // 避免頻繁;
  }
  // 完善
  for(var i=0; i<10; i++){
    a = '<li>item</i>';            // 臨時(shí)保存;
  }
  ul.innerHTML = a;

四 小結(jié)

DOM是語言中立的API,用于訪問和操作HTML和XML文檔;
DOM1級將HTML和XML文檔形象地看作一個(gè)層次化的節(jié)點(diǎn)樹,可以使用JavaScript來操作這個(gè)節(jié)點(diǎn)樹,進(jìn)而改變底層文檔的外觀和結(jié)構(gòu);

DOM由各種節(jié)點(diǎn)構(gòu)成,簡要總結(jié)如下:

1.最基本的節(jié)點(diǎn)類型是Node,用于抽象地表示文檔中一個(gè)獨(dú)立的部分;所有其他類型都繼承自Node;
2.Document類型表示整個(gè)文檔,是一組分層節(jié)點(diǎn)的根節(jié)點(diǎn);在JavaScript中,document對象是Document的一個(gè)實(shí)例;
使用document對象,有很多種方式可以查詢和獲取節(jié)點(diǎn);
3.Element節(jié)點(diǎn)表示文檔中的所有HTML或XML元素,可以用來操作這些元素的內(nèi)容和屬性;
4.另外還有一些節(jié)點(diǎn)類型,分別表示文本內(nèi)容/注釋/文檔類型/CDATA區(qū)域和文檔片段;

相關(guān)文章

最新評論