資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 JavaScript 中訪問 HTML 元素？
在 HTML 中，有時使用者需要訪問 HTML 元素以向用戶顯示不同的更改。我們可以透過使用現代化的JavaScript 來支援這一點。為了實現這一點，我們可以繼續使用以下技術更改 HTML 元素：
按 ID 獲取 HTML 元素
按 className 獲取 HTML 元素
按 Name 獲取 HTML 元素
按 tagName 獲取 HTML 元素
按 CSS 選擇器獲取 HTML 元素
下面我們添加了上述方法的演示。
按 ID 獲取 HTML 元素
此方法根據唯一 ID 獲取元素，並允許使用者訪問該元素。使用者可以使用 getElementById() 方法訪問和更新 HTML 內容。如果不存在具有給定 ID 的元素，則該方法返回 null。
語法
document.getElementById(element_ID);
引數 − 它獲取要訪問的元素的 ID。
返回值 − 它返回具有特定 ID 的物件。如果不存在具有特定 ID 的元素，則返回 null。
示例 1
#檔名：index.html
<!DOCTYPE html>
<html>
<head>
<title>DOM getElementById() Method</title>
</head>
<body>
<!-- Heading element with GeeksforGeeks id-->
<h1 id="elementId" style="color: green;">
Welcome To Tutorials Point
</h1>
<p>DOM getElementById() Method</p>
<script>
// Accessing the element by getElementById method
var temp = document.getElementById("elementId");
console.log(temp);
console.log(temp.innerHTML);
</script>
<body>
</html>輸出
按 className 獲取 HTML 元素
這從類名中選擇元素。我們可以為 HTML 中的每個元素提供一個類名，然後使用該類名訪問它。在這裡，我們將使用 getElementsByClassName() 方法來獲取和更新元素。
語法
document.getElementsByClassName(classnames);
引數 − 它獲取需要訪問的元素的類名作為輸入。
返回值 − 它返回具有特定類名的物件的集合。使用者可以使用索引訪問此集合。
示例 2
#檔名：index.html
<!DOCTYPE html>
<html>
<head>
<title>DOM getElementsByClassName() Method</title>
</head>
<body>
<h1 style="color: green;">Welcome To Tutorials Point</h1>
<!-- Multiple html element with GeeksforGeeks class name -->
<p class="className">Tutorials Point #1</p>
<p class="className">Tutorials Point #2</p>
<p class="className">Tutorials Point #3</p>
<b>DOM getElementsByclassName() Method</b>
<script>
// Accessing the element by getElementsByclassName method
var temp = document.getElementsByClassName("className");
console.log(temp[0]);
console.log(temp[1]);
console.log(temp[2]);
</script>
</body>
</html>輸出
按 Name 獲取 HTML 元素
在 JavaScript 中，我們可以使用 getElementsByName() 方法訪問元素。它幫助使用者透過名稱獲取元素。這裡的名稱是 HTML 元素的屬性名稱。
語法
document.getElementsByName(element_name);
引數 − 它獲取使用者想要訪問的元素的名稱作為輸入。
返回值 − 它返回具有特定名稱的元素集合。
示例 3
#檔名：index.html
<!DOCTYPE html>
<html>
<head>
<title>DOM getElementByName() Method</title>
</head>
<body>
<h1 style="color: green;">Welcome To Tutorials Point</h1>
<!-- Multiple html element with GeeksforGeeks name -->
<p name="attrName">Tutorials Point #1</p>
<p name="attrName">Tutorials Point #2</p>
<p name="attrName">Tutorials Point #3</p>
<p>DOM getElementsByName() Metho</p>
<script>
// Accessing the element by getElementsByName method
var temp = document.getElementsByName("attrName");
console.log(temp[0]);
console.log(temp[1]);
console.log(temp[2]);
</script>
</body>
</html>輸出
按 TagName 獲取 HTML 元素
在 JavaScript 中，我們可以使用 getElementsByTagName() 方法訪問具有給定標籤名稱的所有元素。此方法與 getElementsByName() 方法相同。在這裡，我們使用標籤名稱而不是元素名稱來訪問元素。
語法
document.getElementsByTagName(Tag_name);
引數 − 它獲取標籤名稱作為輸入
返回值 − 它返回包含作為引數傳遞的標籤名稱的元素集合。
示例 4
#檔名：index.html
<!DOCTYPE html>
<html>
<head>
<title>DOM getElementByTagName() Method</title>
</head>
<body>
<h1 style="color: green;">Welcome To Tutorials Point</h1>
<!-- Multiple html element with h1 tag -->
<p>TutorialsPoint #1</p>
<p>TutorialsPoint #2</p>
<p>TutorialsPoint #3</p>
<p>DOM getElementsByTagName() Method</p>
<script>
// Accessing the element by
// getElementsByTagName method
var temp = document.getElementsByTagName("p");
console.log(temp[0]);
console.log(temp[1]);
console.log(temp[2]);
</script>
</body>
</html>輸出
按 CSS 選擇器獲取 HTML 元素
我們可以使用 CSS 選擇器（例如類 ID 和 tagName）來選擇 HTML 元素。可以使用兩種方式使用 CSS 選擇器檢索 HTML 元素。querySelector() 方法返回與特定 CSS 選擇器匹配的第一個元素。querySelectorAll() 方法返回與特定 CSS 選擇器匹配的所有元素。
語法
document.querySelector(selectors); document.querySelectorAll(selectors);
引數 − 它接受不同的 CSS 選擇器作為引數，例如類、標籤名稱和 ID。
返回值 − querySelector() 方法返回與 CSS 選擇器匹配的第一個物件，而 querySelectorAll() 方法返回與 CSS 選擇器匹配的所有物件的集合。
示例 5
#檔名：index.html
<!DOCTYPE html>
<html>
<head>
<title>DOM querySelector() Method</title>
</head>
<body>
<h1 style="color: green;">Welcome To Tutorials Point</h1>
<!-- html element with classnames and id -->
<h1 class="tutorialsPoint" id="id1">TutorialsPoint #1</h1>
<h1 class="tutorialsPoint" id="id2">TutorialsPoint #2</h1>
<p class="tutorialsPoint">TutorialsPoint #3</p>
<script>
// Accessing the element by class name
// using querySelector
var temp = document.querySelector(".tutorialsPoint");
console.log(temp);
// Accessing the element by id using querySelector
temp = document.querySelector("#id2");
console.log(temp);
// Accessing the element by class name and
// id using querySelector
temp = document.querySelector(".tutorialsPoint#id2");
console.log(temp);
// Accessing the element by tag name that
// includes the particular class
temp = document.querySelector("p.tutorialsPoint");
console.log(temp);
</script>
</body>
</html>輸出
18K+ 次瀏覽
