【前端系列】一文看懂JavaScript中的常用DOM对象及如何使用

0.介绍

DOM全称Document Object Model，文档对象模型，他的作用就是将标记语言的各个组成部分封装成对应的对象。

1. Core DOM：

• Document：整个文档对象

整个html页面在运行时被封装为文档对象

• Element：元素对象

文档中的html标签被封装为元素对象

• Attribute：属性对象

标签的属性被封装为属性对象

• Text：文本对象

标签之间的文本被封装为文本对象

• Comment：注释对象

注释被封装为注释对象

2. XML DOM-XML文档标准模型
3. HTML DOM-HTML文档的标准模型（core的扩充）

• Image：<img>
• Button：<input type=’button’>

DOM树图解（即在编写html文件时html的结构）

DOM的主要作用：

• 能够改变html元素的内容
• 能够改变html元素的样式
• 能够对html的DOM事件做出相应的响应
• 能够添加和删除html元素

1.那么如何获取DOM对象呢？

Document对象中可以通过如下方式获取Element元素对象的函数

1. 根据每个标签的id属性值获取，返回单个Element对象

var docn = document.getElementById('docn');//将会返回id为docn的对象

2. 根据标签名称获取，返回Element对象数组

var divs = document.getElementsByTagName('div');//将会返回所有div标签的对象数组

3. 根据name属性值来获取，返回对象数组

var ages =document.getElementsByName('age');//将会返回name值为age的对象数组

4. 根据class属性值来获取，返回对象数组

var clss =document.getElementsByClassName('cls');//将会返回class值为cls的对象数组

获取到元素后即可通过元素拥有的属性或者方法对元素进行操作了，每个元素的属性和方法存在很多，详情官网文档或中文社区。推荐w3cschool