Today, I will introduce you to js Element Acquisition instances through class. There are two examples here. If you are interested, please refer to them. Two very good examples of js element and attribute acquisition through class.
Today, I read Baidu-web Front-end development engineer-pen questions and found a problem that I have long ignored.
Some colleagues used the code I wrote to retrieve elements, but the result was not obtained. For the reason, I believe that the class name she wrote contains "-", which will be processed as a metacharacter in the regular expression. So the code can be as written by the front-end:
| The Code is as follows: |
Copy code |
Var Tea = (function (){
Function getElementsByClassName (className, tag, parent ){
// ". All" is the usage in DHTML www. bKjia. c0m. When the tag is equal,
// If the browser supports ". all", use it. Otherwise, use the standard DOM method.
Var allTags = (tag = "*" & parent. all )? Parent. all: parent. getElementsByTagName (tag );
Var matchingElements = new Array ();
// Because '-' is a metacharacter in a regular expression, '-' in className is valid,
// Therefore, before writing className into a regular expression, escape '-' first '-'
ClassName = className. replace (/-/g ,"\-");
Var regex = new RegExp ("(^ | \ B)" + className + "(\ B | $ )");
Var element;
For (var I = 0; I <allTags. length; I ++ ){
Element = allTags [I];
If (regex. test (element. className )){
MatchingElements. push (element );
}
}
Return matchingElements;
}
Return {
GetElementsByClassName: getElementsByClassName
};
})(); |
Brother 99 in the group told the younger brother that such a matching method is not popular now. The following methods can be used:
| The Code is as follows: |
Copy code |
(''+ ClassName. toLowerCase () +''). indexOf (''+ class to be judged + '')! =-1
|
Example 2
| The Code is as follows: |
Copy code |
<Html>
<Head>
<Script type = "text/javascript">
Window. onload = function ()
{Var topMenus = getClass ('lil', 'topmenu ');
For (var I = 0; I <topMenus. length; I ++)
{
Alert (topMenus [I]. innerHTML );
}
}
Function getClass (tagName, className) // obtain the tagName and class name className elements.
{
If (document. getElementsByClassName) // This function is supported.
{Return document. getElementsByClassName (className );
}
Else
{Var tags = document. getElementsByTagName (tagName); // obtain the tag
Var tagArr = []; // returns an element with the class name className.
For (var I = 0; I <tags. length; I ++)
{
If (tags [I]. class = className)
{
TagArr [tagArr. length] = tags [I]; // save elements that meet the conditions
}
}
Return tagArr;
}
}
</Script>
</Head>
<Body>
<Ul id = "nav">
<Li class = "topMenu"> <a href = "#"> all here are product introductions </a>
<Ul class = "subMenu">
<Li> <a href = "#"> here all are product 1 </a> </li>
<Li> <a href = "#"> here all products are 2 </a> </li>
<Li> <a href = "#"> here all products are 3 </a> </li>
<Li> <a href = "#"> here all products are 4 </a> </li>
<Li> <a href = "#"> here all products are 5 </a> </li>
<Li> <a href = "#"> here all products are 6 </a> </li>
</Ul>
</Li>
<Li class = "topMenu"> <a href = "#"> service Introduction </a>
<Ul class = "subMenu">
<Li> <a href = "#"> Service 1 </a> </li>
<Li> <a href = "#"> Service 2 </a> </li>
<Li> <a href = "#"> Service 3 </a> </li>
<Li> <a href = "#"> service 4 </a> </li>
</Ul>
</Li>
<Li class = "topMenu"> <a href = "#"> success stories </a>
<Ul class = "subMenu">
<Li> <a href = "#"> case 1 </a> </li>
<Li> <a href = "#"> case 2 </a> </li>
<Li> <a href = "#"> case 3 </a> </li>
<Li> <a href = "#"> case 4 </a> </li>
</Ul>
</Li>
<Li class = "topMenu"> <a href = "#"> about what we will find you </a>
<Ul class = "subMenu">
<Li> <a href = "#"> we will find your 1 </a> </li>
<Li> <a href = "#"> we will find your 2 </a> </li>
<Li> <a href = "#"> we will find your 3 </a> </li>
<Li> <a href = "#"> we will find your 4 </a> </li>
</Ul>
</Li>
<Li class = "topMenu"> <a href = "#"> we will contact you here. We will contact you here. </a>
<Ul class = "subMenu">
<Li> <a href = "#"> here we will contact you for 1 </a> </li>
<Li> <a href = "#"> here we will contact you for 2 </a> </li>
<Li> <a href = "#"> here we will contact you for 3 </a> </li>
<Li> <a href = "#"> here we will contact you for 4 </a> </li>
<Li> <a href = "#"> contact us here to find your 5 </a> </li>
<Li> <a href = "#"> we will contact you here for your 6 </a> </li>
<Li> <a href = "#"> here we will contact you for 7 </a> </li>
</Ul>
</Li>
</Ul>
</Body>
</Html>
|
