Javascript Document詳解

一、document對象概述

在 Web 頁面中，document 對象代表了整個 HTML 文檔。通過它可以獲得文檔的根元素、文檔的頭部信息以及文檔中的所有 HTML 元素。它是 JavaScript 語言訪問和操作頁面元素的主要方式。

例如，我們可以通過 document.getElementById('id') 方法獲取文檔中特定 ID 的 HTML 元素，並且可以使用 document.createElement('tagName') 方法在文檔中創建新的 HTML 元素。此外，document 對象還提供了許多其他有用的屬性和方法，如獲取文檔的 URL、title、cookie 等。

二、獲取頁面元素

通過 document 對象的各種方法，我們可以獲取文檔中的任何 HTML 元素，並且可以通過元素的屬性和方法來獲取和修改元素的內容、屬性等。下面介紹一些常用的方法：

1. getElementById

constelement=document.getElementById('example-id');
console.log(element.innerHTML);//獲取該元素的HTML內容
element.innerHTML='Newcontent';//修改該元素的HTML內容

該方法通過 HTML 元素的 ID 獲取元素對象。

2. getElementsByTagName

constelements=document.getElementsByTagName('p');
for(leti=0;i<elements.length;i++){
console.log(elements[i].innerHTML);//獲取所有<p>元素的HTML內容
}

該方法通過 HTML 標籤名稱獲取元素對象列表。

3. getElementsByClassName

constelements=document.getElementsByClassName('example-class');
for(leti=0;i<elements.length;i++){
console.log(elements[i].innerHTML);//獲取所有該類別的元素的HTML內容
}

該方法通過 HTML class 名稱獲取元素對象列表。

三、創建頁面元素

在 JavaScript 中，我們可以通過 document.createElement('tagName') 方法來創建新的 HTML 元素，並將其添加到文檔中。

constnewElement=document.createElement('p');
newElement.innerHTML='Newelement';//設置新元素的HTML內容
document.body.appendChild(newElement);//在body元素中添加新元素

這裡我們首先創建一個新的 <p> 元素，然後使用 innerHTML 屬性設置新元素的內容，最後使用 appendChild 方法將新元素添加到頁面中。

四、修改頁面元素

通過 document 對象獲取元素對象後，我們可以使用元素的屬性和方法來修改元素的內容、屬性等。

1. innerHTML

constelement=document.getElementById('example-id');
element.innerHTML='Newcontent';//修改該元素的HTML內容

innerHTML 屬性用於獲取或設置元素的 HTML 內容。

2. value

constinputElement=document.getElementById('example-input');
console.log(inputElement.value);//獲取輸入框的值
inputElement.value='Newvalue';//修改輸入框的值

value 屬性用於獲取或設置輸入框的值。

五、其它常用屬性和方法

1. document.URL

該屬性用於獲取當前文檔的 URL：

console.log(document.URL);//輸出當前文檔的URL

2. document.title

該屬性用於獲取或設置當前文檔的標題：

console.log(document.title);//輸出當前文檔的標題
document.title='Newtitle';//修改當前文檔的標題

3. document.cookie

該屬性用於獲取或設置當前文檔的 cookie：

console.log(document.cookie);//輸出當前文檔的cookie
document.cookie='name=value';//設置當前文檔的cookie

4. document.write

該方法用於將給定的字符串寫入文檔：

document.write('Hello,world!');//將字符串寫入文檔

注意：該方法不推薦使用，因為它會覆蓋文檔的內容。

結語

JavaScript 的 document 對象是訪問和操作 HTML 頁面元素的重要方式。我們可以使用各種方法獲取和修改頁面元素的內容、屬性等。在使用時要注意保持頁面的結構和語義，使頁面更易於維護和擴展。