全面解析js选择器-js教程-PHP中文网

全面解析js选择器

怪我咯

发布： 2017-04-01 09:13:49

原创

1612人浏览过

原生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>
<p>我是通过标签获取</p>
<p id="box">我是通过id获取</p>
<p class="box1">我是通过class获取</p>
<form action="" name="box2">
  我是通过name获取
</form>
</body>
<script type="text/javascript">
  var p = document.getElementsByTagName("p");
  var box = document.getElementById("box");
  var box1 = document.getElementsByClassName("box1");
  var box2 = document.getElementsByName("box2");
</script>
</html

登录后复制

现代化家居响应式网站模板1.0

现代化家居响应式网站模板源码是以cmseasy进行开发的家居网站模板。该软件可免费使用，模板附带测试数据！模板源码特点：整体采用浅色宽屏设计，简洁大气，电脑手机自适应布局，大方美观，功能齐全，值得推荐的一款模板，每个页面精心设计，美观大方，兼容各大浏览器；所有代码经过SEO优化，使网站更利于搜索引擎排名，是您做环保类网站的明确选择。无论是在电脑、平板、手机上都可以访问到排版合适的网站，即便是微信等