var div1 = document.getElementsByClassName("类名");
var div2 = document.getElementById("id名");
var div3 = document.getElementsByName("name");
var div4 = document.getElementsByTagName("标签名");
var div5 = document.querySelector("选择器选择"); //重名选择第一个
var div5 = document.querySelectorAll("选择所有");
通过关系获取节点
父亲
document.querySelector().parentElement; //获取节点的父元素
document.querySelector().parentNode; //获取节点的父节点
大多数父节点和父元素是同一个 但是html标签没有父元素(null) 有父节点(document) 因为html外层没有元素了 document是节点不是元素标签
一般使用getElementByClassName,因为这个效率更高一点
儿子
document.querySelector().children; //获取节点的子元素们
document.querySelector().childNodes; //获取节点的子节点们
document.querySelector().firstChild; //获取节点的第一个子节点
document.querySelector().lastChild; //获取节点的最后一个子节点
document.querySelector().firstElementChild; //获取节点的第一个子元素
document.querySelector().lastElementChild; //获取节点的最后一个子元素
document.querySelector().children[0]; //获取节点的第一个子元素
document.querySelector().children[
document.querySelector().children.length - 1
]; //获取节点的最后一个子元素
兄弟
document.querySelector().nextElementSibling; //获取节点的下一个同级元素 没有返回null
document.querySelector().nextSibling; //获取节点的下一个同级节点 没有返回null
document.querySelector().previousElementSibling; //获取节点的上一个同级元素 没有返回null
document.querySelector().previousSibling; //获取节点的上一个同级节点 没有返回null