DOM（Document Object Model），即文档对象模型，是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，它允许开发人员添加、移除和修改页面的某一部分。当我们创建了一个网页并把它加载到Web浏览器上，DOM就在幕后悄然而生，因为它把你所编写的网页文档转换为一个文档对象。
我们可以这么理解DOM，把DOM看做一棵节点树，主要由元素节点、属性节点、文本节点三种节点构成。例如下方的一行HTML代码，
<p title="reminder">Hello JavaScript</p>
其中 p 为元素节点，title="reminder" 为属性节点，Hello JavaScript 为文本节点。
HTML文档中每一个元素节点都是一个对象，其中3个获取特定元素的方法分别是： getElementById、getElementsByTagName 和 getElementsByClassName 方法。当我们得到需要的元素后，就可以获取它的各个属性，getAttribute 方法就是用来做这件事的，而 setAttribute 方法则用来更改属性节点的值。
例如下方的HTML文档，对其进行JavaScript的 DOM 的5种基本方法操作，如下所示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Mobile phone</title> 6 <style type="text/css"> 7 body { 8 color: white; 9 background-color: black; 10 } 11 p { 12 color: yellow; 13 font-family: "arial", sans-serif; 14 font-size: 1.2em; 15 } 16 #purchases { 17 border: 1px solid white; 18 background-color: #333; 19 color: #ccc; 20 padding: 1em; 21 } 22 #purchase li { 23 font-weight: bold; 24 } 25 </style> 26 </head> 27 <body> 28 <h1>What to buy</h1> 29 <p title="reminder">Never Settle !!!</p> 30 <ul id="purchases"> 31 <li>HUAWEI</li> 32 <li class="sale">OPPO & vivo</li> 33 <li class="sale important">mi</li> 34 </ul> 35 </body> 36 </html>
getElementById 方法，返回那个给定 id 属性值的元素节点对应的对象：
1 <script> 2 alert(typeof document.getElementById("purchases")); //弹出的对话框显示object 3 </script>
getElementsByTagName 方法，返回一个对象数组，每个对象对应着文档里给定标签的一个元素：
1 <script> 2 var items = document.getElementsByTagName("li"); 3 for(var i = 0; i<items.length; i++){ 4 alert(typeof items[i]); //弹出的对话框显示object，重复3次 5 } 6 </script>
getElementsByClassName 方法，返回一个对象数组，每个对象对应着文档里给定类名的一个元素：
1 <script> 2 var shopping = document.getElementById("purchases"); 3 var sales = shopping.getElementsByClassName("sale"); 4 alert(sales.length); //弹出的对话框显示2 5 </script>
getAttribute 方法，获取元素节点的各个属性：
1 <script> 2 var paras = document.getElementsByTagName("p") 3 for(var i = 0; i<paras.length; i++){ 4 alert(paras[i].getAttribute("title")); //弹出的对话框显示reminder 5 } 6 </script>
setAttribute 方法，对属性节点的值做出修改：
1 <script> 2 var shopping = document.getElementById("purchases"); 3 alert(shopping.getAttribute("title")); //弹出的对话框显示null(空的值) 4 shopping.setAttribute("title", "a list of goods"); 5 alert(shopping.getAttribute("title")); //弹出的对话框显示a list of goods 6 </script>