DOM基础应用

1、DOM简介

1、DOM 概念

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

它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。

DOM 是一 种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。

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

2、DOM 树

DOM 又称为文档树模型

（1）文档：一个网页可以称为文档，DOM中使用 document 表示

（2）节点：网页中的所有内容都是节点 （标签、属性、文本、注释等），DOM中用 node 表示

（3）元素：网页中的标签，DOM中使用 element 表示

（4）属性：标签的属性

注：DOM 把文档、节点、元素都看作是对象

3、DOM操作步骤

1. 获取元素；
2. 给获取的元素绑定事件（如点击事件）；
3. 添加事件处理（什么时机做什么操作）。

４、DOM获取页面元素

我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作。

HTML内容，一下获取元素的方式由此为例：

<div class="box1">
        <div id="box2">
            <div class="4">4div>
        div>
        <div class="box3">3div>
    div>
    <input type="text" name="input1">
1
2
3
4
5
6
7

1、根据id获取元素

document.getElementById//查找速度最快 传入的是id的名字而不是id选择器，不加#

var box2 = document.getElementById('box2');
console.log(box2);
1
2

2、根据类名class获取元素

document.getElementsByClassName

var box1 = document.getElementsByClassName('box1');
console.log(box1);
1
2

3、根据标签名获取元素

document.getElementsByTagName

var divs = document.getElementsByTagName('div');
console.log(divs
1