DOM基础知识

1.DOM介绍

DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。

(注意：IE中的DOM和其他浏览器有区别，IE中用的是COM)

2.节点分类：

元素节点，文本节点，属性节点

比如：<span id=myid>文本内容</span>

那么元素结点就是span，文本节点就是：文本内容，属性节点就是：id=myid

3.节点操作

注意事项：获取元素需要文档加在完毕才能获取，所以js要在文档加在之后执行，可以将js放在文档最后或者使用window.onload=function(){js代码}

3.1getElementById()获取指定ID元素的节点，比如document.getElementById(‘divid’)这样就可以获取到id为divid的节点对象（注意id唯一性）

由于我们获取到的是对象，所以可以使用该对象下面的属性tagName获取元素节点的标签名，innerHTML获取元素节点里面的内容

完整例子：

<div id=”divid” title=”标题” class=”myclass” style=”color:red;”>这是内容部分1</div>

<script type=”text/javascript”>

//获取div元素

var val=document.getElementById(‘divid’);//获取id=divid的元素

var tag=val.tagName;

document.write(tag);//DIV

document.write(‘<br>’);

var  content=val.innerHTML;

document.write(content);//输出：这是内容部分1

document.write(‘<br>’);

document.write(val.id);//输出id的值

document.write(‘<br>’);

val.id=’test’;//设置id的值为test

document.write(val.id);

document.write(‘<br>’);

val.title=’新的标题’;

document.write(val.title);

document.write(‘<br>’);

document.write(val.style.color);//获取color的值

val.style.color=’blue’;//设置新的颜色

document.write(‘<br>’);

document.write(val.className);//获取class的值,修改同上

3.2getElementsByTagName()获取相同元素的节点列表

<ul>

<li>第一个li标签</li>

<li>第二个li标签</li>

<li>第三个li标签</li>

</ul>

<script type=”text/javascript”>

var tag=document.getElementsByTagName(‘li’);

//tag[0]和tag.item(0)都可以获取到第一个li标签元素

document.write(tag.item(0).innerHTML);//这样就会获取到第一个li的内容

document.write(tag.length);//获取到li的总个数

</script>

结果就是

第一个li标签3

3.3getElementsByTagName()获取相同名称的元素（注意是根据name的值来获取）

<input name=”addin” value=”为空”  type=”text” />

<input name=”addin” value=”” type=”text” />

<input name=”addin” value=”” type=”text” />

<script type=”text/javascript”>

var tag=document.getElementsByName(‘addin’);

//tag[0]和tag.item(0)都可以获取到第一个li标签元素

document.write(tag.item(0).value);//这样就会获取到第一个name=addin的input标签的value的值

</script>

这样就会输出为空

3.4getAttribute()获取元素中某一个属性的值

上面讲到getElementById中用.id获取id的值是有区别的（使用getAttribute兼容性更高一些）

3.5setAttribute()需要两个参数，一个是属性名，一个是属性值

3.6removeAttribute()一个参数，会移除该对象对应属性