DOM基础

学习目标

了解DOM的基本概念，以及实现在JavaScript中的作用

---

学习内容

1. 什么是DOM
2. 用DOM获取页面中的元素
3. 事件基础
4. 操作元素

---

一、什么是DOM

        文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。

        W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

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

二、用DOM获取页面中的元素

1.根据ID获取        getElementById() 

document.getElementById('id')

2.根据标签名获取        getElementsByTagName()

document.getElementsByTagName('标签名')

        注意：

        ① 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。

        ② 得到元素对象是动态的

3.通过HTML5新增的方法获取

document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象

document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合

document.querySelectorAll('选择器'); // 根据指定选择器返回

4.获取特殊元素（body、html）

document.body // 返回body元素对象

document.html // 返回html元素对象

三、事件基础

1.事件三要素

        事件源、事件类型、事件处理程序

2.常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标经离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
omouseup	鼠标弹起触发
onmousedown	鼠标按下触发

四、操作元素

1.改变元素内容

element.innerText

从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

2.常用元素属性操作

        ① innerText、innerHTML 改变元素内容

        ② src、href

        ③ id、alt、title

3.表单元素的属性操作

  利用DOM操作如下表单属性：

type、value、checked、selected、disabled

4.样式属性操作

  通过 JS 修改元素的大小、颜色、位置等样式

element.style    //行内样式操作
element.className    //类名样式操作