DOM結構知識點彙總

時間 2019-12-06

標籤 dom 結構知識彙總欄目 HTML 简体版

原文原文鏈接

DOM樹結構

繪製DOM樹

<!doctype html>
<html>
  <head>
    <title>測試</title>
  </head>
  <body>
    <!-- 測試 -->
    <div>
      hello, I'm come from Mars. <span style="color: #333;" name="itcast" itcast="HAHAHA">by--鄭少女</span>哈哈
    </div>
  </body>
</html>

須要注意的點html

html節點很特殊，html和head標籤之間的text不屬於html的子節點。
若是緊跟div標籤後面的不是上面👆代碼塊中寫的文本內容，而是標籤，那麼div和標籤中間將有一個text子節點。
「哈哈」和"</div>"之間就算有一個回車符，可是也只能算是一個text子節點。可是，若是把「哈哈」替換成「
」那麼「
」和「</div>」之間有一個text子節點

任何一個DOM樹結構

一、繪製DOM樹：childNodes、attributes
二、從一箇中心元素訪問其全部的直系親屬元素
  * 訪問父元素： parentNode
  * 訪問上一個兄弟元素：previousSibling
  * 訪問下一個兄弟元素：nextSibling
  * 訪問第一個屬性元素：attributes[1]
  * 訪問最後一個屬性元素：lastChild 或 childNodes[childNodes.length-1]

所謂的DOM操做，操做的是什麼
答：操做的是DOM樹，實現增刪改查
通常DOM樹結構

父節點
  兄弟節點
  當前節點
    屬性節點
    子節點
  兄弟節點

查詢，即獲取元素

標準DOM APInode
- document.getElementById
- document.getElementsByTagName
- document.getElementsByName
- document.getElemensByClassName
- document.querySelectorAll 功能強大，可是也許會有瀏覽器不兼容的狀況存在
親屬訪問
屬性獲取瀏覽器
- getAttribute
- getAttributeNode

增長，先增長後加入

建立安全
- document.createElement 建立元素
- document.createTesxtNode 建立文本節點
- document.createAttribute 屬性節點
- innerHTML
- innerText
- node.cloneNode()
加入app
- appendChild 追加到結尾處
- innerHTML
- insertBefore 用法：將元素插入到某一個元素的前面父元素.insertBefore(新元素, 舊元素);
其餘測試
- style 的操做
- setAttribute(屬性名，屬性值)

刪除

刪除元素spa
- removeChild 用法：父元素.removeChild()
- removeAttributeNode

修改

修改節點code
- 刪除節點再加入
修改樣式htm
- style.xxx = vvv;
- setAttribute
修改文本對象
- innerHTML
- innerText
- 節點操做
- nodeValue
修改屬性
- .xxx = vvv
- setAttribute

操做屬性的實例展現

增長屬性節點

<script>
    onload = function(){
        var div = document.getAttributeNode('#dv')[0];

        // 第一種方式 添加自定義的屬性，非標準模式
        div.setAttribute('newAttr', '新增的屬性');
        
        // 第二種方法 .xxx = vvv
        div.className = 'newClass';
        
        // 第三種方法 使用更安全，在前兩個方法使用失效的狀況下可用
        var attr = document.createAttribute('newAttr2');
        attr.nodeValue = '第三種增長屬性的方式';
        div.setAttribute( attr );
    }
</script>
<body>
    <div id="dv"></div>
</body>

刪除屬性節點

<script>
    onload = function(){
        var ck = document.getAttribute('#ck')[0];
        
        // 第一種刪除的方法
        ck.removeAttribute('checked');
        
        // 第二種刪除方法--對象的方式刪除
        var attr2 = ck.getAttributeNode('checked');
        ck.removeAttributeNode( attr2 );
        
        // 第三種刪除方法
        ck.chceck = false;
    }
</script>
<body>
    <input checked="checked" id="ck" />
</body>

相關標籤/搜索

每日一句

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