JS中DOM的学习

1.

什么是DOM? 

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

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

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

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

个人理解：
DOM是针对HTML和XML的API。 可以理解为DOM就是一系列功能集合。

2.

DOM可以用来干什么？ 
理解了DOM是API，就知道它就是一些功能，通过这些功能可以对HTML文档进行动态操作，从而实现许多动态交互效果。

3.

怎么使用DOM? 
通过javascript对HTML DOM进行访问。 
HTML DOM将html元素定义为对象，API以对象方法和对象属性的形式实现。 
可直接调用DOM实现的方法，进行DOM操作

例如：

使用方法选择元素：

document代表整个文档

html标签也在document之内

document.getElementById('')  //  选择对应的id元素。

document.getElementsByTagName('')  //  选择对应的标签元素。选择后会是一个类数组

document.getElementsByName('')  //选择对应的name属性元素，常用的标签（有表单，表单元素，img，iframe）

document.getElementsByClassName('') 根据类名选择元素
document.getElementsByTagName('')[0];
document.querySelector()  选出来的是一个元素

document.querySelectorAll()  选出来的是一组元素
把新的子节点添加到指定节点。 
removeChild() 
删除子节点。 
replaceChild() 
替换子节点。 
insertBefore() 
在指定的子节点前面插入新的子节点。 
createAttribute() 
创建属性节点。 
createElement() 
创建元素节点。 
createTextNode() 
创建文本节点。 
getAttribute() 
返回指定的属性值。 
setAttribute() 
把指定属性设置或修改为指定的值。

其他：近期的web项目中使用到了DOM来实现了tab栏切换的制作，这是前端页面制作的一个重点，后期将跟进BOM及定时器的学习。