概述

• 每個載入到瀏覽器中的HTML文檔都會生成一個對應的Document對象，通過操作該Document對象，可以達到操作該HTML文檔的目的；
• Document對象是DOM的核心對象(基礎對象);

常用屬性

• body

  • 提供body標簽元素的訪問（獲取body標簽對應的Element對象）。

    document.body;

• title

  • 提供title標簽元素的訪問（獲取title標簽對應的Element對象）。

    document.title='新標題';

• URL

  • 獲取當前頁面的URL。

    document.URL

• images

  • 獲取當前頁面所有圖片的訪問。(獲取所有img標簽對應的Element對象數組

    var imgElementArray=document.images; for(var imgEle of imgElementArray){console.log(imgEle);}

• forms

  • 獲取當前頁面所有表單的訪問。(獲取所有form標簽對應的Element對象數組)

var formElementArray=document.forms; for(var formEle of formElementArray){ console.log(formEle); }

常用函數

• getElementById()

  • 獲取當前頁面指定id屬性值的第一個元素對象。

  • 參數

    • 目標id屬性值。

  • 返回值

    • 查找到的Element元素對象。如果不存在指定元素，則返回null；
    var myDiv1Element=document.getElementById('myDiv');

• getElementsByTagName()

  • 獲取當前頁面指定標簽名稱的所有元素對象(元素集合)。

  • 參數

    • 目標標簽名稱。

  • 返回值

    • 查找到的Element元素對象集合。如果不存在指定元素，則返回空集合(長度為0)。

var divElementArray=document.getElementsByTagName('div'); for(var divEle of divElementArray){ console.log(divEle); }

• getElementsByClassName()

  • 獲取當前頁面指定class屬性值的所有元素對象(元素集合)。

  • 參數

    • 目標class屬性值。

  • 返回值

    • 查找到的Element元素對象集合。如果不存在指定元素，則返回空集合(長度為0)。

var demoClassElementArray=document.getElementsByClassName('demo'); for(var clEle of demoClassElementArray){ console.log(clEle); }

• getElementsByName()

  • 獲取當前頁面指定name屬性值的所有元素對象(元素集合)。

  • 參數

    • 目標name屬性值。

  • 返回值

    • 查找到的Element元素對象集合。如果不存在指定元素，則返回空集合(長度為0)。

var testNameElementArray=document.getElementsByName('test'); for(var nameEle of testNameElementArray){ console.log(nameEle); }

• querySelector()

  • 獲取指定CSS選擇器選擇結果中的第一個元素。

  • 參數

    • 目標CSS選擇器語法。

  • 返回值

    • 選擇結果中第一個Element元素對象。

var inputElement=document.querySelector('input[name="test"]');

• querySelectorAll()

  • 獲取指定CSS選擇器選擇結果中的所有元素。

  • 參數

    • 目標CSS選擇器語法。

  • 返回值

    • 存儲了選擇結果中所有Element元素對象的集合。

var divElementArray=document.querySelectorAll('div');

• createElement()

  • 創建指定名稱的元素節點，并將創建的元素節點作為返回值返回。

  • 參數

    • 目標標簽名稱。

  • 返回值

    • 創建的新元素對象。

var aElement=document.createElement('a');

• write()

  • 向當前HTML文檔寫出HTML內容。

  • 參數

    • 要寫出的HTML內容(字符串)。

  • 返回值

    • 無。

document.write(`<img src='圖片路徑'/>`);

• writeln()

  • 向當前HTML文檔寫出HTML內容后添加換行符(\n)。

  • 參數

    • 要寫出的HTML內容(字符串)。

  • 返回值

    • 無。

document.writeln(`<img src='圖片路徑'/>`);

總結

以上是生活随笔為你收集整理的前端基础知识--Document的常用属性和常用函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。