DOM1

1.DOM 简介

1.1 什么是 DOM

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

 

1.2 DOM 树

 

文档：一个页面就是一个文档，DOM 中使用 document 表示 元素：页面中的所有标签都是元素，DOM 中使用 element 表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示 DOM 把以上内容都看做是对象

2.获取元素

2.1 如何获取页面元素

DOM在我们实际开发中主要用来操作元素。 我们如何来获取页面中的元素呢?

获取页面中的元素可以使用以下几种方式: 根据 ID 获取 根据标签名获取 通过 HTML5 新增的方法获取 特殊元素获取

// 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        // 2. get 获得 element 元素 by 通过 驼峰命名法 
        // 3. 参数 id是大小写敏感的字符串
        // 4. 返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);

console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法

2.2 根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。

 document.getElementById('id');
​

使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。