本文详解JavaScript DOM基础，包括文档对象模型的概念、节点树结构及元素、文本、属性三类节点。重点讲解getElementById、getElementsByTagName、getElementsByName等查找方法，以及getAttribute、setAttribute、removeAttribute等属性操作技巧，并包含IE低版本兼容性问题处理方案。
一、DOM基础
DOM（Document Object Model）即文档对象模型，是针对HTML和XML文档的应用程序接口（API）。它描绘了一个层次化的节点树，允许开发人员动态地添加、移除和修改页面的特定部分。在DOM概念中，D代表文档（Document），指代整个Web加载的网页文档；O代表对象（Object），指代类似Window或document这样的对象，具备可调用的属性和方法；M代表模型（Model），指代网页文档的树状结构。
1、节点
当HTML页面加载时，Web浏览器会生成一个树型结构来表示页面内部结构。DOM将这种树型结构理解为由节点组成。
从树型结构图中可以理解几个概念：html标签没有父节点和兄弟节点，因此html标签被视为根标签。head标签是html标签的子节点，而meta和title标签之间则是兄弟关系。如果将每个标签视为一个节点，这些节点组合在一起就形成了一棵节点树。 注：在后续内容中，我们常将标签称为元素，两者含义相同。
2、节点种类
示例：
<div title="属性节点">测试Div</div>节点主要分为三类：
- 1、元素节点：即HTML标签，例如：<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。 示例：
var box=document.getElementById('box'); //获取id为box的元素节点
alert(box);上述示例中，默认返回null。这并非因为id='box'的标签不存在，而是由于执行顺序的问题。
注：DOM操作必须等待HTML文档全部加载完毕后，才能获取元素。
解决方法：
1、将script调用标签移至HTML文档末尾；
2、使用onload事件来处理JS，等待HTML加载完毕后再执行onload事件中的JS代码。
window.onload=function(){
//这里存放当网页所有内容都加载完毕后，再执行的代码
};上述代码可以修改为：
window.onload=function(){
var box=document.getElementById('box'); //预加载html后执行
alert(box);
};注：id表示一个元素节点的唯一性，不能同时给两个或以上的元素节点创建相同命名的id。某些低版本浏览器可能无法识别getElementById()方法，此时需要进行兼容性判断：
if(document.getElementById){ //判断是否支持getElementById
alert('但前浏览器支持getElementById');
}上述示例中的代码最终修改为：
window.onload=function(){
if(document.getElementById){
var box=document.getElementById('box');
alert(box);
}else{
alert('浏览器不兼容，请更换浏览器');
}
};当我们通过getElementById()获取到特定元素节点时，该节点对象即被我们获取。通过这个节点对象，我们可以访问其一系列属性。
元素节点属性
| 属性 | 说明 |
| tagName | 获取元素节点的标签名 |
| innerHTML | 获取元素节点里的内容(即纯文本)，非W3C DOM规范 |
示例：
document.getElementById('box').tagName; //获取这个元素节点的标签名 输出DIV
document.getElementById('box').innerHTML; //获取这个元素节点里面的文本（包含HTML标签）HTML属性的属性
| 属性 | 说明 |
| id | 元素节点的id名称 |
| title | 元素节点的title属性值 |
| style | CSS内联样式属性值 |
| className | CSS元素的类 |
示例：
window.onload=function(){
var box=document.getElementById('box');
alert(box.id); //获取这个元素节点id属性的值，注意；不是属性节点
alert(box.title); //获取title属性的值
alert(box.style); //获取style属性对象
alert(box.style.color); //获取style属性对象中的color属性的值
alert(box.className); //获取class属性的值
};注：直接调用的属性也可以赋值
示例：
var box=document.getElementById('box');
box.id="KKK";
box.innerHTML="玩转<strong>JS</strong>"; //赋值，可以解析HTML，不是单独的文本（包含HTML标签）。2、getElementsByTagName()方法
getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList)，该数组保存着所有相同元素名的节点列表。该方法需要一个参数：HTML标签的名称。
document.getElementsByTagName('*'); //获取所有元素注：IE浏览器在使用通配符时，会将文档最开始的HTML规范声明当作第一个元素。
示例：
window.onload=function(){
var li=document.getElementsByTagName('li'); //参数传递一个标签名即可
alert(li); //返回一个数组集合，HTMLCollection
alert(li.length); //返回数组的个数
alert(li[0]); //HTMLliElement，返回数组的第一个
alert(li.item(0)); //返回数组的第一个
alert(li[0].tagName); //输出第一个LI标签
alert(li[0].innerHTML); //输出第一个<li>标签的文本：即1
};示例获取body节点：
window.onload=function(){
//获取body节点对象
var body=document.getElementsByName('body')[0];
alert(body); //返回HTMLBodyElement对象，body节点
};注：无论是getElementById还是getElementsByTagName，在传递参数时，并非所有浏览器都严格区分大小写。为防止不必要的错误和麻烦，必须养成区分大小写的习惯。
3、getElementsByName()方法
getElementsByName()方法可以获取具有相同名称（name）的元素，返回一个对象数组HTMLCollection(NodeList)。该方法需要一个参数：HTML标签的name属性的值。
示例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta/>
<title>DOM基础</title>
</head>
<body>
<div id="box" title="标题" class="pox" style="color:red">测试Div</div>
<input name="test" type="checkbox" value="测试" checked="checked">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
<script type="text/javascript" src="demo.js"></script>
</html>JS代码：
window.onload=function(){
var input=document.getElementsByName('test')[0];
alert(input.value); //输出：测试
alert(input.checked); //输出：true
};注：对于非HTML合法属性的获取，JS的兼容性存在差异。IE浏览器支持本身合法的name属性，而不合法的name属性则会出现兼容性问题。
4、getAttribute()方法
getAttribute()方法用于获取元素中某个属性的值。它与直接使用属性获取属性值的方法有一定区别。
示例：
window.onload=function(){
var box=document.getElementById('box');
alert(box.bbb); //自定义，W3C不合法，只有IE浏览器支持
alert(box.getAttribute('style')); //非IE返回的是style字符串，IE返回的是对象，这里有个不兼容的问题
alert(box.getAttribute('bbb')); //自定义，所有浏览器都兼容
};注：HTML通用属性style和onclick，在IE7及更低版本中，style返回一个对象，onclick返回一个函数式。虽然IE8已修复此bug，但为了更好的兼容性，开发人员应尽可能避免使用getAttribute()访问HTML属性，或针对特殊属性获取做特殊的兼容处理。
5、setAttribute()方法
setAttribute()方法用于设置元素中某个属性和值。它需要接受两个参数：属性名和值。如果属性本身已存在，则会被覆盖。
示例：
window.onload=function(){
var box=document.getElementById('box');
box.setAttribute('title','标题'); //创建一个属性和属性值
box.setAttribute('align','center'); //设置居中
box.setAttribute('bbb','ccc'); //设置自定义的属性和值
};注：在IE7及更低版本中，使用setAttribute()方法设置class和style属性是无效的。虽然IE8解决了此bug，但仍不建议使用。
6、removeAttribute()方法
removeAttribute()方法可以移除HTML属性。
示例：
window.onload=function(){
var box=document.getElementById('box');
box.removeAttribute('style'); //移除属性
};注：IE6及更低版本不支持removeAttribute()方法。
到此这篇关于JavaScript操作DOM对象详解的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持本站。