文章目录
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操作步骤
- 获取元素;
- 给获取的元素绑定事件(如点击事件);
- 添加事件处理(什么时机做什么操作)。
4、DOM获取页面元素
我们想要操作页面上的某部分(显示/隐藏,动画),需要先获取到该部分对应的元素,才进行后续操作。
HTML内容,一下获取元素的方式由此为例:
<div class="box1">
<div id="box2">
<div class="4">4</div>
</div>
<div class="box3">3</div>
</div>
<input type="text" name="input1">
1、根据id获取元素
document.getElementById//查找速度最快 传入的是id的名字而不是id选择器,不加#
var box2 = document.getElementById('box2');
console.log(box2);
2、根据类名class获取元素
document.getElementsByClassName
var box1 = document.getElementsByClassName('box1');
console.log(box1);
3、根据标签名获取元素
document.getElementsByTagName
var divs = document.getElementsByTagName('div');
console.log(divs);
4.根据属性名获取元素
document.getElementsByName
var input1 = document.getElementsByName('input1');
console.log(input1);
5、H5新增的两个方法
document.querySelector 获取第一个符合条件的元素
document.querySelectorAll 获取全部符合条件的多个元素
var box1