05-DOM操作

加载页面时，将整个HTML文档转为DOM对象

元素查找

普通查找

方法名	作用
getElementById(Id属性值)	根据ID值找元素，只找第一个
getElementsByClassName(类名)	根据class值获取所有元素（数组）
getElementsByName(name属性值)	根据Name值获取所有元素（数组）
getElementsByTagName(标签名)	根据标签名获取所有元素（数组）

父元素找子元素

方法名	作用
父元素对象.children	找指定父元素所有子元素（数组）
父元素对象.firstElementChild	找指定父元素第一个子元素
父元素对象.lastElementChild	找指定父元素最后一个子元素

子元素找父元素

方法名	作用
元素对象.parentElement	找指定元素父元素

找兄弟元素

方法名	作用
元素对象.previousElementSibling	找指定元素前一个兄弟
元素对象.nextElementSibling	找指定元素后一个兄弟

选择器查找

方法名	作用
querySelector()	根据选择器找第一个元素
querySelectorAll()	根据选择器查找所有元素

元素操作

更改值

方法名	作用
对象.value	获取value属性值
对象.value = "值"	为value属性赋值

更改状态（选框）

方法名	作用
对象.checked	获取选中状态
对象.checked = true	选中
对象.checked = false	不选中

操作样式

方法名	作用
对象.style	操作style属性值
对象.checked = true	选中
对象.checked = false	不选中

元素添加

DOM.

方法名	作用
innerText	获取DOM元素内部文本
innerHTML	获取DOM元素内部的HTML代码

创建

方法名	作用
createElement("标签名")	元素节点
createTextNode("文本内容")	文本节点
DOM.setAttribute("属性名","属性值")	给指定节点添加属性

元素删除

方法名	作用
元素.remove()	删除自身和后代
元素.removeChild(子元素)	删除指定子元素