如何在 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>