目录
- 什么是DOM？
- 节点对象（Node）三大属性
- nodetype 节点的类型
- nodeName 节点名
- nodeValue 节点值
- 节点之间的关系
-
- 节点树子集的关系
-
- 查找DOM
- name属性名查找
- TagName元素查找
- ID属性名查找
- Class属性名查找
- 选择器查找
- 操作DOM
-
什么是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操作
╰+哭是因爲堅強的太久メ
末蓝、
爱被打了一巴掌
朱雀
￡神魔★判官ぃ
还没有评论，来说两句吧...