Detailed explanation of method examples for javascript to find and access dom nodes-JS Tutorial-php.cn

Detailed explanation of method examples for javascript to find and access dom nodes

伊谢尔伦

Release： 2017-07-20 11:42:21

Original

1294 people have browsed it

You can find the element you wish to operate on in several ways:

By using the getElementById() and getElementsByTagName() methods

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

##getElementById() and getElementsByTagName()

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

These two methods ignore the structure of the document. If you wish to find all

elements in the document, getElementsByTagName() will find them all, regardless of where the

element is located in the document. 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() can return elements by the specified ID:

getElementById() Syntax

document.getElementById("ID");

Copy after login

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

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

getElementsByTagName() can be used for any HTML element:

getElementsByTagName() Syntax

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

Copy after login

Or:

document.getElementById(&#39;ID&#39;).getElementsByTagName("标签名称");

Copy after login

Example 1

The following example will return all

in the document A node list of elements:

document.getElementsByTagName("p");

Copy after login

Example 2

The following example will return a node of all

elements list, and these

elements must be descendants of the element with id "mainp":

document.getElementById(&#39;mainp&#39;).getElementsByTagName("p");

Copy after login

NodeList (nodeList)

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

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

Copy after login

Now, The variable x contains a list of all

elements in the page, and we can access these

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;iCopy after login

You can also access a specific element by its index number .

To access the third

element, you would write:

var y=x[2];

Copy after login

parentNode, firstChild and lastChild

These three attributes parentNode, firstChild and lastChild can follow the structure of the document and perform "short distance travel" in the document.

Please look at the following HTML fragment:

<table>
 <tr>
  <td>John</td>
  <td>Doe</td>
  <td>Alaska</td>
 </tr>
</table>

Copy after login

In the above HTML code, the first is a element The first child element (firstChild), and the last is the last child element (lastChild) of the element.

In addition, is the parent node (parentNode) of each element.

The above is the detailed content of Detailed explanation of method examples for javascript to find and access dom nodes. For more information, please follow other related articles on the PHP Chinese website!