版权声明：转载请注明出处 https://blog.csdn.net/SOALIN228/article/details/84146962
选取DOM元素的方法
| 方法 | 语法 | 说明 |
|---|---|---|
| 通过ID | getElementById() | 返回带有指定ID的元素 |
| 通过标签名 | getElementsByTagName() | 返回带有指定标签名的所有元 素，返回的是一个类数组对象 |
| 通过name属性 | getElementsByName() | 返回指定name属性值的所有 子元素的集合，返回的是一个 类数组对象 |
| 通过CSS类 | getElementsByClassName() | 返回指定class名称的元素 |
通过ID选取元素( getElementById() )
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
元素1
</div>
<script>
var box=document.getElementById("box");
console.log(box);
</script>
</body>
</html>
通过标签名选取元素( getElementsByTagName() )
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>前端开发</li>
<li>服务器端开发</li>
<li>UI设计</li>
</ul>
<script>
var lis=document.getElementsByTagName("ul");
var lis=document.getElementsByTagName("li");
console.log(ul);
console.log(li);
</script>
</body>
</html>
注:通过标签名选取的元素是一个类数组对象，下标从0开始
通过name属性选取元素( getElementsByName() )
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id ="infor">
<input type="checkbox" name="like">
<input type="checkbox" name="like">
<input type="checkbox" name="like">
<input type="checkbox" name="like">
</form>
<script>
var inputs=document.getElementsByName("like");
console.log(inputs);
console.log("获得到的带name属性的元素有：" + inputs.length + "");
</script>
</body>
</html>
注:通过标签名选取的元素是一个类数组对象，下标从0开始
通过CSS类选取元素( getElementsByClassName() )
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="news">
<p class="new1">新闻标题1</p>
<p class="new2">新闻标题2</p>
<p class="new1">新闻标题1</p>
</div>
<script>
var div=document.getElementsByClassName("news")[0];
var new1=div.getElementsByClassName("new1") ;
var new2=div.getElementsByClassName("new2") ;
console.log(div);
console.log(new1);
console.log(new2);
</script>
</body>
</html>
注:
- 通过标签名选取的元素是一个类数组对象，下标从0开始
- 通过getElementsByClassName(“news”)[0];获得到了第一个div，他的子元素在他基础上通过类选择器获取元素
- 如果直接写var div=document.getElementsByClassName(“news”);的或，获取的是类名为news的数组，而不是p标签的父元素