JavaScript DOM 学习总结(五)

　　当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构，即节点树。通过DOM，JS可创建动态的HTML，可以使网页显示动态效果并实现与用户的交互功能。JS能够改变页面中所有的HTML元素、属性和CSS样式，并对页面中所有事件做出响应。所以学习JS的起点就是处理网页，处理网页就需要使用DOM进行操作。

2、DOM获取元素。

　　JS要想操作HTML元素，那么首先就必须先找到该元素。通常使用以下几种方法完成：

　　通过元素设置的id找到HTML元素。

　　通过标签名找到HTML元素。

　　通过元素设置的名称(name)找到HTML元素。

　　所谓的DOM，实际上就是document，获取元素就是操作document。

　　(1)、通过id找到元素

　　方法：document.getElementById('id');

　　网页是由标签将信息组合起来的，id属性值是唯一的，就像身份证一样，通过一个身份证可以找到相对应的人，所以通过该方法，可以获取到与之相对应的标签，而获取的元素在JS中是一个对象，若想对元素进行操作，则需要通过他的属性或方法。

　　(2)、通过标签名找到元素

　　方法：document.getElementsByTagName('Tagname');

　　通过该方法，返回的是带有指定标签名的对象的集合，也就是以数组的形式返回，返回的顺序是他们在文档中的顺序。

　　(3)、通过name找到元素

　　方法：document.getElementsByName('name');

　　该方法与getElementById()方法有点相似，都是通过设置的属性值找到元素，只不过该方法是通过设置的name属性值查找元素。name属性在文档中可能不唯一，所以该方法返回的也是元素的数组，而不是一个元素。

　　既然可以通过id找到元素，那么也就可以通过class找到元素。className属性用于设置或者返回元素的class类名。

　　语法：object.className = 'className'

　　该方法可以控制class类名，返回元素的class属性，作用是可以为网页中某个元素指定一个className来更改该元素的外观。

　　实例：简单的网页换肤效果

　　(3)、改变CSS

　　改变HTML元素的CSS样式可直接使用该语法：document.getElementById(id).style.样式名 = new style

　　上面的代码，通过style设置的样式，都是行间样式，可以使用火狐的Firebug点击相应的按钮，就能看到所有设置的CSS样式都出现在了行间。

　　可以直接通过style获取和设置CSS样式，那么有没有更简洁的方法呢？可以借助于函数使用JS的内置对象arguments完成，所谓arguments，就是可变参，不定参，参数的个数可变，是一个参数数组，无需指出参数名，就可访问他们，但是为了增强可读性，给参数取名，还是很有必要的。