当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理 HTML 文档的标准方法。DOM 将 HTML 文档呈现为带有元素、属性和文本的树结构，即节点树。通过 DOM，JS 可创建动态的 HTML，可以使网页显示动态效果并实现与用户的交互功能。JS 能够改变页面中所有的 HTML 元素、属性和 CSS 样式，并对页面中所有事件做出响应。所以学习 JS 的起点就是处理网页，处理网页就需要使用 DOM 进行操作。
2、DOM 获取元素
document.getElementById //根据ID获取一个标签 document.getElementsByName //根据name属性获取标签集合 document.getElementsByClassName // 根据class属性获取标签集合 document.getElementsByTagName //根据标签名获取标签集合
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 name="txt" type="text" value="1"> <input name="txt" type="text" value="2"><br> <input name="txt" type="text" value="3"> <input name="txt" type="text" value="4"><br> <input name="txt" type="text" value="5"> <input name="aaa" type="text" value="6"> <script> //获取所有name值为txt的元素 var oTxt = document.getElementsByName("txt"); //获取元素的个数 alert(oTxt.length); //返回：5 //获取第二个元素的值 alert(oTxt[1].value); //返回：2 </script> </body>