vue如何获取dom元素子节点

一、DOM 本质

DOM：document object model

document:：HTML 文档

object：JS 对象，把 HTML 文档结构映射存储为 JS 对象

model：document 与 object 的这种关系为 model

二、DOM 节点操作

1. 获取 DOM 节点

1.1 通过顶层 document 节点获取：

document.getElementById("ID")
document.getElementsByName("Name")
document.getElementsByClassName("className")
document.getElementsByTagName("tagName")

1.2 通过父节点获取

parentObj.firstChild：获取父节点下的第一个子节点（会将空格和换行计入），这个属性是可以递归使用的，即支持parentObj.firstChild.firstChild...的形式，如此就可以获得更深层次的节点。
parentObj.firstElementChild：获取父节点下的第一个子元素节点
parentObj.lastChild：获取父节点下的最后一个子节点（会将空格和换行计入）。与firstChild一样，它也可以递归使用。
parentObj.lastElementChild：获取父节点下的最后一个子元素节点
parentObj.childNodes：获取父节点下的所有直接子节点（会将空格和换行计入）
parentObj.children：获取父节点下的直接子元素节点。
parentObj.getElementsByTagName("tagName")
parentObj.getElementsByClassName("className")

1.3 通过子节点获取

childObj.parentNode : 获取子节点的直接父节点。w3c标准
childObj.parentElement : 获取子节点的直接父节点。IE标准

1.4 通过兄弟节点获取

neighbourObj.parentNode.children[..] :通过父节点间接获取已知节点的兄弟节点
neighbourObj.previousSibling：获取已知节点的上一个兄弟节点（会将空格和换行计入）
neighbourObj.previousElementSibling: 获取已知节点的上一个兄弟元素节点
neighbourObj.nextSibling：获取已知节点的下一个兄弟节点（会将空格和换行计入）
neighbourObj.nextElementSibling: 获取已知节点的下一个兄弟元素节点

1.5 通过CSS选择器获取

document.querySelector("..."): 返回匹配的第一个节点
document.querySelectorAll("..."): 返回匹配的所有节点