Learning JavaScript 20 with ease: acquiring nodes for DOM programming learning

Source: Internet
Author: User
Tags custom name

What we're talking about here. Gets the node that contains the element node, the attribute node, and the text node. In general, we are able to manipulate HTML elements through the DOM. For

To do this, you must first find the element. It provides a convenient and simple way to locate nodes, so that we can quickly

Point of operation.

Let's start by writing a simple HTML document for us to test, and the JS code is written in the Window.onload event:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

(1) getElementById () method

The getElementById () method takes a parameter that is the ID value specified by an element so that the element node can be obtained. If you find a phase

The element that should be returned returns a component node object, or null if it does not exist. One thing to note here is that the ID represents the uniqueness of an element node,

You cannot create a named ID for two or more element nodes at the same time.

Get id= "BJ" element node var bjnode=document.getelementbyid ("BJ"); alert (bjnode);//Return object htmllielement represents the LI element node object, But IE will return object. At the same time, the low version of IE is incompatible.

When we get to a particular element node object through the getElementById () method, the element node object is acquired by us, and by

This element node object, we can access its series of properties.

Element Node Properties

Instance:
Gets the element node of id= "BJ" var Bjnode=document.getelementbyid ("BJ"); alert (bjnode.tagname);//returns the label name of the element node: Lialert ( bjnode.innerhtml);//Returns the contents of the text node of the element node: Beijing
The properties of an element node can also be changed in addition to the properties of the specified element node.
Get id= "BJ" element node var bjnode=document.getelementbyid ("BJ");//re-assign the attribute of the element node bjnode.innerhtml= "Hebei province";
The result of the re-assignment: The original Beijing was replaced by Hebei province
Properties of HTML Properties

Instance:

Gets the element node of id= "BJ" var Bjnode=document.getelementbyid ("BJ"); alert (bjnode.id);//Returns the value of the attribute node ID of the element node: Bjalert ( Bjnode.classname);//Returns the value of the attribute node class of the element node: Bjalert (Bjnode.style);//returns the inline style attribute node object of the Element node alert (bjNode.style.color);// Back to: Red

Properties for HTML properties can also be set, in addition to the values of the properties of the specified element node.

Get id= "BJ" element node var bjnode=document.getelementbyid ("BJ");//Set the property value of the element node inline style attribute node bjnode.style.color= "Blue";

Style effects not set before:


Style effect after setting:


(2) getElementsByTagName () method

The Getelementbytagname () method takes a parameter, which is the label name of the HTML element, so the method returns the number of objects

Group Htmlcollection, which holds a list of all nodes of the same element name.

Example one:

Gets the element node named Li, var linodes=document.getelementsbytagname ("Li"); alert (linodes); Returns: Object htmlcollection represents an array of element node objects alert (linodes.length);//returns; 8, there are indeed 8 Li elements in the current document alert (Linodes[0]);//Return: Object Htmllielement represents the LI element node object   

See the output Element node object, we can see this and with ID get element node object There is consistent, so we can also output elements

the label name and text content of the node. The difference between these two methods is that getElementById () is the method of the Document object, and

The Getelementbytagname () method is the method of the node interface, which means that any node has this method. Look at the following example:

Example two:

Gets the element node var Citynode=document.getelementbyid ("City") of the Id= "city";//Gets the element node of id= "City" that has all elements named Li in the element sub-node Var linodes= Citynode.getelementsbytagname ("Li"); alert (linodes); Returns: Object htmlcollection represents an array of element node objects alert (linodes.length);//returns; 4, the current document id= "City" element node does have 4 Li element alert (linodes[0]); /return: Object Htmllielement representing LI element node objects

From the output of the results see: Instance one is to get all the elements of the entire HTML document name Li element node, and instance two is to get the specified id= "City" meta

All elements in the element node are named the element child nodes of Li.

It says that if you get the element node object, you can get the attribute and text content of the element node.

Gets the element node named Li for all elements within the HTML document VAR linodes=document.getelementsbytagname ("Li"); alert (linodes[1].innerhtml);//output: Tianjin City
Here we also need to tell a very important to get the body node knowledge, in the back we do Dynamic HTML page This is very useful, because there is only one body node in the HTML document, so we can do this:
Gets the BODY element node Var bodynode=document.getelementsbytagname ("Body") [0];alert (Bodynode);//Return: Object Htmlbodyelement represents the BODY element node object

(3) Getelementbyname () method (typically the value of the Name property of a FORM element)

The Getelementsbyname () method can get an element node of the same name property, and returns an array of objects nodelist.

Instance:

Gets the element node name= "Sex" var inputnodes=document.getelementsbyname ("Sex"); alert (inputnodes);// Return: Objectnodelist represents an array of element node objects alert (inputnodes.length);//return: 2alert (inputnodes[0]);//Return: Object Htmlinputelement element Node Object

Similarly, we can also get and set the value of the attribute node of the element node:

Gets the element node name= "Sex" var inputnodes=document.getelementsbyname ("Sex"); alert (inputnodes[0].type);//return: Radioalert ( Inputnodes[0].value);//return: Male

When we use the Getelementsbyname () method to get the element node, we may encounter the problem that some elements are not legally

The name attribute of the HTML (which is also the custom name), then the compatibility of the JS get is different, ie browser support itself is legitimate the Name property, and

the problem of incompatibility arises when it is illegal. So we generally use this method less often, but the elements in the form can be used.

Gets the element node of name= "Beijing" var inputnodes=document.getelementsbyname ("Beijing"); alert (inputnodes[0]);//return: Object Htmllielement represents an Element node object, IE does not return

There are three more ways to do this: the GetAttribute () method is to get the value of an attribute in an element, and it is used directly with the. property to get the value of the property.

The SetAttribute () method is to set the value of an attribute in an element and the RemoveAttribute () method is an HTML property. As a result of their three methods, both

The capacitive is not very good, the use is also very few, therefore does not carry on the excessive narration.

Say so much, or simply summarize

One way to get the element nodes to use frequently:

(1) using the getElementById () method to get the corresponding individual element node through the id attribute

(2) Use the Getelementbytagname () method to get an array of specified element node names based on the tag, array object Length property can get array

The length.

(3) Use the Getelementsbyname () method to get the corresponding form element node based on the Name property.

Two methods for getting attribute nodes to use frequently

Because property nodes are properties of a specified element node, you can obtain the corresponding individual element by first using the getElementById () method through the ID property

The node then reads the specified property in such a way as to get and set the value of the attribute node.

Three Gets the text node (the child node of the element node when the text node)

The first is to obtain the element node using the method of acquiring the element node, and then use the attribute innerHTML attribute of the element node to get the text in the textual node.

This content, where the text content contains HTML tags. In the back we will have a property to get the text node, be sure to note the difference, which I

they're behind . a blog post to distinguish.

This is just the method of this blog post, mentioned later will continue to improve!



Learning JavaScript 20 with ease: acquiring nodes for DOM programming learning

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.