当页面加载时，浏览器会创建页面的文档对象模型（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属性在文档中可能不唯一，所以该方法返回的也是元素的数组，而不是一个元素。
<body> <input type="text" value=""> <input type="text" value=""><br> <input type="text" value=""> <input type="text" value=""><br> <input type="text" value=""> <input type="text" value=""> <script> //获取所有name值为txt的元素 var oTxt=document.getElementsByName("txt"); //获取元素的个数 alert(oTxt.length); //返回： //获取第二个元素的值 alert(oTxt[].value); //返回： </script> </body>
既然可以通过id找到元素，那么也就可以通过class找到元素。className属性用于设置或者返回元素的class类名。
语法：object.className = 'className'
该方法可以控制class类名，返回元素的class属性，作用是可以为网页中某个元素指定一个className来更改该元素的外观。
实例：简单的网页换肤效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>网页换肤</title> <style> body{ background:lightgreen; } .col{ background:lightgray; } .col{ background:lightblue; } .col{ background:violet; } .col{ background:pink; } .col{ background:#f; } </style> </head> <body> 点击切换：<input type="button" value="灰色"> <input type="button" value="蓝色"> <input type="button" value="紫色"> <input type="button" value="粉色"> <input type="button" value="橘色"> <script> var x = document.getElementById('boy'); function gr(){ x.className='col'; } function bl(){ x.className='col'; } function vi(){ x.className='col'; } function pi(){ x.className='col'; } function or(){ x.className='col'; } </script> </body> </html>
这只是一个简单的切换背景色效果，如果想切换网页的整体样式，可以使用外部CSS文件，通过JS改变link标签的href属性来完成。
如果想设置多个class类名相同的元素的样式，就需要借助数组的方法来完成，其实现原理也很简单，首先通过id获取其父元素，再获取父元素下所有子元素的标签名，获取标签名返回的是元素的数组，所以就可以和访问数组一样的方法来访问元素的数组，那么先使用循环遍历该元素数组，再做判断，如果这个元素的className等于我们设置的class属性值，就说明这是我们要找的元素。
实例：将有序列表中所有class属性值为"col"的元素背景颜色设置为绿色。
<body> <ol> <li>热点</li> <li>美食</li> <li>数码</li> <li>科技</li> <li>社会</li> <li>养生</li> </ol> <script> //通过id获取父元素 var aOl = document.getElementById('o'); //通过标签名获取父元素下所有子元素 var oLi = aOl.getElementsByTagName('li'); //循环遍历返回的子元素数组 for(var i=;i<oLi.length;i++){ //如果当前子元素的className等于设置的class属性值，则将其背景设置为绿色 if(oLi[i].className=='col') oLi[i].style.background='green'; } </script> </body>
下面是一个通过class属性值获取元素的封装函数，方便以后使用。