HTML DOM总结

(一)什么是DOM?

DOM是文档对象模型(Document Object Model)的简称,就是把html文档解析成树的结构,文档中的所有内容都在生成的树中,我们可以通过获得树中的某个节点来对它的属性等进行操作。

例如下面图2就是图1的树结构:

                      图1                                           图2

DOM规定文档中的每个成分都是一个节点(Node),HTML文档可以说由节点构成的集合,DOM节点有以下三种:

标签节点 就是html里的标签,如上图中的<head><body><h1>之类的标签。标签的名字就是元素的名字
文本节点 就是文本,如<h1>标签包含"DOM结构示范"文本,那么这个文本就是文本节点
属性节点 被放在起始标签里,如<meta charset="UTF-8">,那么charset="UTF-8"就是属性节点

(二)DOM的基础操作

1.获取节点(如图):

2.改变节点(如图):

3.删除节点(如图):

4.增加节点(如图):

(三)DOM事件

1.概念:事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件

2. 格式:节点对象.on+事件名 = 事件处理程序;     div.onclick = function(){}

    (事件目标:节点对象  事件类型:事件名  事件处理程序:函数)

3.常见的事件类型

1)鼠标事件

2)键盘事件

3)表单事件

总结:

  事件还有很多其他的没有总结,学习之后会添加,如果有什么错误还请大佬们指正.

原文地址:https://www.cnblogs.com/lkylin/p/11249149.html