什么是DOM？
DOM 能够操作结构化文档（HTML XML）。
在网页中，HTML的结构化文档都是以树形结构储存的，每一个元素都是一个节点对象（Node），根节点是document对象。
节点对象（Node）三大属性
nodetype 节点的类型
| 属性 |
值 |
| document |
9 |
| element |
1 |
| attribute |
2 |
| text |
3 |
nodeName 节点名
| 属性 |
描述 |
| document |
#document |
| element |
全大写的标签名 |
| attribute |
属性名 |
| 文本节点 |
#text |
nodeValue 节点值
| 属性 |
描述 |
| document |
null |
| element |
null |
| attribute |
属性值 |
| text |
文本的内容 |
节点之间的关系
父子关系
| 属性 |
描述 |
| node.parentNode |
获得node的父节点 |
| node.childNodes |
获得node的所有子节点 |
| node.lastChild |
获得node的最后一个子节点 |
| node.firstChild |
获得node的第一个子节点 |
兄弟关系
| 属性 |
描述 |
| node.previousSibling |
返回当前节点的前一个兄弟节点 |
| node.nextSibling |
返回当前节点的下一个兄弟节点 |
节点树子集的关系
父子关系
| 属性 |
描述 |
| elem.parentElement |
返回一个父元素对象 |
| elem.child |
返回子元素的对象集合 |
| elem.firstElementChild |
返回第一个子元素对象 |
| elem.lastElementChild |
返回最后一个子元素 |
兄弟关系
| 属性 |
描述 |
| elem.previousElementSibling |
返回当前节点的前一个兄弟元素 |
| elem.nextElementSibling |
返回当前节点的下一个兄弟元素 |
查找DOM
name属性名查找
document.getElementByName('name名')
TagName元素查找
document.getElementsByTagName('div')
ID属性名查找
document.getElementById('Id名')
Class属性名查找
document.getElementsByClassName('Class名')
选择器查找
document.querySelector('选择器')
查找单个元素
document.querySelectorAll('选择器')
查找多个元 素
操作DOM
核心DOM
var alink = document.getElementById('alink')
获取属性值
alink.getAttribute('href')
修改属性值
alink.setAttribute('href','baidu.com')
判断属性值是否存在
alink.hasAttribute('href')
移除属性
alink.removeAttribute('href')
HTML DOM
获取属性值
alink.href
修改属性值
alink.href = 'baidu.com'
判断属性值是否存在
alink.traget = 'href'
移除属性
alink.href = ''
特殊属性：状态属性（disabled，selected，checked）不能使用核心DOM操作，只用使用HTML DOM操作
