JS文檔對象模型（DOM）之從document獲取元素的方法

JS的DOM提供了多個方法來獲取頁面上的HTML元素，這些方法都可以通過Document對象來調用。下面我將從多個方面對document獲取元素的方法做詳細的闡述。

一、Document對象獲取元素的方法

Document對象是DOM的入口，該對象提供了許多方法來獲取頁面元素。其中，最常用的方法是getElementById和getElementsByTagName方法。

getElementById方法接受一個字符串參數，它是要獲取的元素的ID屬性的值。該方法返回一個具有給定ID的元素，如果沒有與該ID匹配的元素，則返回null。

getElementsByClassName方法與getElementById方法類似，只不過它接受的是一個類名，返回具有該類名的元素的集合。

getElementsByTagName方法接受一個字符串參數，它是要獲取的元素的標籤名。該方法返回一個具有給定標籤名的元素的集合。

//找到ID為“logo”的元素
var logo = document.getElementById("logo");

//找到類名為“nav”的所有元素
var nav = document.getElementsByClassName("nav");

//找到所有的p元素
var p = document.getElementsByTagName("p");

二、Document創建元素

Document對象不僅可以獲取頁面元素，還可以通過createElement方法創建新的HTML元素。這個方法返回一個新的元素對象，可以給該對象設置屬性。

Document.createElement是DOM提供的重要方法，它用於創建HTML元素，參數為創建的元素名稱。HTML標籤名必須是大寫的，例如而不是或。

為創建的HTML元素添加文本內容，使用Document.createTextNode()方法創建文本節點，然後將該節點追加到所創建的元素上。

//創建一個新的div元素
var newDiv = document.createElement("div");

//給新創建的div元素添加內容
var newText = document.createTextNode("這是一段新的文本。");
newDiv.appendChild(newText);

三、通過ID獲取頁面元素

我們常常需要根據頁面中的元素ID獲取該元素的引用。可以使用getElementById方法獲取該元素的引用。

例如，以下代碼獲取ID為”main”的元素：

var main = document.getElementById("main");

四、獲取元素的值

使用getElementById方法獲取元素後，可以通過該元素的屬性來獲取其值。常用的屬性有：

• value：獲取表單元素的值。
• innerHTML：獲取元素的HTML內容。
• src：獲取元素的URL。

例如，以下代碼獲取ID為”title”的元素的值：

var title = document.getElementById("title").innerHTML;

五、Document對象提供的方法

在JS的DOM中，Document對象還提供了很多其他有用的方法，例如：

• createTextNode(text)：創建一個文本節點，其中文本為text。
• createElement(tagName)：創建一個具有給定標記名稱的元素。
• appendChild(newNode)：將一個新的子節點添加到元素的子節點列表的末尾。
• replaceChild(newNode, oldNode)：將新的子節點替換舊的子節點。
• removeChild(node)：從元素的子節點列表中刪除一個子節點。

以下代碼演示了創建一個新的文本節點，並將其添加到一個新的div元素中：

var div = document.createElement("div");
var text = document.createTextNode("這是一段新文本");
div.appendChild(text);

六、Document獲取class元素

JS的DOM還提供了通過class屬性獲取元素的方法。我們可以使用getElementByClassName方法，該方法返回具有指定class的所有元素的集合。

例如，以下代碼獲取具有class”news-item”的所有元素：

var newsItems = document.getElementsByClassName("news-item");

七、Document隱藏元素的方法

在JS的DOM中，我們可以通過修改元素的style屬性來更改元素的樣式。我們可以設置元素的display樣式為”none”來隱藏元素。

以下代碼演示了如何隱藏ID為”main”的元素：

document.getElementById("main").style.display = "none";

以上就是從多個方面對document獲取元素的方法做詳細的闡述，包括Document對象獲取元素的方法、Document創建元素、通過ID獲取頁面元素、獲取元素的值、Document對象提供的方法、Document獲取class元素、Document隱藏元素的方法。DOM提供的方法非常靈活，可以大大改善我們在web開發中操作DOM的效率。