Document對象

時間 2019-12-11

標籤 document 對象简体版

原文原文鏈接

Document 對象表示瀏覽器加載的 HTML 頁面，並做爲查找 HTML 頁面內容的入口。它提供了全局函數，例如如何從 HTML 頁面中查找指定標籤或者在 HTML 頁面中如何建立標籤等。html

document對象代碼：瀏覽器

#document
<html lang = "en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(document);
    </script>
</body>
<html>

DOM查詢（獲取元素節點）函數

經過標籤的id屬性值獲取性能

語法結構：spa

document.getElementById( id屬性值 )

例：code

<div id="box"></div>
let box = document.getElementById("box");
console.log( box ); // <div id="box"></div>

經過標籤的class屬性值獲取htm

語法結構：對象

document.getElementsByClassName( class屬性值 )

例：blog

<div class="box"></div>
let box = document.getElementsByClassName("box");
console.log( box ); // [div.box]
console.log( box[0] ); // <div class="box"></div>

經過標籤名獲取ip

語法結構：

document.getElementsByTagName( 標籤名 )

例：

<div></div>
let divEle = document.getElementsByTagName("div");
console.log( divEle ); // [div]
console.log( divEle[0] ); // <div></div>

經過標籤的 name 屬性值獲取

語法結構：

1 document.getElementsByName( name屬性值 )

例：

1 <input type="text" name="username">
2 let divEle = document.getElementsByName("username");
3 console.log( divEle ); // [input]
4 console.log( divEle[0] ); // <input type="text" name="username">

經過 CSS 選擇器⽅式獲取

在 HTML5 新特性中提供了兩個能夠經過 CSS 選擇器方式來獲取 HTML 頁面標籤的方法： querySelector()

返回第一個選擇器匹配的 HTML 頁面元素。

1 <div class="box"></div>
2 <div class="box"></div>

1 var boxEle = document.querySelector(".box");
2 console.log( boxEle ); // <div class="box"></div>

1 querySelectorAll()

返回所有選擇器匹配的 HTML 頁面元素。

1 <div class="box"></div>
2 <div class="box"></div>
1 var boxEle = document.querySelectorAll(".box");
2 console.log( boxEle ); // [div.box, div.box]

注意：這兩個方法只能在 IE8 以後的版本才執行

總結

DOM 查詢方法咱們大體能夠分爲如下兩類：

傳統方式： getElementById 、 getElementsByClassName 、 getElementsByTagName 、 getElementsByName

優勢：性能好、查詢速度快

缺點：使⽤麻煩

HTML5 新增： querySelector 、 querySelectorAll

優勢：使用便捷

缺點：性能差、查詢速度慢

1. JavaScript_Window對象和Document對象
2. DOM對象之document對象
3. document對象
4. document 對象
5. javascript.dom-document對象
6. Document對象
7. Document 對象
8. JavaScript Document 對象
9. jsDOM對象 document
10. Window及document對象
更多相關文章...
• XML DOM - Document 對象 - XML DOM 教程
• XSLT document() 函數 - XSLT 教程
• RxJava操作符（一）Creating Observables
• RxJava操作符（九）Connectable Observable Operators

相關標籤/搜索

每日一句

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