DOM(Document Object Model)即文檔對象模型,針對HTML和XML文檔的API(應用程序接口);

 DOM描繪了一個層次化的節(jié)點樹,運行開發(fā)人員可以添加/移除和修改頁面的某一部分;

一 DOM介紹

 D(文檔):可以理解為整個Web加載的網(wǎng)頁文檔;
 O(對象):可以理解為類似window對象之類的東西,可以調用屬性和方法,這里說的是document對象;
 M(模型):可以理解為網(wǎng)頁文檔的樹形結構;

1.節(jié)點

 加載HTML頁面時,Web瀏覽器生成一個樹形結構,用來表示頁面內部結構;
 DOM將這種節(jié)點結構理解為由節(jié)點組成;
 html元素為根節(jié)點;head元素是html的子節(jié)點;meta元素和title元素之間是兄弟關系;

 
 2.節(jié)點種類:元素節(jié)點/文本節(jié)點/屬性節(jié)點
<div title="元素屬性">測試Div</div>
 元素節(jié)點 => div;
 屬性節(jié)點 => title="元素屬性"
 文本節(jié)點 => 測試Div二 查找元素
 W3C提供了比較方便簡單的定位節(jié)點的方法和屬性,以便我們快速的對節(jié)點進行操作;
 DOM(Document Object Model)即文檔對象模型,針對HTML和XML文檔的API(應用程序接口);

 DOM描繪了一個層次化的節(jié)點樹,運行開發(fā)人員可以添加/移除和修改頁面的某一部分;

元素節(jié)點查找方法
    方法                               說明
getElementById()              獲取特定ID元素的節(jié)點;
getElementsByTagName()        獲取相同元素的節(jié)點列表;
getElementsByName()           獲取相同名稱的節(jié)點列表;
getAttribute()                獲取特定元素節(jié)點屬性的值;
setAttribute()                設置特定元素節(jié)點屬性的值;
removeAttribute()             移除特定元素節(jié)點屬性;

1.getElementById()

// 方法接收一個參數(shù):獲取元素的ID;
// 如果找到相應的元素則返回該元素的HTMLDivElement對象;如果不存在,則返回null;
    document.getElementById('box');              // [object HTMLDivElement];
// 當我們通過getElementById()獲取到特定元素節(jié)點時,這個節(jié)點對象就被我們獲取到了;
// 而通過這個節(jié)點對象,我們可以訪問它的一系列屬性;
(1).訪問元素節(jié)點的屬性
    屬性                             說明
    tagName                     獲取元素節(jié)點的標簽名;
    innerHTML                   獲取元素節(jié)點里的內容,非W3C DOM規(guī)范;
    document.getElementById('box').tagName;      // =>DIV;
    document.getElementById('box').innerHTML;    // =>測試Div;

(2).訪問HTML通用屬性
    屬性                             說明
    id                           元素節(jié)點的id名稱;
    title                        元素節(jié)點的title屬性值;
    style                        CSS內聯(lián)樣式屬性值;
    className                    CSS元素的類;

    document.getElementById('box').id;           // =>id;
    document.getElementById('box').title;        // 獲取title;

    document.getElementById('box').style;        // 獲取CSSStyleDeclaration對象;
    document.getElementById('box').style.color;  // 獲取style對象中的color的值;也就是設置在元素行內的樣式值;
    document.getElementById('box').style.color='red';    // 設置style對象中的color的值;

    document.getElementById('box').className;    // 獲取class;
    document.getElementById('box').className='pox';      // 設置class;

    document.getElementById('box').bbb;          // 獲取自定義屬性的值,非IE不支持;

2.getElementsByTagName()
// 方法返回一個對象數(shù)組HTMLCollection(NodeList)數(shù)組,這個數(shù)組保存著所有相同元素名的節(jié)點列表;
    document.getElementsByTagName('*');         // 利用通配符獲取所有元素;
    // PS:IE在使用通配符時,會把文檔最開始的html的規(guī)范聲明當作第一個元素節(jié)點;

    document.getElementsByTagName('li');        // =>[object HTMLCollection];獲取所有l(wèi)i元素;
    document.getElementsByTagName('li').[0];    // 獲取第一個li元素;

3.getElementsByName()

 獲取相同名稱(name)設置的元素,返回一個對象數(shù)組HTMLCollection(NodeList);
     document.getElementsByName('add');          // 獲取具有name='add'的input元素集合;
     // PS:對于并不是HTML合法的屬性,那么在JS獲取的兼容性上也會存在差異;
     // IE支持合法的name屬性,但對于自定義的屬性會出現(xiàn)不兼容問題;

4.getAttribute()
 方法將獲取元素中某個屬性值;
 但它和直接使用".attr"獲取屬性值的方法有一定區(qū)別;
     document.getElementById('box').getAttribute('mydiv');    // 獲取自定義屬性值;
     document.getElementById('box').mydiv;                    // 獲取自定義屬性值,僅IE支持;

