DOM基础知识
1. HTML DOM简介
DOM 是 Document Object Model(文档对象模型)的缩写,通过HTML DOM 可以使用JavaScript动态的修改网页,给网页添加交互效果. 可以说, HTML DOM就是前端开发人员进入网页的API.
2. 理解DOM节点
- HTML DOM会将HTML文档解析成一个树状的结构,该结构被称为节点树.以下列的一个简单HTML文档为例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
- 上述文档所对应的节点树如下图所示. 在节点树中,最大的节点为document节点,也被称为根节点. 在节点中,各个节点根据包裹关系用于层级关系. 我们使用parentNode(父节点), childNode(子节点),siblingNode(兄弟节点)等词语去描述各个节点的这种关系. 在本例中:
- body——div和ul的parentNode(父节点)
- div/ul —— body的childNode(子节点)
- div和ul互为siblingNode(兄弟节点)
DOM节点树
3. HTML DOM常用知识点
- 常用方法
1. getElementById() //通过id获取元素
2. getElementsByTagName() //通过标签名获得元素的一组伪数组
3. createElement() //创建元素节点
4. appendChild() //往父节点最后插入节点
5. insertBefore() //在父节点指定位置插入节点
6. cloneNode() //复制节点
- 常用属性
1. innerHTML //设置或获取节点文本或标签
2. textContent //设置或获取节点中存文本
3. className //设置或获取节点的样式属性
4. HTML表单的常用属性
* text: disabled //文本框禁用
* checkbox: checked //多选框选中(true, false)
* option: selected //下拉菜单选中(true, false)
- 常用事件类型
1. onclick //点击事件
2. onmouseover & onmouseout //鼠标移入和移出
3. onfoucs & onblur //光标获得焦点和失去焦点
4. onchange //更改表单内容
5. onkeyup //按下键盘后抬起过程
6. ondbclick //双击事件
HTML DOM思维导图
HTML DOM.png
网友评论