<div class="wrap">
<div id="wrap-con">
<input type="text" />
<div class="form-item">1</div>
<div class="form-item">2</div>
</div>
</div>
1、通过id选择器获取,获取的是唯一的值
const wrapDom = document.getElementById("wrap-con");
console.log(wrapDom);
/*
<div id="wrap-con">
<input type="text">
<div class="form-item">1</div>
<div class="form-item">2</div>
</div>
*/
2、通过class类名,获取的是一个dom数组,所有相同类名元素组成的数组
const formItems = document.getElementsByClassName("form-item");
console.log(formItems[0]);
/*
<div class="form-item">1</div>
* /
3、通过标签名,获取的是一个dom数组,所有相同标签元素组成的数组
const inputDoms = document.getElementsByTagName("input");
console.log(inputDoms[0]);
// <input type="text" />
4、通过es6新方法,querySelectorAll。获取的是一个dom对象数组,所有相同选择器元素组成的数组
const inputDoms2 = document.querySelectorAll("input");
const formItems2 = document.querySelectorAll(".form-item");
console.log(inputDoms2[0]);
console.log(formItems2[0]);
// <input type="text" />
// <div class="form-item">1</div>
4、通过es6新方法,querySelector。获取的是一个dom对象
const wrapDom2 = document.querySelector("#wrap-con");
console.log(wrapDom2);
/*
<div id="wrap-con">
<input type="text">
<div class="form-item">1</div>
<div class="form-item">2</div>
</div>
*/