5.setAttribute()
 方法將設置元素中某個屬性和值;接收兩個參數(shù):屬性名和值;
 如果屬性本身已存在,那么就會覆蓋;
     document.getElementById('box').setAttribute('align','center');    // 設置屬性和值;
     // PS:在IE7及以下,使用setAttribute()方法設置class和style屬性沒有效果;

6.removeAttribute()
 方法可以移除HTML屬性;
     document.getElementById('box').removeAttribute('style');         // 移除style樣式屬性;

三 DOM節(jié)點

1.node節(jié)點屬性

// 節(jié)點可以分為:元素節(jié)點/屬性節(jié)點和文本節(jié)點;
// 這些節(jié)點都有三個屬性:nodeName/nodeType和nodeValue;

                  信息節(jié)點屬性
 節(jié)點類型            nodeName            nodeType         nodeValue 
   元素                 元素名稱             1              null
   屬性                 屬性名稱             2              屬性值 
   文本                 #text               3              文本內容
   document.getElementById('box').nodeType;            // =>1; 元素節(jié)點;

2.層次節(jié)點屬性
// 層次節(jié)點可以劃分為:父節(jié)點與子節(jié)點/兄弟節(jié)點;

// 當我們獲取其中一個元素節(jié)點的時候,就可以使用層次節(jié)點屬性來獲取它相關層次的節(jié)點;

節(jié)點關系示意圖

層次節(jié)點屬性
    屬性                         說明
childNodes             讀取當前元素節(jié)點的所有子節(jié)點;
firstChild             讀取當前元素節(jié)點的第一個子節(jié)點;
lastChild              獲取當前元素節(jié)點的最后一個子節(jié)點;
ownerDocument          獲取該節(jié)點的文檔根節(jié)點,相當于document;
parentNode             獲取當前節(jié)點的父節(jié)點;
previousSibling        獲取當前節(jié)點的前一個同級節(jié)點;
nextSibling            獲取當前節(jié)點的后一個同級節(jié)點;
attributes             獲取當前元素節(jié)點的所有屬性節(jié)點集合;

(1).childNodes屬性

 屬性獲取某一個元素節(jié)點的所有子節(jié)點,這些子節(jié)點包含元素節(jié)點和文本節(jié)點;
 PS:使用childNodes[n]返回子節(jié)點對象的時候,有可能返回的是元素子節(jié)點,比如:HTMLElement;
 也可能返回的是文本子節(jié)點,比如:Text;
 元素子節(jié)點可以使用nodeName或者tagName獲取標簽名稱;而文本子節(jié)點可以使用nodeValue獲取;
    var box = document.getElementById('box');
    for(var i=0; i<box.childNodes.length; i++){
         判斷是元素節(jié)點,輸出元素標簽名;
        if(box.childNodes[i].nodeType === 1){
            console.log('元素節(jié)點:'+box.childNodes[i].nodeName);
         判斷是文本節(jié)點,輸出文本內容;
        }else if(box.childNodes[i].nodeType ===3){
            console.log('文本節(jié)點:'+box.childNodes[i].nodeValue);
        }
    }
     PS1:在獲取到文本節(jié)點(重點在于已經(jīng)不是元素節(jié)點)的時候,是無法使用innerHTML這個屬性輸出文本內容的;
     這個非標準的屬性必須在獲取元素節(jié)點的時候,才能輸出里面包含的文本;
        alert(box.innerHTML);                                     innerHTML和nodeValue第一個區(qū)別;

     PS2:innerHTML和nodeValue在賦值的時候,nodeValue會把包含在文本里的HTML轉義成特殊的字符,從而達到形成純文本的效果;
     而innerHTML會解析文本里的特殊字符;
        box.childNodes[0].nodeValue = '<strong>abc</strong>';     =><strong>abc</strong>;
        box.innerHTML = '<strong>abc</strong>';                   =>abc(樣式加粗);

(2).firstChild和lastChild屬性
 firstChild = childNodes[0];獲取當前元素的第一個子節(jié)點;
 lastChild = childNodes[box.childNodes.length-1];獲取當前元素最后一個子節(jié)點;

(3).ownerDocument屬性
 返回該節(jié)點的文檔對象根節(jié)點,返回的對象相當于document;
   alert(box.ownerDocument === document);                        // =>true;根節(jié)點;

(4).parentNode/previousSibling/nextSibling屬性

parentNode:返回該節(jié)點的父節(jié)點;
 previousSibling:返回該節(jié)點的前一個同級節(jié)點;
 nextSibling:返回該節(jié)點的后一個同級節(jié)點;
    alert(box.parentNode.nodeName);                      // 獲取父節(jié)點的標簽名;
    alert(box.firstChild.nextSibling);                   // 獲取第二個節(jié)點;
    alert(box.lastChild.previousSibling);                // 獲取倒數(shù)第二個節(jié)點;

(5).attributes屬性
 屬性返回該節(jié)點的屬性節(jié)點集合;
     alert(document.getElementById('box').attributes);    // =>NamedNodeMap;

