一、直接获取节点
案例:
标签获取:
<div class="box box1" id="mybox1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
<div class="box box4">box4</div>
<span>我是span</span>
<form>
账号:<input type="text" name="account" value="11111111">
<br>
密码:<input type="text" name="pwd">
<br>
爱好:<input type="checkbox" name="hobby" id="1">吃
<input type="checkbox" name="hobby" id="2">喝
<input type="checkbox" name="hobby" id="3">嫖
<input type="checkbox" name="hobby" id="4">赌
<br>
<input type="submit" value="注册">
</form>
1. 通过css选择器获取
获取一个元素
// 有相同的类名时,只能获取到第一个
let box1=document.querySelector(".box1")
console.dir(box1)
获取多个元素
// 获取多个类名相同的元素,获取到的时一个数组
let box=document.querySelectorAll(".box")
console.log(box);
2.通过类名获取
可以获取多个,获取到的是数组
let leiming=document.getElementsByClassName("box1")
let leiming1=document.getElementsByClassName("box")
console.log(leiming);
console.log(leiming1);
3.通过id值获取
不用写# 获取到的不是数组
console.dir(document.getElementById("mybox1"));
4.通过标签名获取
获取到的是数组
console.log(document.getElementsByTagName("span"));
5.通过name属性获取
一个和多个都获取到的是数组
console.log(document.getElementsByName("account"));
console.log(document.getElementsByName("hobby"));
console.log(document.getElementsByName("account")[0].value);//获取input的value值
二、通过关系获取节点
案例:
通过关系获取节点:
<div class="bigBox">
<div class="box box1" id="mybox1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
<div class="box box4">box4</div>
<span>我是span</span>
<ul><!-- 这是注释 这有个换行 属于文本 -->
<li>列表1</li>
<li id="li2">列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<form>
账号:<input type="text" name="account">
密码:<input type="text" name="pwd">
<input type="submit">
</form>
</div>
1.获取元素的父节点
拿到的都是标签
console.log(document.getElementById("li2").parentElement);
console.log(document.getElementById("li2").parentNode);
2.获取子元素(子标签)
获取到的是类数组NodeList
console.log(document.querySelector("ul").children);
3.获取所有子节点
包括文本、标签、注释等,获取到的是数组
console.log(document.querySelector("ul").childNodes);
4.获取兄弟元素
①获取前一个
// 获取到前一个元素 只拿标签
console.log(document.getElementById("li2").previousElementSibling);
// 拿到前一个节点 包括文本
console.log(document.getElementById("li2").previousSibling);
② 获取后一个
// 获取后一个元素 只拿标签
console.log(document.getElementById("li2").nextElementSibling);
// 获取后一个节点 包括文本
console.log(document.getElementById("li2").nextSibling);
③获取第一个
// 获取第一个元素 只拿标签
console.log(document.querySelector("ul").firstElementChild);
// 获取第一个节点 包括文本
console.log(document.querySelector("ul").firstChild);
④获取最后一个
// 获取最后一个元素 只拿标签
console.log(document.querySelector("ul").lastElementChild);
// 获取最后一个节点 包括文本
console.log(document.querySelector("ul").lastChild);