2.根据标签名获取元素:getElementsByTagName,返回一个数组;
3.根据类名获取元素:getElementsBClassName,返回一个数组;
4.根据name属性获取元素:getElementsByName,返回一个数组;
5.根据选择器获取元素:
1.querySelector:获取一个元素,推荐使用,用法类似写css;
语法:document.getElementById(“id属性的值”);
返回值：是一个元素对象，即当前id的对象（获取到元素则返回该元素，如果页面上没有你所获取的id，则返回null）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d1"></div>
</body>
<script type="text/javascript">
console.log(document.getElementById("d1"));
console.log(document.getElementById("d2"));
</script>
</html>
<div id="d1"></div>
null二、根据标签名获取元素:getElementsByTagName
语法：document.getElementsByTagName(“标签的名字”);
返回值：是一个伪数组，所以页面上没有对应标签的时候返回空数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div name="d1"></div>
<div name="d2"></div>
</body>
<script type="text/javascript">
console.log(document.getElementsByTagName("div"));
console.log(document.getElementsByTagName("p"));
</script>
</html>
HTMLCollection(2) [div, div, d1:div, d2:div]
HTMLCollection []三、根据类名获取元素:getElementsByClassName
语法：document.getElementsByClassName(“类样式的名字”);
返回值：是一个伪数组，所以页面上没有对应标签的时候返回空数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
<div class="c2"></div>
</body>
<script type="text/javascript">
console.log(document.getElementsByClassName("c1"));
console.log(document.getElementsByClassName("c2"));
</script>
</html>
运行结果如下:
HTMLCollection(2) [div.c1, div.c1]
HTMLCollection [div.c2]四、根据name属性的值获取元素:getElementsByName
语法：document.getElementsByName(“name属性的值”);
返回值：是一个伪数组，所以页面上没有对应标签的时候返回空数组
这个方法不推荐使用，因为在IE和欧朋浏览器中，通过这个方式会获取到相同的id的元素
五、根据选择器获取元素
1.1 document.querySelector();
语法：document.querySelector(“选择器”);
1.2 document.querySelectorAll();
语法：document.querySelectorAll(“选择器”)；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
</body>
<script type="text/javascript">
console.log(document.querySelector(".c1"));
console.log(document.querySelectorAll(".c1"));
</script>
</html>
运行结果如下:
<div class="c1"></div>
NodeList(2) [div.c1, div.c1]原文地址:https://blog.csdn.net/Ass12454548/article/details/128690900
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_36710.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
