DOM編程系列之Document對象我的分享

時間 2019-12-04

原文原文鏈接

DOM

Document對象是什麼

在DOM裏document對象能夠表明頁面
document對象能夠獲得HTML頁面所有內容
document對象的原型是指向Node的

示例代碼:node

<script>
    /*
        document對象
          * DOM預約義 - 已經被建立完畢了 - 容許直接使用
          * 獲得的是HTML頁面的源代碼 - 該對象表示當前HTML頁面
     */
    console.log(document);
    // 利用instanceof來判斷document是不是一個對象
    console.log(document instanceof Object);// 調用結果爲true 表示document是一個JavaScript對象
    // document對象的屬性和方法被定義在原型上
    console.log(Document.prototype);
    /*
        使用構造函數的方法建立一個對象
          * 緣由 - DOM底層已經編寫好了因此不須要咱們再去建立了能夠直接使用
     */
    var document = new Document();
    console.log(document);
</script>

Document對象的繼承鏈

<script>
    // 利用instanceof判斷Document.prototype(對象原型)是否繼承於Node
    console.log(Document.prototype instanceof Node);// 調用結果爲 true因此document對象是繼承於Node的
     // node對象是繼承於EventTarget的  (EventTarget目標時間的意思)
    console.log(Node.prototype instanceof EventTarget);

    console.log(Document.prototype instanceof EventTarget);
    // DOM中的對象之間的繼承關係遠比語法中的繼承關係複雜
    console.log(Document.prototype instanceof HTMLDocument);
</script>

getElementById()方法

以查找ID屬性的方式來定位指定元素的位置
使用getElementById()方法只能查找到一個元素,由於ID屬性是惟一的不能重複

示例代碼:數組

<body>
<button id="btn">噠噠噠</button>
<div id="d1"></div>
<script>
    // 1. 經過Document對象的getElementById()方法定義元素
    var buttonElement = document.getElementById('btn');
    /*
        * 打印測試的結果 - 是對應元素的HTML代碼
        * DOM不管是使用的仍是獲得的都應該是對象
     */
    console.log(buttonElement instanceof Object);// 調用結果爲 true
    /*
        DOM提供了一系列的對象 - 對應HTML頁面的每個元素
          * <button> 元素對應具備HTMLButtonElement對象
          * <div> 元素對應具備HTMLDivElement對象
     */
    console.log(buttonElement instanceof HTMLButtonElement);// 調用結果爲 true

    var d1 = document.getElementById('d1');
    console.log(d1 instanceof HTMLDivElement);// 調用結果爲 true
</script>
</body>

getElementsByName()方法

name屬性不是惟一 - 獲得的結果多是多個,也多是一個
會獲得所有帶有 name屬性的元素，以類數組表示獲得的元素（NodeList類型)

示例代碼:app

<body>
<button name="btns">噠噠噠</button>
<button name="btns">噠噠噠</button>
<button name="btns">噠噠噠</button>
<button name="btns">噠噠噠</button>
<button name="btns">噠噠噠</button>
<button name="btns">噠噠噠</button>
<button name="btns">噠噠噠</button>
<button name="btns">噠噠噠</button>
<script>
    // name屬性不是惟一 - 獲得的結果多是多個,也多是一個
    var buttonElements = document.getElementsByName('btns');
    /*
        NodeList集合 - 類數組對象
          * 獲得每個對應元素的話 - 經過索引值
     */
    // 經過索引值獲得指定的name屬性
    console.log(buttonElements[4]);
    // 判斷buttonElements是不是節點列表
    console.log(buttonElements instanceof NodeList);// 調用結果爲 true
</script>
</body>

getElementsByClassName()方法

使用class屬性的值來查找指定元素的位置
會獲得所有帶有 class屬性的元素，以類數組表示獲得的元素（HTMLCollection類型）

示例代碼:函數

<body>
<button class="btns">噠噠噠</button>
<button class="btns">噠噠噠</button>
<button class="btns">噠噠噠</button>
<button class="btns">噠噠噠</button>
<button class="btns">噠噠噠</button>
<button class="btns">噠噠噠</button>
<button class="btns">噠噠噠</button>
<button class="btns">噠噠噠</button>
<script>
    var buttens = document.getElementsByClassName('btns');

    /*
    getElementsByClassName()方法
     * 以查找 class屬性值 的方式來定位指定元素的位置
     * 會獲得所有帶有 class屬性 的元素，以類數組表示獲得的元素（ HTMLCollection類型 ）
    */

    console.log(buttens);
