通过ID名获取元素（getElementById）
上下文必须是document
必传参数，参数string类型
返回值：是一个元素对象，即当前id的对象（如果页面上没有你所获取的id，则返回null）
document.getElementById('id')
<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><div id="div_box"></div></body><script type="text/javascript">console.log(document.getElementById("div_box"));</script>
</html>
通过name属性的值获取元素（getElementsByName）
上下文必须是document
必传参数，参数是获取元素的name属性返回值：是一个伪数组，页面上没有对应标签的时候返回空数组
不推荐使用，在IE和欧朋浏览器中，通过这个方式会获取到相同的id元素
document.getElementsByName('name')<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><input type="checkbox" name="hobby" value="js">JavaScript</body><script type="text/javascript">console.log(document.getElementsByName("hobby"));</script>
</html>
通过标签名获取元素（getElementsByTagName）
上下文可以是document，也可以是一个元素，元素必须存在
参数是获取元素的标签名属性，不区分大小写
返回值：是一个伪数组，页面上没有对应标签的时候返回空数组
document.getElementsByTagName('p')<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><p></p><div></div></body><script type="text/javascript">console.log(document.getElementsByTagName("div"));console.log(document.getElementsByTagName("p"));</script>
</html>
通过类名获取元素（getElementsByClassName）
上下文可以是document，也可以是一个元素
参数是元素的类名
返回值：是一个伪数组，页面上没有对应标签的时候返回空数组
document.getElementsByClassName("class")<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><div class="class"></div></body><script type="text/javascript">console.log(document.getElementsByClassName("class"));</script>
</html>
获取html标签（document.documentElement）
document.documentElement是专门获取html这个标签的
<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body></body><script type="text/javascript">console.log(document.documentElement);</script>
</html>
获取body标签（document.body）
document.body是专门获取body这个标签的
<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body></body><script type="text/javascript">console.log(document.body);</script>
</html>通过选择器获取一个元素（document.querySelector）
上下文可以是document，也可以是一个元素
参数是选择器，如：div 、.className
返回文档中匹配指定的选择器组的第一个元素
document.querySelector(“选择器”)<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><div class="div_box"></div></body><script type="text/javascript">console.log(document.querySelector(".div_box"));console.log(document.querySelector("div.div_box"));</script>
</html>
通过选择器获取一组元素（document.querySelectorAll）
上下文可以是document，也可以是一个元素
参数是选择器，如：div 、.className
返回文档中匹配指定的选择器组的所有元素
返回值：是一个伪数组
document.querySelectorAll(“选择器”)<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div class="div_box"></div></body><script type="text/javascript">console.log(document.querySelectorAll(".div_box"));console.log(document.querySelectorAll('div.div_box'););</script>
</html>
通过子元素获取父节点（parentNode）
子元素.parentNode
<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><div id="parent"><div id="child"></div></div></body><script type="text/javascript">console.log(document.getElementById("child").parentNode);</script>
</html>通过父元素获取全部子节点（childNodes）
父元素.children
获取到的是一个伪数组，使用的时候需要加上下标，指定子元素
<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><div id="parent"><b id="child"></b><b id="child2"></b></div></body><script type="text/javascript">//获取parent下全部的子节点console.log(document.getElementById("parent").childNodes);//获取parent下第一个子节点console.log(document.getElementById("parent").firstChild);//获取parent下最后一个子节点console.log(document.getElementById("parent").lastChile);//获取parent上一个兄弟节点console.log(document.getElementById("parent").previousSibling);//获取parent下一个兄弟节点console.log(document.getElementById("parent").nextSibling);//拷贝一个列表项到另外一个列表console.log(document.getElementById("parent").cloneNode());</script>
</html>获取元素的属性（getAttribute）
元素对象.getAttribute(“属性”)//获取元素的高度属性
let height = document.getElementById("div_box").getAttribute("height");设置元素的属性（setAttribute）
元素对象.setAttribute('属性','属性值')let height = document.getElementById("div_box").setAttribute("style","width: 100px;height: 100px;");
