DOM选择器分为：id、class、name、tagname、高级、关系选择器;（返回的都是标签）
一：元素节点选择器：
1. id: 返回的是单个对象
<body> <div class="box" a="10" b="20" id="cont" name="wode"></div> </body>
var ocont=document.getElementById("cont"); //找到的是有id名为"cont"的div标签; console.log(ocont); //<div class="box" a="10" b="20" id="cont" name="wode"></div> console.log(typeof ocont); //object;
2. class:返回的是数组对象，可以通过索引解析，专门用在input表单中；
var obox=document.getElementsByClassName("box"); console.log(obox); //HTMLCollection [div#cont.box, cont: div#cont.box, wode: div#cont.box]; 返回的是数组对象 console.log(obox[0]); //<div class="box" a="10" b="20" id="cont" name="wode"></div> console.log(obox[1]); //undefined;这里的数组是一个个class名为box的标签，索引得到的也是标签，里面的属性名和属性值可以通过attributes等获取。
3. name: 返回的是数组对象，可以通过索引解析
var owode=document.getElementsByName("wode"); console.log(owode); //NodeList [div#cont.box]; console.log(obox[0]); //<div class="box" a="10" b="20" id="cont" name="wode"></div> console.log(owode[1]) //undefined;规则和class选择器相同，见上！
4. tagname:返回的是数组对象，可以通过索引解析
var oa=document.getElementsByTagName("div"); console.log(oa); //HTMLCollection [div#cont.box, cont: div#cont.box, wode: div#cont.box]; 规则和索引取得的值与上面两个选择器相同！
===================================================================================================================================
5.高级选择器，ES5新增
<body> <div class="box" a="10" b="20" id="cont" name="wode"></div> <div class="box" c="999"></div> </body>
query.Selector():返回的是单个对象;()里写的是css选择器,如：.box、#cont等
var ele=document.querySelector("#cont"); console.log(ele); //<div class="box" a="10" b="20" id="cont" name="wode"></div>
当有多个同级元素时，返回最近的一个，即最上面那个;
var aaa=document.querySelector(".box"); console.log(aaa); //<div class="box" a="10" b="20" id="cont" name="wode"></div>; //第二个div并没有被显示时
querySelectorAll():返回的是数组对象，可以通过索引解析;()里写的是css选择器,如：.box、#cont等
var ele=document.querySelectorAll(".box"); console.log(ele) //NodeList(2) [div#cont.box, div.box];显示一个数组里面有两个div标签
二：关系选择器
1.父选子：返回数组对象，可以通过索引解析
<body> <div class="box" a="10" b="20" id="cont" name="wode"> <li class="msg></li> <li></li> </div> <div class="box" id="qqq" name="ppp"> <p><p> <p></p> </div> </body>
var obox=document.querySelector(".box"); console.log(obox.children) // HTMLCollection(2) [li.msg, li];返回class名为box的标签内所有子标签； //当有多个同级元素时，显示最上面那个
2.子选父：返回单个对象
var omsg=document.querySelector(".msg"); console.log(omsg.parentNode) //<div class="box" a="10" b="20" id="cont" name="wode">
3.第一个子：单个对象
var obox=document.querySelector(".box"); console.log(obox.firstElementChild) ; //<li class="msg"></li>
4.最后一个子：单个对象
var obox=document.querySelector(".box"); console.log(obox.lastElementChild) ; //<li></li>
=================
<body> <div class="box" a="10" b="20" id="cont" name="wode"> <p></p> <li class="msg"></li> <li ></li> </div> <div class="box" id="qqq" name="ppp"> <p><p> <p></p> </div> </body>
5.上一个兄弟：单个对象
var omsg=document.querySelector(".msg"); console.log(omsg.previousElementSibling) ; //<p></p>
6.下一个兄弟：单个对象
var omsg=document.querySelector(".msg"); console.log(omsg.nextElementSibling) ; //<li></li>
=================================================================================================================================
三；其他节点选择器
1:父选子：返回数组对象，可以通过索引解析
<body> <div class="box" a="10" b="20" id="cont" name="wode"> <p></p> <li class="msg"></li> <li ></li> </div> <div class="box" id="qqq" name="ppp"> <p></p> <p></p> </div> </body>
var obox=document.querySelector(".box"); console.log(obox.childNodes) //NodeList(7) [text, p, text, li.msg, text, li, text]; //其中空格+航换行也是一个文本对象，注释属于注释对象 console.log(obox.childNodes[1]) //<p></p> console.log(obox.childNodes[1]) //#text
2：上一个兄弟：返回单个对象
var omsg=document.querySelector(".msg"); console.log(omsg.previousSibling); //#text;空格换行也是一个文本对象
3：写一个兄弟：返回单个对象
var omsg=document.querySelector(".msg"); console.log(omsg.nextSibling); //#text;空格换行也是一个文本对象
4.第一个子：返回单个对象
var obox=document.querySelector(".box"); console.log(obox.firstChild) //#text;空格换行也是一个文本对象
5.最后一个子：返回单个对象
var obox=document.querySelector(".box"); console.log(obox.lastChild) //#text;空格换行也是一个文本对象
补充：
节点类型(nodeType) 节点名字(nodeName) 节点值(nodeValue) 元素节点 1 标签名 null 文本节点 3 #text 文本 注释节点 8 #comment 注释的文字 文档节点 9 #document null 属性节点 2 属性名 属性值