Commonly used methods include: 1. Get elements through ID; 2. Get elements through class names; 3. Get elements through tag names; 4. Get elements through CSS selectors; 5. Get elements through child elements or parent element Gets the element.

In JavaScript, there are several ways to read or get page elements. The following are some commonly used methods:

1. Get elements by ID

Using the document.getElementById() method, you can use the document.getElementById() method. ID to get the element. For example:

javascript

var element = document.getElementById("myElementId");

2. Get the element through the class name

Use document. getElementsByClassName() method, you can get elements by their class names. This method returns an HTMLCollection containing all matching elements. For example:

javascript

var elements = document.getElementsByClassName("myClassName");  
var firstElement = elements[0]; // 獲取第一個(gè)匹配的元素

3. Get the element through the tag name

Using the document.getElementsByTagName() method, you can get elements by their tag names. This method also returns an HTMLCollection containing all matching elements. For example:

javascript

var elements = document.getElementsByTagName("p"); // 獲取所有的<p>元素  
var firstParagraph = elements[0]; // 獲取第一個(gè)<p>元素

4. Get elements through CSS selectors

Using the document.querySelector() or document.querySelectorAll() method, you can get elements through CSS selectors. querySelector() returns the first element matching the selector, while querySelectorAll() returns a NodeList of all elements matching the selector. For example:

javascript

var element = document.querySelector(".myClassName"); // 獲取第一個(gè)具有指定類名的元素  
var elements = document.querySelectorAll("div > p"); // 獲取所有作為<div>元素直接子元素的<p>元素

5. Get elements through child elements or parent elements

You can also use the elements' children, firstChild, lastChild, parentNode and other attributes to obtain or traverse elements in the DOM tree. For example:

javascript

var parentElement = element.parentNode; // 獲取元素的父元素  
var firstChild = element.firstChild; // 獲取元素的第一個(gè)子節(jié)點(diǎn)（可能是元素或文本節(jié)點(diǎn)）  
var firstChildElement = element.firstElementChild; // 獲取元素的第一個(gè)子元素（忽略文本節(jié)點(diǎn)）

Please note that when you use getElementsByClassName(), When calling getElementsByTagName() or querySelectorAll(), a collection or list is returned instead of a single element. If you need to operate on one of these elements, you need to access it by index (such as elements[0]).

In addition, when you use properties such as firstChild and lastChild, what is returned may be text nodes or other types of nodes, not necessarily element nodes. If you only want to get element nodes, you can use properties such as firstElementChild and lastElementChild.

The above is the detailed content of How to read web page elements with javascript. For more information, please follow other related articles on the PHP Chinese website!