Detailed explanation of JS access to DOM node method

The example in this article describes the JS method of accessing DOM nodes. Share it with everyone for your reference, as follows:

Find and access nodes

You can find the elements you want to operate in several ways:

By using getElementById() and getElementsByTagName() Method

By using the parentNode, firstChild and lastChild of an element node Properties

getElementById() and getElementsByTagName()

getElementById() and getElementsByTagName() are two methods that can find any HTML in the entire HTML document element.

These two methods ignore the structure of the document. If you wish to find all e388a4556c0f65e1904146cc1a846bee elements in the document, getElementsByTagName() will find them all, regardless of e388a4556c0f65e1904146cc1a846bee At which level in the document the element is located. Also, the getElementById() method returns the correct element, no matter where it is hidden in the document structure.

These two methods will provide you with any HTML elements you need, no matter where they are in the document!

getElementById() returns an element by a specified ID:

getElementById() Syntax

document.getElementById("ID");

Note: getElementById() does not work in XML. In an XML document, you must search by having an attribute of type id, which must be in the XML Declared in the DTD.

getElementsByTagName() The method returns all elements (as a list of nodes) that are descendants of the element you are in when you use this method, using the specified tag name.

getElementsByTagName() can be used for any HTML element:

getElementsByTagName() Syntax

document.getElementsByTagName("标签名称");

or:

document.getElementById('ID').getElementsByTagName("标签名称");

Example 1

The following example will return a node list of all e388a4556c0f65e1904146cc1a846bee elements in the document:

document.getElementsByTagName("p");

Example 2

The following example will return all e388a4556c0f65e1904146cc1a846bee elements A list of nodes, and these e388a4556c0f65e1904146cc1a846bee elements must have the id "maindiv" Descendants of the element:

document.getElementById('maindiv').getElementsByTagName("p");

Node List (nodeList)

When we use a node list, we usually save this list in a variable, like this:

var x=document.getElementsByTagName("p");

Now, the variable x contains all < in the page ;p> elements, and we can access these e388a4556c0f65e1904146cc1a846bee elements by their index numbers.

Note: Index numbers start from 0.

You can loop through the node list by using the length attribute:

var x=document.getElementsByTagName("p"); 
for (var i=0;i
You can also access a specific element by its index number. 
To access the third e388a4556c0f65e1904146cc1a846bee element, you can write: 
var y=x[2];
parentNode, firstChild and lastChild
These three attributes parentNode, firstChild and lastChild can follow the structure of the document and perform "short distance" in the document travel". 
Please look at the following HTML snippet: 
<table>  
<tr>   
<td>John</td>   
<td>Doe</td>   
<td>Alaska</td>  
</tr> 
</table>
In the above HTML code, the first b6c5a531a458a2e790c1fd6421739d1c is the first child element (firstChild) of the a34de1251f0d9fe1e645927f19a896e8 element, and the last b6c5a531a458a2e790c1fd6421739d1c
Is the last child element (lastChild) of the a34de1251f0d9fe1e645927f19a896e8 element. 
In addition, a34de1251f0d9fe1e645927f19a896e8 is the parent node (parentNode) of each b6c5a531a458a2e790c1fd6421739d1c element.