</script>

querySelector()方法與querySelectorAll()方法

querySelector()方法 - 返回的是第一個匹配的元素
querySelectorAll()方法 - 返回的NodeList集合

示例代碼:測試

<body>
<button id="btn">按鈕</button>
<button class="btns">按鈕</button>
<button class="btns">按鈕</button>
<button class="btns">按鈕</button>
<button class="btns">按鈕</button>
<button class="btns">按鈕</button>
<script>
    // 該方法返回的是第一個匹配的元素
    var buttons = document.querySelector('#btn');
    console.log(buttons);

    var buttons1 = document.querySelector('.btns');
    console.log(buttons1);

    // querySelectorAll()方法返回的NodeList集合
    var buttons2 = document.querySelectorAll('btns');
    console.log(buttons2);
</script>
</body>

NodeList集合

動態集合與靜態集合prototype
- 動態集合(HTMLCollection) - 根據HTML元素變化而變化code
  - 該集合的length屬性值是變化的 - 影響後續的操做
- 靜態集合(NodeList) - 不會根據HTML元素變化而變化對象
  - 若是執行刪除操做 - 該集合中可能存在已不存在的元素

示例代碼:繼承

<body>
<button class="btns" id="btn">按鈕</button>
<button class="btns">按鈕</button>
<button class="btns">按鈕</button>
<button class="btns">按鈕</button>
<button class="btns">按鈕</button>
<script>
    /*
        動態集合與靜態集合
        * 動態集合(HTMLCollection) - 根據HTML元素變化而變化
          * 該集合的length屬性值是變化的 - 影響後續的操做
        * 靜態集合(NodeList) - 不會根據HTML元素變化而變化
          * 若是執行刪除操做 - 該集合中可能存在已不存在的元素
     */
    var btnElements = document.getElementsByClassName('btns');
    console.log(btnElements);// HTMLCollection

    /* 打印當前集合的長度
    console.log(btnElements.length);// 5
    // 刪除當前集合中某個元素
    var btn = document.getElementById('btn');
    var body = document.body;
    body.removeChild(btn);
    // 再一次打印當前集合的長度
    console.log(btnElements.length);// 4
    */

    var buttonElements = document.querySelectorAll('.btns');
    console.log(buttonElements);// NodeList

    // 打印當前集合的長度
    console.log(buttonElements.length);// 5
    // 刪除當前集合中某個元素
    var btn = document.getElementById('btn');
    var body = document.body;
    body.removeChild(btn);
    // 再一次打印當前集合的長度
    console.log(buttonElements.length);// 5
</script>
</body>

建立元素節點

用於建立新的元素節點

示例代碼:索引

<script>
    // 1.建立<button></button>元素
    var btn = document.createElement('button');
    // 2.獲取<body>元素
    var body = document.body;
    // 3.向<body>元素添加子節點
    body.appendChild(btn);

</script>

建立文本節點

用於建立新的文本節點

示例代碼:

<script>
    // 建立<button></button>元素
    var btn = document.createElement('button');

    /*
         建立文本節點
         爲新建立的元素節點添加文本節點
     */
    var textNode = document.createTextNode('按鈕');
    /*
        向<button>元素添加子節點
        
     */
    btn.appendChild(textNode);

    // 獲取<body>元素
    var body = document.body;
    /*
        向<body>元素添加子節點
        將建立的文本節點添加到指定的元素節點中 - 經過appendChild()方法進行添加
     */
    body.appendChild(btn);

</script>
</body>

建立屬性節點

用於建立屬性節點
注意 - 該方法只能接收一個參數，作爲屬性節點的屬性名，屬性值使用 nodeValue 建立

示例代碼:

<body>
<script>
    // 建立<button></button>元素
    var btn = document.createElement('button');

    /*
        建立文本節點 - 爲新建立的元素節點添加文本節點
     */
    var textNode = document.createTextNode('按鈕');
    // 向<button>元素添加子節點
    btn.appendChild(textNode);

    // 建立屬性節點 - 爲新建立的元素節點添加屬性節點
    var attrNode = document.createAttribute('id');
    // 爲屬性節點設置值
    attrNode.nodeValue = 'btn';
    // 爲<button>元素設置屬性節點
    btn.setAttributeNode(attrNode);

    // 獲取<body>元素
    var body = document.body;
    // 向<body>元素添加子節點
    body.appendChild(btn);

</script>
</body>

相關標籤/搜索

每日一句

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