JavaScript操作DOM对象

DOM操作

DOM是Document Object Model 的缩写，即文档对象模型.是基于文档编程的一套API接口，由于大部分主流的浏览器都执行了这个标准，因此基本解决了浏览器兼容性的问题。
使用JavaScript操作DOM时分为三个方面: DOMCore (核心). HTML——DOM 和CSS ——DOM。通过这些标准，开发人员可以让网页真正地动起来，动态地增加、修改、删除数据，使用户与计算机的交互更加便捷，交互也更加丰富。

DOM Core
DOM Core不是JavaScript 的专属品，任何一种支持DOM的编程语言都可以使用它，它的用途不仅限于处理一种使用标记语言编写出来的文档，如HTML。
HTML—DOM
使用JavaScript和DOM为HTML文档编写脚本时，有许多专属的HTML-DOM属性，HTML-DOM出现的比DOM Core更早，它提供了一些更简单的标记来描述各种HTML 元素的属性，如document.forms.获取表单对象。
CSS—DOM
CSS—DOM是针对CSS的操作，在JavaScript中，CSS—DOM技术的主要作用是获取和设置style对象的各种属性，即CSS属性，通过改变style对象的各种属性，可以使用网页呈现出各种不同的效果。

节点和节点的关系
DOM是以树状结构组织的HTML文档，根据DOM概念，我们可以知道，HTML 文档中每个标签或元素都是一个节点。
DOM中是这样规定的
1.整个文档是一个文档节点。
2.每个HTML标签是一个元素节点。
3.包含在HTML元素中的文本是文本节点。
4.每个HTML属性是一个属性节点。
5.注释属于注释节点。

获取元素样式
style属性获取样式的属性值语法:
HTML元素.style.样式属性;
currentStyle对象包含style特性语法:
HTML元素.currentStyle.样式属性;
getComputedStyle()方法;方法接收两个参数,获取样式的属性值语法:
document.defaultView.getComputedStyle(元素,null).属性;

访问节点

使用DOM Core访问HTML文档的节点主要有两种方式：一种是使用getElerment系列方法访问指定节点，另外一种是根据节点的层次关系访问节点。

使用getElerment系列方法访问指定节点：
在HTML文档中，访问节点的标准方法就是我们之前学习的getElement 系列方法，即getElementByld( )、getElementsByName( )和glerentsByTagName()，只是它们查找的方法略有不同。
getElementByld( )返回按id属性查找的第个对象的引用。
getElementsByNarme(): 返回按带有指定名称name查找的对象的集合，由于一个文档中可能会有多个同名节点(如复选框、单选按钮)，因此返回的是元素数组。
getElenstsByTagName(): 返回带有指定标签名TagName 查找的对象的集合，由于一个文档中可能会有多个同类型的标签节点(如图片组、文本输入框)，因此返回元素数组。
根据层次关系访问节点
通过getElementById()，getElementsByName（）和getElenmentsByTagName( )这三种方法可查看HTML文档中的任何元素，但是这三种方法都会忽略文档的结构， 因此在HTML DOM中提供了如下一些节点属性这些属性可遵循文档的结构在文档的局部进行“短距离地查找元素。
语法
document . document Element.scrollTop;
document . documentElement .scrollLeft;
或者
document . body . scrollTop;
document . body. scrollLeft;