(6).忽略空白文本節(jié)點

  var body = document.getElementsByTagName('body')[0];// 獲取body元素節(jié)點;  
  alert(body.childNodes.length);           // 非IE=7;  IE=3;

  // PS:在非IE中,標準的DOM具有識別空白文本節(jié)點的功能,而IE自動忽略了;
  function filterSpaceNode1(nodes){
    // 新數(shù)組;
    var ret = [];
    for(var i=0; i<nodes.length; i++){
      // 如果識別到空白文本節(jié)點,就不添加到數(shù)組;
      if(nodes[i].nodeType ===3 && /^\s+$/.test(nodes[i].nodeValue)) continue;
      // 把每次的元素節(jié)點,添加到數(shù)組里;
      ret.push(nodes[i]);
    }
    return ret;
  }

  // PS:上面的方法,采用忽略空白文件節(jié)點的方法,把得到的元素節(jié)點累加到數(shù)組里返回;
  function filterSpaceNode2(nodes){
    for(var i=0; i<nodes.length; i++){
      if(nodes[i].nodeType ===3 && /^\s+$/.test(nodes[i].nodeValue)){
        // 得到空白節(jié)點之后,一道父節(jié)點上,刪除子節(jié)點;
        nodes[i].parentNode.removeChild(nodes[i]);
      }
    }
    return nodes;
  }

  // PS:firstChild等方法在獲取節(jié)點時遇到空白節(jié)點,處理方法;
  function removeWhileNode(nodes){
    for(var i=0; i<nodes.childNodes.length; i++){
      if(nodes.childNodes[i].nodeType ===3 && /^\s+$/.test(nodes.childNodes[i].nodeValue)){
        nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);
      }
    }
    return nodes;
  }

四 節(jié)點操作
// DOM不單單可以查找節(jié)點,也可以創(chuàng)建節(jié)點/復制節(jié)點/插入節(jié)點/刪除節(jié)點和替換節(jié)點

節(jié)點操作方法
    方法                     說明
write()             這個方法可以把任意字符串插入到文檔中;
createElement()     創(chuàng)建一個元素節(jié)點;
appendChild()       將新節(jié)點追加到子節(jié)點列表的末尾;
createTextNode()    創(chuàng)建一個文件節(jié)點;
insertBefore()      將新節(jié)點插入在前面;
replaceChild()      將新節(jié)點替換舊節(jié)點;
cloneNode()         復制節(jié)點;
removeChild()       移除節(jié)點;

(1).write()方法
// write()方法可以把任意字符串插入到文檔中去;
document.write('<p>這是一個段落!</p>'); // 解析后文字;

(2).createElement()方法
createElement()方法可以創(chuàng)建一個元素節(jié)點;
document.createElement('p'); // [object HTMLParagraphElement];

(3).appendChild()方法
appendChild()方法將一個新節(jié)點添加到某個節(jié)點的子節(jié)點列表的末尾上;
var box = document.getElementById('box');
var p = document.createElement('p'); // 創(chuàng)建一個新元素節(jié)點<p>;
box.appendChild(p); // 把新元素節(jié)點<p>添加子節(jié)點末尾;

(4).createTextNode()方法
該方法創(chuàng)建一個文本節(jié)點;
var text = document.createTextNode('段落');
p.appendChild(text); // 將文本節(jié)點添加到子節(jié)點末尾;

(5).insertBefore()方法

// 該方法可以把節(jié)點添加到指定節(jié)點的前面;
  box.parentNode.insertBefore(p,box);      // 在<div>之前添加一個<p>;
  box.insertBefore(newNode,null);        // 將newNode添加到box自列表的最后節(jié)點;

  //PS:insertBefore()方法可以給當前元素的前面創(chuàng)建一個節(jié)點,但沒有提供給當前元素的后面創(chuàng)建一個節(jié)點;
  function insertAfter(newElement,targetElement){
    // 得到父節(jié)點;
    var parent = targetElement.parentNode;
    // 如果最后一個子節(jié)點是當前元素,那么直接添加即可;
    if(parent.lastChild === targetElement){
      parent.appendChild(newElement);
    }else{
    // 否則,在當前節(jié)點的下一個節(jié)點之前添加;達成在當前節(jié)點后面添加節(jié)點的需求;
      parentNode.insertBefore(newElement,targetElement.nextSibling);
    }
  }

 (6).replaceChild()方法
該方法可以把節(jié)點替換成指定的節(jié)點;
box.parentNode.replaceChild(p,box); // 把<div>換成了<p>;

(7).cloneNode()方法

// 該方法可以把子節(jié)點復制出來;復制后返回的節(jié)點副本屬于文檔所有,但并沒有為它指定父節(jié)點;
// 參數(shù)為true:執(zhí)行深復制,就是復制節(jié)點及其整個子節(jié)點樹;
// 參數(shù)為false:執(zhí)行淺復制,只復制節(jié)點本身;
    var box = document.getElementById('box');
    var clone = box.firstChild.cloneNode(true);        // 獲取第一個子節(jié)點,true表示復制內容;
    box.appendChild(clone);                            // 添加到子節(jié)點列表末尾;

(8).removeChild()方法
該方法刪除指定節(jié)點;
box.parentNode.removeChild(box);

小結:在下一章~

最新評論