1 　　　　　console.log(document)  // document
 2         console.log(document.documentElement) // 获取html标签
 3         console.log(document.body)  // 获取body标签
 4         console.log(document.head)  // 获取head 标签
 5         console.log(document.title) // 获取title 标签
 6 
 7         // 获取有 id 的标签的dom方法时，必须使用 document 调用 getElementById
 8         console.log(document.getElementById('id'))  // 通过id
 9 
10         //getElementsByTagName这个方法除了可以使用document以外，还可以使用元素调用
11         console.log(document.getElementsByTagName('div'))     // 通过标签名
12 
13         console.log(document.getElementsByClassName('.box'))  // 通过class名获取
14         console.log(document.getElementsByName('name'))       // 通过name名来获取
15         console.log(document.querySelector('.box'))           // 通过css选择器来获取
16         console.log(document.querySelectorAll('div'))         // 通过css选择器来获取 所有的标签
17 
18         // 总结 ： 通过 id  和 name 获取标签只能使用 document 调用，通过标签名,class名，css选择器都可以通过父元素来调用方法，获取子元素的标签

1 　　<div id="ids">
2         <!-- dom 是 文档对象模型 -->
3         <div class="box">文本</div>
4         <p>文本</p>
5         <div class="box" name="1"></div>
6         文本 属性
7     </div>

 1         var ids = document.getElementById('ids') 
 2         var nodes = ids.childNodes // 获取 ids 下的所有子节点
 3         console.log(nodes)  　　// nodes是ids下所有子节点的集合列表  
 4         console.log(nodes[0].nodeType)  // 文本节点类型  3
 5         console.log(nodes[0].nodeName)  // 文本节点名  #text
 6         console.log(nodes[0].nodeValue) // 文本节点值  就是文本内容，空格也是文本节点
 7 
 8         console.log(nodes[1].nodeType)  // 注释节点类型  8
 9         console.log(nodes[1].nodeName)  // 注释节点名  #comment
10         console.log(nodes[1].nodeValue) // 注释节点值  就是注释内容
11 
12         console.log(nodes[3].nodeType)  // 元素节点类型  1
13         console.log(nodes[3].nodeName)  // 元素节点名  大写的标签名
14         console.log(nodes[3].nodeValue) // 元素节点值  null

 1         var ids = document.querySelector('#ids') // 获取父元素
 2 
 3         console.log(ids.childNodes) // 获取 ids 下的所有子节点
 4         console.log(ids.children)  // 获取 ids 下的所有子元素节点
 5         
 6         console.log(ids.firstChild)  // 获取 ids 下的第一个子节点
 7         console.log(ids.firstElementChild) // 获取 ids 下的第一个子元素节点
 8         
 9         console.log(ids.lastChild) // 获取 ids 下的最后一个子节点
10         console.log(ids.lastElementChild) // 获取 ids 下的最后一个子元素节点
11 
12         console.log(ids.nextSibling)  // 下一个兄弟节点
13         console.log(ids.nextElementSibling)  //   下一个兄弟元素节点
14 
15         console.log(ids.previousSibling)  // 获取上一个兄弟节点
16         console.log(ids.previousElementSibling)  // 获取上一个兄弟元素节点 // 不只是相同的标签，不同的也可以
17 
18         console.log(ids.parentNode)  // 获取父节点
19         console.log(ids.parentElement)  // 获取父元素节点