1 什么是DOM?
以下是菜鸟网站上的
DOM是W3C的标准,DOM定义访问了HTML和XML文档的标准。
W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
1.1 定义文档的结构
DOM规范,将网页中的HTML文档抽象为内存中的文档对象(DOM TREE)。属中的每一个节点对象对应HTML 文档中的一个元素。
1.2 如何访问文档?
通过访问节点对象。
Document接口作为文档入口
Document 接口代表整个文档。JavaScript 中的对象 document 是对Document 接口的实现。
方法一:直接访问文档中的节点对象
方法 | 描述 |
---|---|
document.getElementsById | 通过id属性获取节点对象 |
document.getElementByName | 通过id属性获取节点对象 |
document/element.getElementsByTagName | 通过 tag 属性获取节点对象 |
document/element.getElementsByClassName | 通过class属性获取节点对象 |
document/element.querySelector | 通过 css 选择器 获取首个节点对象 |
document/element.querySelectorAll | 通过 css 选择器 获取所有节点对象 |
通过节点关系访问一个节点周围的节点对象
扫描二维码关注公众号,回复:
11809999 查看本文章
父节点(parentNode):获取所属父节点对象。
(ownerDocument):获取节点所属文档节点(根节点)对象。
兄弟节点(sibling nodes)
nextSibling:获取前一个兄弟节点的对象
nextElementSlibling:获取前一个兄弟元素节点对象
previousSibling:获取后一个兄弟节点对象。
previousElementSibling:获取所有子元素节点对象。
子节点(child nodes):
childNodes:获取所有子节点对象
children:获取所有子元素节点对象
hasChildNodes: 判断是否包含子节点对象
childElementCount:获取子元素节点对象数量
firstChild:获取第一个字节点对象
firstElementChild:获取第一个子元素节点对象
lastChild:获取最后一个字节点对象
lastElementChild:获取最后一个子元素节点对象