通过 id 查找 HTML 元素
DOM 中查找 HTML 元素最简单的方法是使用元素的 id。
document.getElementById("div")
如果元素被找到,此方法会以对象返回该元素
如果未找到元素,myElement 将包含 null。
通过标签名查找 HTML 元素
查询指定父元素下指定标签的元素对象集合 (所有子代元素对象)
就算查找到的只有一个元素,也是放在集合中
document.getElementsByTagName("button")
通过类名查找 HTML 元素
需要找到拥有相同类名的所有 HTML 元素
查找任意父元素下指定calss属性的元素对象 返回一个集合(所有子代元素对象)
getElementsByClassName("span")
通过类名查找元素不适用于 Internet Explorer 8 及其更早版本。
返回的集合都是类数组,可以使用数组下标查找指定位置的值
nodeType : 返回值 number
document 文档 : 9
element元素 : 1
text 文本: 3
属性 : 2
通过返回值查看返回的是什么
node父子关系
node.parentNode 获得node的父节点
node.childNodes 获得node的直接子代节点
node.firstChild 获得node下的第一个子节点
node.lastChild 获得node下最后一个子节点
node兄弟关系
node.previousSibling 返回当前节点的前一个兄弟节点(同级)
node.nextSibling 返回当前节点的下一个兄弟节点(同级)
elem父子关系
elem.parentElement 返回父元素对象
elem.children 返回子元素对象集合
elem.firstElementChild 返回第一个子元素对象
elem.lastElementChild 返回最后一个子元素对象
elem兄弟关系
elem.previousElementSibling 返回当前元素的前一个兄弟元素(同级)
elem.nextElementSibling 返回当前元素的下一个兄弟元素(同级)
innerHTML : 获取元素内容/改变元素内容
通过层级关系看DOM树的结点