JavaScript基础(21)_DOM简介、事件简介、文档加载

DOM简介

DOM，文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。这个接口定义了访问和操作HTML文档的标准方法，并通过分析器将html文档转换为树形结构（DOM节点树），利用该树形结构我们很容易的找到和操作网页中的每一个节点对象(node)，从而改变文档的结构，样式和内容。

DOM拆分：
文档(Document):文档表示的就是整个的HTML网页文档
对象(Object):对象表示将网页中的每一个部分都转换为了一个对象。
模型(Model):使用模型来表示对象之间的关系，这样方便我们获取对象

DOM节点树

比如一个简单的文档代码：

    



    
我的标题
    我的链接

该文档的所有节点，依照他们的层级可以把他们抽象为一种树状结构，如下所示：

节点(Node)
DOM最小的组成单位叫做节点。文档的树形结构，就是由各种不同类型的节点组成,每个节点可以看作是文档树的一片叶子。节点的类型有七种：Document、DocumentType、Element、Text、Comment、DocumentFragment。

节点类型
1.文档节点(document):整个文档
2.元素节点(Element):HTML文档中的HTML标签
3.属性节点(Attribute):元素的属性(属性节点并非是元素节点的子节点，而是元素节点的一部分)。
4.文本节点(Text):标签中的文本内容。
5.DocumentType
6.Comment:注释
7.DocumentFragment:文档的片段

节点属性

节点属性

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

如何操作节点对象
浏览器已经为我们提供了文档节点对象，这个对象是window对象的属性(document)，我们可以在页面中直接使用。文档节点代表的是整个网页。比如：

    按钮
    

事件(Event)简介

事件就是用户和浏览器之间的交互行为。比如：点击某个元素、将鼠标移动至某个元素上方，按下键盘上某个键，关闭窗口等等。

调用和响应事件
事件调用通常是通过操作HTML属性的方式来实现的，可称为“事件处理器”（event handler），方式分为两种：

1、在html中通过标签(元素)的属性来调用和响应事件（缺点：结构(html)和行为(javascript)耦合,不方便维护）。例如：

我是一个按钮

2、在script标签中通过定义一个变量来获取文档节点对象，通过该变量(对象)的指定属性来创建事件(绑定处理函数)，当触发时来响应事件。

    
    


    我是一个按钮

文档(document)加载

浏览器在加载一个页面时，是按照自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到body标签内页面的上边或者head标签内，在代码执行时，加载页面的时候会先加载script标签内的内容，此时页面还没有加载，DOM对象也就没有加载，这样会导致我们无法获取到DOM对象。

解决方法：
1、body标签内的js代码
将JS代码写到页面的下面，就是为了让其在页面加载完毕以后在执行，确保DOM对象的获取顺利。

2、head标签内的js代码
onload事件会在整个页面加载完成以后才会触发，给window绑定一个onload事件，该事件对应的响应函数将会使页面加载之后再执行，这样可以确保代码执行时，所有的DOM对象都已经加载完毕了。

示例：

    
    
    


    

        
        点我一下
    
    

    

        请点击我