How to Get HTML elements from a webpage using JS _ Javascript tutorial

Source: Internet
Author: User
JavaScript: several methods for JS to obtain HTML elements in a webpage. Javascript tutorial

GetElementById getElementsByName getElementsByTagName

GetElementById, getElementsByName, getElementsByTagName

The last two are the collection, and the byid is only a single object.

GetElementById usage

For example:

Taoba

Reference Method on the same page:

1. Use id:

Link1.href, return a http://homepage.yesky.com

2. Use name:

Document. all. link1.href, return a http://homepage.yesky.com

3. Use sourseIndex:

Document. all (4). href // note that there are HTML, HEAD, TITLE, and BODY in front, so it is 4

4. Use a link set:

Document. anchors (0). href

// All sets include all, anchors, applets, areas, attributes, behaviorUrns, bookmarks, boundElements, cells, childNodes, children, controlRange, elements, embeds, filters, forms, frames, images, imports, links, mimeTypes, options, plugins, rows, rules, scripts, styleSheets, tBodies, TextRectangle, please refer to the MSDN introduction.

In fact, method 3 and method 4 use the same set, but one is all, which can include all the tags on the page, while anchors only includes links.

5. getElementById:

Document. getElementById ("link1"). href

6. getElementsByName:

Document. getElementsByName ("link1") [0]. href // This is also a set of all tags whose names are equal to the parameters included in the Method

7. getElementsByTagName:

Document. getElementsByTagName ("A") [0]. href // This is also A set of all tags whose names are equal to the parameters included in the Method

8. tags set:

Document. all. tags ("A") [0]. href

// Like Method 7, a set is obtained by Tag name.

In addition:

Event. scrElement can be referenced by the trigger time tag;

Document. elementFromPoint (x, y) can be used to obtain references to elements in the x and y coordinates;

Document. body. componentFromPoint (event. clientX, event. clientY) can be used to obtain the reference of the element where the mouse is located;

It can also be referenced through the relationship between parent and child nodes and sibling nodes of the element, such as nextSibling (the last node of the current node) and previussibling (the former node of the current node), childNodes, children, firstChild, lastChild, and parentElement are references of parent and child nodes and sibling nodes.

The above is a common reference method on the same page, and also involves

GetElementsByName returns a set of all elements whose names are specified values.

"Obtains the object set based on the value of the NAME tag attribute ."

The set is much loose than the array. The types of each item in the set can be different. The set only uses some elements as one type. In contrast, the array is much more rigorous, each subitem is of the same type. document. getElementsByName, document. getElementsByTagName, document. formName. all the results obtained by methods such as elements are collections.

Example:

The following is a reference clip:


Fish

Function get (){
Var xx = document. getElementById ("bbs ")
Alert ("tag name:" + xx. tagName );
}
Function getElementName (){
Var ele = document. getElementsByName ("happy ");
Alert ("Number of happy users without element:" + ele. length );
}
Script

Obtains the specified element of a file.



Document. getElementsByName () method. It processes one or more objects in the same way. We can use:

Temp = document. getElementsByName ('Happy ') to reference

When there is only one Temp, It is Temp [0]. When there are multiple Temp, we can use the subscript method Temp [I] to obtain them cyclically.

There are also exceptions:

In ie, when getElementsByName ("test") is returned, an array of objects with id = test is returned, while Firefox returns an array of objects with name = test.

According to w3c rules, the returned array is the object name = test.

GetElementByID in Firefox and ie are the same: Get the reference of the first object whose ID label attribute is the specified value.

Note that the getElementsByName has s in it.

Document. getElementById () can control the tag of an id

Document. getElementsByName () returns a set of elements with the same name attribute, rather than a set of elements. Note that "s" exists ".

Document. getElementsByTagName () returns a set of elements with the same TAG.

The same name can have multiple elements, so use document. getElementsByName ("theName ")

He returns a collection, which must be named index when referenced.

Var test = document. getElementsByName ('testclick') [0];

Id, which is unique

It should also be noted that there is no name attribute for the like, and its name attribute is a pseudo attribute document. getElementsByName () will expire. Of course, you can set the ID attribute for TD, and then use document. getElementsByID ("DDE_NODAY"); call

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.