How to read web page elements with javascript

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]; // 获取第一个匹配的元素

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]; // 获取第一个<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"); // 获取第一个具有指定类名的元素  
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; // 获取元素的第一个子节点（可能是元素或文本节点）  
var firstChildElement = element.firstElementChild; // 获取元素的第一个子元素（忽略文本节点）

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!