HTML DOM
之前学习JavaScript的时候大概了解了HTML DOM(文档对象模型),今天在菜鸟教程上学习的时候,把它系统的总结了一下。大家一起过来康康吧~更详细的可以参考菜鸟教程。
HTML DOM 节点
DOM Nodes
HTML中所有的内容都是节点:
- 整个文档是一个文档节点
- 每个HTML元素是元素节点
- HTML元素内的文本是文本节点
- 每个HTML属性是属性节点
- 注释是注释节点
HTML DOM 节点树
节点树中的节点拥有层级关系
- 在节点树中,顶端节点被称为根(root)
- 每个节点都有父节点、除了根(它没有父节点)
- 一个节点可拥有任意数量的子节点
- 同胞是拥有相同父节点的节点
HTML DOM 方法
常用的HTML DOM 方法
方法 | 描述 |
---|---|
getElementById() | 获取带有指定 id 的节点(元素) |
getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组) |
getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表 |
appendChild() | 把新的子节点添加到指定节点。 |
removeChild() | 删除子节点 |
replaceChild() | 替换子节点 |
insertBefore() | 在指定的子节点前面插入新的子节点 |
createAttribute() | 创建属性节点 |
createElement() | 创建元素节点 |
createTextNode() | 创建文本节点 |
getAttribute() | 返回指定的属性值 |
setAttribute() | 把指定属性设置或修改为指定的值 |
HTML DOM 属性
一些常用的HTML DOM 属性
- innerHTML - 节点(元素)的文本值
- parentNode - 节点(元素)的父节点
- childNodes - 节点(元素)的子节点
- attributes - 节点(元素)的属性节点 nodeName 属性--节点的名称
- nodeName是只读的
- 元素节点的nodeName与标签名相同
- 属性节点的nodeName与属性名相同
- 文本节点的nodeName始终是#test
- 文档节点的nodeName始终是#document nodeValue 属性--节点的值
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值 nodeType 属性--节点的类型
- 元素 nodeType:1
- 属性 nodeType:2
- 文本 nodeType:3
- 注释 nodeType:8
- 文档 nodeType:9
通常可以通过JavaScript(或其他语言)
getElementById()
方法getElementsByTagName()
方法getElementsByClassName()
方法来访问HTML元素以及修改HTML元素或者属性、样式和事件。