<body>
<div class="father">
<form>
<input type="text" name="test">
<input type="password" name="test">
</form>
</div>
<div class="father" id="box">我是div</div>
</body>
-
1. 通过 id 获取指定元素 (getElementById) -- 了解
- 由于id不可以重复, 所以找到了就会将找到的标签包装成一个对象返回给我们, 找不到就返回 Null
- 注意点: DOM操作返回的是一个对象, 这个对象是宿主类型的对象(浏览器提供的对象)
let oDiv = document.getElementById("box"); console.log(oDiv); // <div class="father" id="box">我是div</div> console.log(typeof oDiv); // object -
2. 通过class名称获取 (getElementsByClassName) -- 了解
- 由于class可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
let oDivs = document.getElementsByClassName("father"); console.log(oDivs); -
3. 通过name名称获取 (getElementsByName) -- 了解
- 由于name可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
- 注意点: getElementsByName 在不同的浏览器其中工作方式不同。在IE和Opera中， getElementsByName() 方法还会返回那些 id 为指定值的元素。
let oDivs = document.getElementsByName("test"); console.log(oDivs); -
4. 通过标签名称获取 (getElementsByTagName) -- 了解
- 由于标签名称可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
let oDivs = document.getElementsByTagName("div"); console.log(oDivs); -
5. 通过选择器获取 (querySelector) -- 掌握
- 注意点: querySelector 只会返回根据指定选择器找到的第一个元素
let oDiv = document.querySelector("#box"); let oDiv = document.querySelector(".father"); let oDiv = document.querySelector("div>form"); console.log(oDiv); -
6.通过选择器获取 (querySelectorAll) -- 掌握
- 注意点: querySelectorAll 会返回指定选择器找到的所有元素
let oDivs = document.querySelectorAll("div"); console.log(oDivs);
