JavaScript文档对象模型总结

一 DOM介绍

D(文档):可以理解为整个Web加载的网页文档;
O(对象):可以理解为类似window对象之类的东西,可以调用属性和方法,这里说的是document对象;
M(模型):可以理解为网页文档的树形结构;

1.节点

加载HTML页面时,Web浏览器生成一个树形结构,用来表示页面内部结构;
DOM将这种节点结构理解为由节点组成;
html元素为根节点;head元素是html的子节点;meta元素和title元素之间是兄弟关系;

2.节点种类:元素节点/文本节点/属性节点
<div title="元素属性">测试Div</div>
元素节点 => div;
属性节点 => title="元素属性"
文本节点 => 测试Div二 查找元素

 

元素节点查找方法

方法 说明
getElementById() 获取特定ID元素的节点;
getElementsByTagName() 获取相同元素的节点列表;
getElementsByName() 获取相同名称的节点列表;
getAttribute() 获取特定元素节点属性的值;
setAttribute() 设置特定元素节点属性的值;
removeAttribute() 移除特定元素节点属性;

 

 

1.getElementById()

// 方法接收一个参数:获取元素的ID;
// 如果找到相应的元素则返回该元素的HTMLDivElement对象;如果不存在,则返回null;
document.getElementById('box'); // [object HTMLDivElement];
// 当我们通过getElementById()获取到特定元素节点时,这个节点对象就被我们获取到了;
// 而通过这个节点对象,我们可以访问它的一系列属性;

(1).访问元素节点的属性
属性 说明
tagName 获取元素节点的标签名;
innerHTML 获取元素节点里的内容,非W3C DOM规范;
document.getElementById('box').tagName; // =>DIV;
document.getElementById('box').innerHTML; // =>测试Div;

 

(2).访问HTML通用属性
属性 说明
id 元素节点的id名称;
title 元素节点的title属性值;
style CSS内联样式属性值;
className CSS元素的类;

document.getElementById('box').id; // =>id;
document.getElementById('box').title; // 获取title;

document.getElementById('box').style; // 获取CSSStyleDeclaration对象;
document.getElementById('box').style.color; // 获取style对象中的color的值;也就是设置在元素行内的样式值;
document.getElementById('box').style.color='red'; // 设置style对象中的color的值;

document.getElementById('box').className; // 获取class;
document.getElementById('box').className='pox'; // 设置class;

document.getElementById('box').bbb; // 获取自定义属性的值,非IE不支持;

2.getElementsByTagName()
// 方法返回一个对象数组HTMLCollection(NodeList)数组,这个数组保存着所有相同元素名的节点列表;
document.getElementsByTagName('*'); // 利用通配符获取所有元素;
// PS:IE在使用通配符时,会把文档最开始的html的规范声明当作第一个元素节点;

document.getElementsByTagName('li'); // =>[object HTMLCollection];获取所有li元素;
document.getElementsByTagName('li').[0]; // 获取第一个li元素;

 

3.getElementsByName()

获取相同名称(name)设置的元素,返回一个对象数组HTMLCollection(NodeList);
document.getElementsByName('add'); // 获取具有name='add'的input元素集合;
// PS:对于并不是HTML合法的属性,那么在JS获取的兼容性上也会存在差异;
// IE支持合法的name属性,但对于自定义的属性会出现不兼容问题;

 

4.getAttribute()
方法将获取元素中某个属性值;
但它和直接使用".attr"获取属性值的方法有一定区别;
document.getElementById('box').getAttribute('mydiv'); // 获取自定义属性值;
document.getElementById('box').mydiv; // 获取自定义属性值,仅IE支持;

 

5.setAttribute()
方法将设置元素中某个属性和值;接收两个参数:属性名和值;
如果属性本身已存在,那么就会覆盖;
document.getElementById('box').setAttribute('align','center'); // 设置属性和值;
// PS:在IE7及以下,使用setAttribute()方法设置class和style属性没有效果;

 

6.removeAttribute()
方法可以移除HTML属性;
document.getElementById('box').removeAttribute('style'); // 移除style样式属性;