dom的几种常见获取方法

dom的几种常见获取方法

<!-- 1.通过类名（getElementsByClassName） -->
div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
	let boxCollection = document.getElementsByClassName("box");
	let box1 = boxList[0];
	let box2 = boxList[1];
</script>


<!-- 2.通过ID获取（getElementById） -->

<div id="box"></div>
<script>
	let box = document.getElementById("box");
</script>

<!-- 3.通过name属性（getElementsByName） 表单-->

<div id="box">
	<input type="text" name="user" />
</div>
<script>
	let userInput = document.getElementsByName("user");
</script>


<!-- 4.通过标签名（getElementsByTagName） -->

<div id="box">
	<p>段落1</p>
	<p>段落2</p>
	<p>段落3</p>
	<p>段落4</p>
	<p>段落5</p>
	<p>段落6</p>
</div>
<script>
	let pCollection = document.getElementsByTagName("p");
</script>

<!-- 5.通过css选择器获取一个元素（querySelector） -->

<div id="box"></div>
<script>
	let box = document.querySelector("#box");
</script>

<!-- 7.通过选择器获取一组元素（querySelectorAll） -->

<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
<script>
	let box1 = document.querySelector(".box");  //只获取第一个元素
	let boxes = document.querySelectorAll(".box");//获取所有元素
</script>