JS getElementsByTagName instance and shorthand method

Source: Internet
Author: User

function tag (Name,elem) {
if (!document.getelementsbytagname) return false;
Return (Elem | | document). getElementsByTagName (name);
}

document.getelementsbyclassname = function (Classname,obox) {
Applies to getting all HTML elements within an HTML block that contain a particular classname
this.d= Obox | | Document
var children = this.d.getelementsbytagname (' * ') | | document.all;
var elements = new Array ();
for (var II = 0; II < children.length; ii++) {
var child = Children[ii];
var classnames = Child.classname.split (');
for (var j = 0; J < Classnames.length; J + +) {
if (classnames[j] = = classname) {
Elements.push (child);
Break
}
}
}
return elements;
}

Document.getelementsbytype = function (Stypevalue,obox) {
Applies to getting all HTML elements within an HTML block that belong to a particular type, such as: Input,script,link, etc.
this.d= Obox | | Document
var children = this.d.getelementsbytagname (' * ') | | document.all;
var elements = new Array ();
for (var II = 0; II < children.length; ii++) {
if (Children[ii].type = = Stypevalue) {
Elements.push (Children[ii]);
}
}
return elements;
}

function $ () {
var elements = new Array ();
for (var II = 0; II < arguments.length; ii++) {
var element = Arguments[ii];
if (typeof element = = ' String ')
element = document.getElementById (element);
if (arguments.length = 1)
return element;
Elements.push (Element);
}
return elements;
}

$cls = function (s,o) {
Return Document.getelementsbyclassname (S,o);
};

$type = function (s,o) {
Return Document.getelementsbytype (S,o);
};

$tag = function (s,o) {
This.d=o | | Document
return This.d.getelementsbytagname (s);
};

$name = function (s) {//By name only for the entire document and cannot be scoped
return Document.getelementsbyname (s);
};


Definitions and usage
the getElementsByTagName () method returns a collection of objects with the specified label name.

Grammar
document.getElementsByTagName (tagname) description
The order in which the getElementsByTagName () method returns elements is the order in which they are in the document.

If you pass the special string "*" to the getElementsByTagName () method, it returns a list of all the elements in the document, and the order in which they are arranged is the order in which they are in the document.
Tips and comments
Note: Strings passed to the getElementsByTagName () method can be case-insensitive.
Instance
Example 1

<script type= "text/web Effects" >
function getelements ()
{
var x=document.getelementsbytagname ("input");
alert (x.length);
}
</script>
<body>

<input name= "Myinput" type= "text" size= "a"/><br/>
<input name= "Myinput" type= "text" size= "a"/><br/>
<input name= "Myinput" type= "text" size= "a"/><br/>
<br/>
<input type= "button" onclick= "GetElements ()"
Value= "How many input elements?"/>

</body>

You can use the getElementsByTagName () method to get a list of HTML elements of any type. For example, the following code can get all the tables in the document:

var tables = document.getelementsbytagname ("table");
Alert ("This document contains" + Tables.length + "tables");
Example 3
If you know a lot about the structure of a document, you can also use the getElementsByTagName () method to get a specific element in the document. For example, the following code can get a fourth paragraph in a document:

var Myparagragh = document.getElementsByTagName ("P") [3];
However, we still think that using the getElementById () method is more effective if you need to manipulate a particular element

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.