js选择器全面解析

前端技术 2023/09/04 JavaScript

原生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=\"box1\">我是通过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选择器全面解析全部内容了，希望大家多多支持phpstudy~

本文地址：https://www.stayed.cn/item/11183

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案