JS Access Dom node method detailed _javascript Skills

This article describes the JS Access Dom node method. Share to everyone for your reference, specific as follows:

Find and Access nodes

There are a number of ways you can find the elements you want to manipulate:

By using the getElementById () and getElementsByTagName () methods

By using the ParentNode, FirstChild, and LastChild properties of an element node

getElementById () and getElementsByTagName ()

getElementById () and getElementsByTagName () are two ways to find any HTML element in an entire HTML document.

Both of these methods ignore the structure of the document. If you want to find all the <p> elements in your document, getElementsByTagName () will find them all, regardless of the level of the <p> element in the document. Also, the getElementById () method returns the correct element, regardless of where it is hidden in the document structure.

Both of these methods will provide you with whatever HTML elements you need, regardless of where they are located in the document!

getElementById () can return elements by the specified ID:

getElementById () syntax

document.getElementById ("ID");

Note: getElementById () cannot work in XML. In an XML document, you must search by owning a property of the type ID, which must be declared in an XML DTD.

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

getElementsByTagName () can be used with any HTML element:

getElementsByTagName () syntax

document.getElementsByTagName ("label name");

Or:

document.getElementById (' ID '). getElementsByTagName ("tag name");

Instance 1

The following example returns a list of nodes for all <p> elements in the document:

document.getElementsByTagName ("P");

Instance 2

The following example returns a list of nodes for all <p> elements, and these <p> elements must be descendants of an element with an ID of "Maindiv":

document.getElementById (' Maindiv '). getElementsByTagName ("P");

Node List (nodelist)

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

var x=document.getelementsbytagname ("P");

Now, variable x contains a list of all the <p> elements in the page, and we can access these <p> elements through their index numbers.

Note: The index number starts at 0.

You can iterate through the list of nodes by using the Length property:

var x=document.getelementsbytagname ("P");
for (Var i=0;i<x.length;i++)
{
 //does something with each paragraph
}

You can also access a specific element through the index number.

To access the third <p> element, you can write this:

var y=x[2];

ParentNode, FirstChild and LastChild

These three properties parentnode, FirstChild, and LastChild follow the structure of the document, "travel short distances" in the document.

Take a look at the following HTML fragment:

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

In the above HTML code, the first <td> is the first child element of the <tr> element (FirstChild), and the last <td> is the last child element (LastChild) of the <tr> element.

In addition,<tr> is the parent node (parentnode) for each <td> element.

More readers interested in JavaScript-related content can view the site topics: "JavaScript Operation DOM Skills Summary", "JavaScript replacement Operation Tips Summary", "JavaScript Value manipulation Skills Summary", " JavaScript Coding Operation Tips Summary, "JavaScript in the JSON Operation tips Summary", "JavaScript switching effects and techniques summary", "JavaScript Search Algorithm Skills Summary", "JavaScript animation effects and Skills summary", " JavaScript error and debugging skills Summary, JavaScript data structure and algorithm skills summary, JavaScript traversal algorithm and skills summary and JavaScript mathematical calculation usage Summary

I hope this article will help you with JavaScript programming.