HTML DOM基础解析

DOM基础知识

1. HTML DOM简介

DOM 是 Document Object Model(文档对象模型)的缩写,通过HTML DOM 可以使用JavaScript动态的修改网页,给网页添加交互效果. 可以说, HTML DOM就是前端开发人员进入网页的API.

2. 理解DOM节点

1. HTML DOM会将HTML文档解析成一个树状的结构,该结构被称为节点树.以下列的一个简单HTML文档为例

2. 上述文档所对应的节点树如下图所示. 在节点树中,最大的节点为document节点,也被称为根节点. 在节点中,各个节点根据包裹关系用于层级关系. 我们使用parentNode(父节点), childNode(子节点),siblingNode(兄弟节点)等词语去描述各个节点的这种关系. 在本例中:
   • body——div和ul的parentNode(父节点)
   • div/ul —— body的childNode(子节点)
   • div和ul互为siblingNode(兄弟节点)

DOM节点树

3. HTML DOM常用知识点

1. 常用方法

 1. getElementById()  //通过id获取元素
  2. getElementsByTagName() //通过标签名获得元素的一组伪数组
  3. createElement()  //创建元素节点
  4. appendChild() //往父节点最后插入节点
  5. insertBefore() //在父节点指定位置插入节点
  6. cloneNode() //复制节点

2. 常用属性

 1. innerHTML //设置或获取节点文本或标签
  2. textContent  //设置或获取节点中存文本
 3. className //设置或获取节点的样式属性
  4. HTML表单的常用属性
     * text: disabled   //文本框禁用
     * checkbox: checked   //多选框选中(true, false)
     * option: selected   //下拉菜单选中(true, false)

3. 常用事件类型

  1. onclick //点击事件
  2. onmouseover & onmouseout //鼠标移入和移出
  3. onfoucs & onblur //光标获得焦点和失去焦点
  4. onchange //更改表单内容
  5. onkeyup //按下键盘后抬起过程
  6. ondbclick //双击事件

HTML DOM思维导图

HTML DOM.png