JS获取HTML DOM元素的方法

1.根据id获取标签元素
var div1=document.getElementById(“div1”);
console.log(div1);
结果为：

注：此方法必须使用document来获取元素；

2.根据标签名来获取标签列表
var divs=document.getElementsByTagName(“div”);
console.log(divs);
结果为：

2.1.若使用元素调用，指这个元素的子元素中的标签名是“div”的
var divs=div0.getElementsByTagName(“div”);
console.log(divs);
结果为：

3.根据className获取标签列表
var div2=document.getElementsByTagName(“div”);
console.log(div2);
结果为：

3.1.若使用元素调用，指这个元素的子元素中的className名是“div2”的
var div2=div0.getElementsByTagName(“div”);
console.log(div2);
结果为：

4.根据name获取节点列表
var sexs=document.getElementsByName(“sex”);
console.log(sexs);
结果为：

注：getElementsByName 不可以通过父元素获取

5.根据选择器获取到第一个找到的元素
（1）var div=document.querySelector(“div”);
console.log(div);
结果为：

（2）var div1=document.querySelector("#div1");
console.log(div1);
结果为：

（3）var div0=document.querySelector(".div2");
或者
var div0=document.querySelector("#div0>.div2");
console.log(div0);
结果为：

（4）var ps=document.querySelector("[name=password]");
console.log(ps);
结果为：

6.根据选择器获取到所有的元素
var div=document.querySelectorAll(“div”);
console.log(div);
结果为：

7.var diva=document.querySelector("#div0");
console.log(div0.children);//子元素
console.log(div0.parentElement);//父元素
console.log(div0.firstElementChild);//第一个子元素
console.log(div0.lastElementChild);//最后一个子元素
console.log(div0.nextElementSibling);//下一个兄弟元素
console.log(div0.previousElementSibling);//上一个兄弟元素

NS学员 徐艺玮
2020.4.6