| 标题 | js选择器全面解析 |
| 范文 | 下面小编就为大家带来一篇js选择器全面解析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。 原生JS选择器有getElementById、getElementsByName、getElementsByTagName和getElementsByClassName这四个,下面我就一个一个介绍这四个选择器的用法。 1.getElementById(通过ID获取元素) 用法:document.getElementById("Id");Id为要获取的元素的id属性值。 2.getElementsByName(通过name属性获取元素) 用法:document.getElementsByName("Name");Name为要获取元素的name属性值,这个方法一般适用于提交表单数据,当元素为form、img、iframe、applet、embed、object的时候设置name属性时,会自动在Document对象中创建以该name属性值命名的属性。所以可以通过document.domName引用相应的dom对象 3.getElementsByTagName(通过元素名称获取元素) 用法:document.getElementsByTagName(TagName);TagName为要获取元素的标签名称,当TagName为*的时候表示获取所有的元素,document也可以换成DOM元素,但是这样就只能获取到该DOM元素后面的子集元素。 4.getElementsByClassName(通过CSS类来获取元素) 用法：document.getElementsByClassName(ClassName);ClassName为要获取元素的CSS类名称,如果要同时获取多个的话,在每个CSS类后面用空格隔开。 如document.getElementsByClassName("class2 class1")就会获取到class1和class2样式的元素,document也可以换成DOM元素,这样也是只能获取到该DOM元素后面的子集元素。 <!DOCTYPE html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <div>我是通过标签获取</div> <div id="box">我是通过id获取</div> <div>我是通过class获取</div> <form action="" name="box2"> 我是通过name获取 </form> </body> <script type="text/javascript"> var div = document.getElementsByTagName("div"); var box = document.getElementById("box"); var box1 = document.getElementsByClassName("box1"); var box2 = document.getElementsByName("box2"); </script> </html> 以上就是小编为大家带来的js选择器全面解析全部内容了 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。