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)
元素节点 标签名 null
文本节点 #text 文本
注释节点 #comment 注释的文字
文档节点 9 #document null
属性节点 2 属性名 属性值