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

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