JavaScript操作DOM对象详解

一、dom基础

dom（document object model）即文档对象模型，针对html和xml文档的api（应用程序接口）。dom描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。dom中的三个字母，d（文档）可以理解为整个web加载的网页文档；o（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；m（模型）可以理解为网页文档的树型结构。

1、节点

加载html页面时，web浏览器生成一个树型结构，用来表示页面内部结构。dom将这种树型结构理解为由节点组成。

从上图的树型结构，我们理解几个概念，html标签没有父辈，没有兄弟，所以html标签为根标签。head标签是html标签的子标签，meta和title标签之间是兄弟关系。如果把每个标签当做一个节点的话，那么这些节点组合成了一棵节点树。
注：后面我们经常把标签称作为元素，是一个意思。

2、节点种类

示例：

节点分为三类：

•  1、元素节点：其实就是标签，即：<div></div>
•  2、文本节点：其实就是标签内的纯文本，即：测试div
•  3、属性节点：其实就是标签的属性，即：title=“属性节点”

二、查找元素

w3c提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作，分别为getelementbyid()、getelementsbytagname()、getelementsbyname()、getattribute()、setattribute()和removeattribute()。

元素节点方法

方法	说明
getelementbyid()	获取特点id元素的节点
getelementsbytagname()	获取相同元素的节点列表
getelementsbyname()	获取相同名称的节点列表
getattribute()	获取特点元素节点属性的值
setattribute()	设置特点元素节点属性的值
removeattribute()	移除特定元素节点属性

1、getelementbyid()

getelementbyid()方法，接受一个参数：要获取的元素的id。如果找到相应的元素则返回该元素的htmldivelement对象，如果不存在，则返回null。
示例：

上面的例子，默认情况返回null，这无关是否存在id='box'的标签，而是执行顺序问题。

注：dom操作必须等待html文档全部加载完毕以后，才可以获取元素。

解决方法：

1、把script调用标签移到html末尾即可；

2、使用onload事件来处理js，等待html加载完毕再加载onload事件里面的js。

上面的代码可以改为：

注：id表示一个元素节点的唯一性，不能同时给两个或以上的元素节点创建同一个命名的id。某些低版本的浏览器会无法识别getelementbyid()方法，这时需要做一些判断：

上面例子中的代码最终修改为：

当我们通过getelementbyid()获取到特定元素节点时，这个节点对象就被我们获取到了，而通过这个节点对象，我们可以访问它的一系列属性。

元素节点属性

属性	说明
tagname	获取元素节点的标签名
innerhtml	获取元素节点里的内容(即纯文本)，非w3c dom规范

示例：

html属性的属性

属性	说明
id	元素节点的id名称
title	元素节点的title属性值
style	css内联样式属性值
classname	css元素的类

示例：

注：直接调用的属性也可以赋值

示例：

2、getelementsbytagname()方法

getelementsbytagname()方法将返回一个对象数组htmlcollection(nodelist)，这个数组保存着所有相同元素名的节点列表。该方法需要一个参数：html标签的名称。

注：ie浏览器在使用通配符的时候，会把文档最开始的html的规范声明当作第一个元素。

示例：

示例获取body节点：

注：不管是getelementbyid还是getelementsbytagname，在传递参数的时候，并不是所有浏览器都必须区分大小写，为了防止不必要的错误和麻烦，我们必须坚持养成区分大小写的习惯。

3、getelementsbyname()方法

getelementsbyname()方法可以获取相同名称（name）的元素，返回一个对象数组htmlcollection(nodelist)。该方法需要一个参数：html标签的name属性的值。

示例：

js代码：

注：对于并不是html合法的属性，那么在js获取的兼容性上也会存在差异，ie浏览器支持本身合法的name属性，而不合法的就会出现不兼容的问题。

4、getattribute()方法

getattribute()方法将获取元素中某个属性的值。它和直接使用属性获取属性值的方法有一定区别。

示例：

注：html通用属性style和onclick，ie7更低的版本style返回一个对象，onclick返回一个函数式。虽然ie8已经修复了这个bug，但为了更好的兼容，开发人员只有尽可能避免使用getattribute()访问html属性了，或者碰到特殊的属性获取做特殊的兼容处理。

5、setattribute()方法

setattribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如果属性本身已存在，那么就会被覆盖。

示例：

注：在ie7及更低的版本中，使用setattribute()方法设置class和style属性是没有效果的，虽然ie8解决了这个bug，但还是不建议使用。

6、removeattribute()方法

removeattribute()方法可以移除html属性。

示例：

注：ie6及更低版本不支持removeattribute()方法。

到此这篇关于javascript操作dom对象详解的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持。