DOM对象：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
打开网页后，首先看到的是浏览器窗口，即顶层的window对象。
其次，看到的是网页文档的内容，即document文档。
首先看一下w3c提供的document对象的定义和其他相关知识：
现在我们来详细的看一下document对象：
第一类：找元素四种基本的找元素的方法 document.getElementById("d1");
根据id找元素，因为id是唯一的，只能找的一个元素
getElementsByClassName("c1");
根据class找元素，因为class不唯一，可以找到多个元素，返回数组
document.getElementsByTagName("div");
根据标签名找元素，因为标签名不唯一，可以找到多个元素，返回数组
document.getElementsByName("uname");
根据name找元素，主要用于表单元素，因为有单选等情况name不唯一，可以找到多个元素，返回数组
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <body> 8 <div id="d1"> 9 <div></div>10 <span></span>11 </div>12 <div class="c1"></div>13 <span class="c1"></span>14 <input type="button" name="uname" />15 </body>16 </html>17 <script>18 var a = document.getElementById("d1"); //根据id找元素19 var b = document.getElementsByClassName("c1"); //根据class找元素20 var c = document.getElementsByTagName("div"); //根据标签名找元素21 var d = document.getElementsByName("uname"); //根据name找元素22 alert(a+"\n"+b[1]+"\n"+c[0]+"\n"+d[0]);23 </script>
id=d1的返回值a，找到div元素
class=c1的返回值数组b，b[1]，数组b中的第二个元素，找到span元素
标签=div的返回值数组c，c[0]，数组c第一个元素，找到div元素
name=uname的返回值数组d，d[0]，数组d的第一个元素，找到input元素
如上我们可以看出除了根据id找元素，其他方法找元素都可以找到多个，返回数组
复杂的找元素a.childNodes[0]方法找该元素的子元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <body> 8 <div id="d1"> 9 <div></div>10 <span></span>11 </div>12 <div class="c1"></div>13 <span class="c1"></span>14 <input type="button" name="uname" />15 </body>16 </html>17 <script>18 var a = document.getElementById("d1"); //根据id找元素19 alert(a.childNodes[0]+"\n"+a.childNodes[1]+"\n"+a.childNodes[2]+"\n"+a.childNodes[3]+"\n"+a.childNodes[4]+"\n"+a.childNodes[5]+"\n");20 </script>
如上我们可以看出，找子元素会找到多个，返回的一定是数组，id为d1的元素内有5个子元素三个文本，一个div元素，一个span元素
注意：这个方法不仅找出了标签内的标签，还会找出文本，这里回车换行也被识别成文本写入了数组
a.parentNode 找父级元素
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
