DOM获取元素的方法

JavaScript中DOM获取元素的方法共有5中，分别有：

1.根据id获取元素：document.getElementById('id')方法，是由document对象提供的用于查找元素的方法。

(1)该方法返回的是拥有指定id的元素；

(2)如果没有找到指定id的元素则返回null；

(3)如果存在多个指定id的元素则返回第一个。

<div id="diyizhong">
  <ul>
  	<li>11111</li>
  	<li>22222</li>
  </ul>
</div>
<script>
    var yi=document.getElementById('diyizhong');
	console.log(yi)
</script>

2.根据标签名获取元素：getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

语法结构：document.getElementsByTagName('标签名');或element.getElementsByTagName('标签名');

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
	<ul>
		<li>首页</li>
		<li>产品</li>
	</ul>
</div>
<script>
    var box=document.getElementsByTagName('div');
    console.log(box)
	console.log(box2[1]);
</script>

注：返回的集合是一个类数组对象，它可以像数组一样用索引来访问元素，但不能使用push()等方法。

3.根据name属性获取元素：document.getElementsByName()方法，是通过name属性来获取元素，一般用于获取表单元素。name属性的值不要求必须是唯一的。多用于表单、按钮等。

语法结构：document.getElementsByName('name名');

<p>请您选择专业</p>
<label><input type="checkbox" name="major" value="云计算">云计算</label>
<label><input type="checkbox" name="major" value="大数据">大数据</label>
<label><input type="checkbox" name="major" value="人工智能">人工智能</label>
<script>
	var majors=document.getElementsByName('major');
	console.log(majors)
</script>

4.根据类名获取元素：getElementsByClassName()方法，用于通过类名来获得某些元素集合。

语法结构：element.getElementsByClassName('类名');

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
	<ul>
		<li>首页</li>
		<li>产品</li>
	</ul>
</div>
<script>
    var div=document.getElementsByClassName('box');
    console.log(div)
</script>

5.querySelector()和querySelectorAll()获取元素：querySelector()方法用于返回指定选择器的第一个元素对象。querySelectorAll()方法返回指定选择器的所有元素对象集合。

语法结构：document.querySelector(选择器)；

document.querySelectorAll(选择器);

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
	<ul>
		<li>首页</li>
		<li>产品</li>
	</ul>
</div>
<script>
    var firstBox=document.querySelector('.box');
    console.log(firstBox);
    var nav=document.querySelector("#nav");
	console.log(nav);
	var li=document.querySelector('li');
	console.log(li);
	var allBox=document.querySelectorAll('.box');
	console.log(allBox);
	var lis=document.querySelectorAll('li');
	console.log(lis);
</script>

注：选择器，String， 指定一个或多个匹配 CSS 选择器的元素。可以通过 id, class, 类型, 属性, 属性值等作为选择器来获取元素。

document对象的属性：

document对象的常用属性如下表：

方 法	作 用
document.body	返回文档的body元素
document.title	返回文档的title元素
document.documentElement	返回文档的html元素
document.forms	返回对文档中所有Form对象引用
document.images	返回对文档中所有Image对象引用

其他属性请参考：HTML DOM Document 对象 | 菜鸟教程

<script>
    var tit=document.title;
    console.log(tit);
    var bodyEle = document.body;
    console.dir(bodyEle);
    var htmlEle = document.documentElement;
    console.log(htmlEle);
    console.log(document.links);
  </script>