DOM 文檔對象模型

時間 2019-11-19

標籤 dom 文檔對象模型欄目 HTML 简体版

原文原文鏈接

DOM即文檔對象模型（Document Object Model）
DOM原理：

HTML加載完畢之後，渲染引擎會在內存中把HTML文檔生成一個DOM樹，getElementById是獲取內存中DOM上元素的節點，而後操做時修改的是該元素的屬性，node

　　3.文檔對象模型：數組

docment是文檔對象模型的一部分，
DOM是一個混合的數據類型

　　4.DOM樹：瀏覽器

　　　　5.DOM的做用：spa

找對象（元素）；
設置元素的屬性；
設置元素的樣式；
動態建立和刪除元素；
事件的觸發響應；

　　6.DOM訪問關係：code

節點的獲取：

節點的訪問關係是以屬性的方式存在的，DOM節點並非孤立存在的，所以經過DOM節點之間的相對關係對它們進行訪問，對象

　　1).父節點（parentNode）：（一個節點只有一個父節點）blog

　　　　獲取父節點：　父節點=節點.parentNode；事件

    <body>
        <div id="box">
            <button id="btn">點擊</button>
            <div id="link">
            　 <p>上一個兄弟節點</p>
               <a href="#">百度搜索</a>
               <span>下一個兄弟節點</span>
            </div>
            <p>我是最後一個子節點</p>

        </div>
        <script>
             var a=document.getElementsByTagName("a")[0];
             console.log(a);
             //獲取父節點
             console.log(a.parentNode);
             console.log(a.parentNode.parentNode);

             //獲取兄弟節點
             //上一個兄弟節點
             var previous=a.previousElementSibling || a.previousSibling;
             console.log(previous);
             //下一個兄弟節點
             var next=a.nextElementSibling || a.nextSibling;
             console.log(next);

        </script>
</body>

2).兄弟節點：ip

sibling→兄弟，next→下一個，previous→上一個內存

兄弟節點的獲取存在兼容性問題，IE 6/7/8,用nextSibling(previousSibling)；谷歌火狐，IE9+用nextElementSibling(previousElementSibling);

獲取兄弟節點的兼容性寫法：　下一個兄弟節點＝節點.nextElementSibling || 節點.nextSibling；

　　　　　　　　　　　　　　上一個兄弟節點＝節點.previousElementSibling || 節點.previousSibling；

　3).單個節點：

一樣存在兼容性，與兄弟節點類似，

獲取單個節點的兼容性寫法：　第一個子節點＝父節點.firstElementChild || 父節點.firstChild;

最後一個子節點＝父節點.lastElementChild || 父節點.lastChild;

全部子節點：有兩種方法，第一種是有W3C屬性childNodes獲取全部子節點，返回的是指定元素的子元素集合，包括HTML節點，全部屬性，文本節點（火狐，谷歌等高版本會把換行也看作一個子節點），經過判斷node.nodeType的值能夠過濾掉文本，屬性等節點，而後返回元素（元素即標籤），其中：　nodeType==1,表示元素節點

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　nodeType==2,表示屬性節點

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　nodeType==3,表示文本節點

獲取全部子節點：　子節點數組＝父節點.childNodes;

第二種方法是使用非標準屬性children,只返回HTML節點，不返回文本節點，雖然不是標準的DOM屬性，但它和innerHTML方法同樣，獲得了幾乎全部瀏覽器都支持，應用更爲普遍。

（注意：children在 IE6/7/8中包含註釋節點，在IE 6/7/8註釋不要寫在裏面）

獲取全部子節點：　子節點數組＝父節點.children;

    <body>
        <div id="box">
            <button id="btn">點擊</button>
            <div id="link">
            　 <p>上一個兄弟節點</p>
               <a href="#">百度搜索</a>
               <span>下一個兄弟節點</span>
            </div>
            <p>我是最後一個子節點</p>

        </div>
        <script>
           //單個節點
           var father=document.getElementById("box");
           //獲取第一個子節點
           var firstNode=father.firstElementChild || father.firstChild;
           console.log(firstNode);
           //獲取最後一個子節點
           var lastNode=father.lastElementChild || father.lastChild;
           console.log(lastNode);
           /*
           //用w3c標準屬性childNodes獲取全部節點
           var allNodes=father.childNodes;
           console.log(allNodes);   //此時，文本節點也被返回
           //過濾屬性節點與文本節點，只返回元素節點（元素就是標籤）,並放入新的數組中
           var newList=[];
           //1.遍歷所返回的子元素的集合
           for(var i=0;i<allNodes.length;i++){
               var node=allNodes[i];
               if(node.nodeType==1){
                   newList[i]=allNodes[i];
               }
           }
           console.log(newList);
           */

           //用非標準屬性children獲取全部節點
           var allNodes=father.children;
           console.log(allNodes);zzzzz
           

        </script>
　　　</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。