【JavaScript】DOM基础

一、什么是DOM？

       DOM（ Document Object Model）即文档对象模型，针对 HTML和 XML文档的 API（ 应用程序接口）。DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM脱胎于 Netscape及微软公司创始的 DHTML（动态 HTML），但现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。

       DOM中的三个字母，D（文档）可以理解为整个 Web加载的网页文档；O（对象）可以理解为类似 window对象之类的东西，可以调用属性和方法，这里我们说的是 document对象；M（模型）可以理解为网页文档的树型结构。

二、节点：

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

 

<div id="box">测试Div</div>

 

       节点分为三类：

       元素节点：其实就是标签，<div></div>

       文本节点：其实就是标签内的纯文本，测试Div

       属性节点：其实就是标签的属性，id="box"

三、查找元素的方法：

1、getElementById()方法

       getElementById()方法，接受一个参数：获取元素的ID。如果找到相应的元素则返回该元素的HTMLDivElement对象，如果不存在，则返回null。

 

document.getElementById('box'); //获取id为box的元素节点

       查找不到元素？是因为DOM操作必须等待HTML文档加载完毕，才可以获取。可以使用onload事件来处理JS，等
待html加载完毕再加载onload事件里的JS，就完美解决啦。

 

window.onload=function(){
	//这里存放当网页所有内容都加载完毕后，再执行的代码
}；

 

例子：

 

window.onload=function(){
	if(document.getElementById){
		var box=document.getElementById('box');
		alert(box);
	}else{
		alert('您的浏览器不兼容，请更换更高版本，谢谢！');
	}	
};

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

 

<div id="box" title="标题" class="pox" style="color:red;">测试Div</div>

 

window.onload=function(){
	var box=document.getElementById('box');
	alert(box.tagName);          //获取这个元素节点的标签名
	alert(box.innerHTML);        //获取这个元素节点里的文本（包含HTML标签）
	alert(box.title);            //获取title属性的值
	alert(box.style);            //获取style属性对象
	alert(box.style.color);      //获取style对象中color属性的值
	alert(box.className);        //获取class属性的值
};

2、getElementsTagName()方法

       getElementsByTagName()方法将返回一个对象数组 HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。

 

document.getElementsByTagName('*'); //获取所有元素
document.getElementsByTagName('li'); //获取所有 li元素，返回数组
document.getElementsByTagName('li')[0]; //获取第一个 li元素， HTMLLIElement
document.getElementsByTagName('li').item(0) //获取第一个 li元素， HTMLLIElement
document.getElementsByTagName('li').length; //获取所有 li元素的数目

3、getElementsByName()方法

 

       getElementsByName()方法可以获取相同名称(name)的元素，返回一个对象数组HTMLCollection(NodeList)。

 

document.getElementsByName('add') //获取 input元素
document.getElementsByName('add')[0].value //获取 input元素的 value值
document.getElementsByName('add')[0].checked//获取 input元素的 checked值

4、getAttribute()方法

 

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

 

getAttribute()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有一定区别。
document.getElementById('box').getAttribute('id');//获取元素的 id值
document.getElementById('box').id; //获取元素的 id值
document.getElementById('box').getAttribute('mydiv');//获取元素的自定义属性值
document.getElementById('box').mydiv //获取元素的自定义属性值，非 IE不支持
document.getElementById('box').getAttribute('class');//获取元素的 class值， IE不支持
document.getElementById('box').getAttribute('className');//非 IE不支持

5、setAttribute()方法

 

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

 

document.getElementById('box').setAttribute('align','center');//设置属性和值
document.getElementById('box').setAttribute('bbb','ccc');//设置自定义的属性和值

6、removeAttribute()方法

 

 

removeAttribute()可以移除 HTML属性。
document.getElementById('box').removeAttribute('style');//移除属性