DOM在我们实际开发中主要用来操作元素。
使用 getElementById() 方法带有 ID 的元素对象。
语法：
//1.先找到文档document //2.get 获得 element 元素 by 通过 驼峰命名法 var element = document.getElementById(id);参数：
element 是一个 Element对象。如果当前文档中拥有特定的ID元素不存在则返回null。 id 是大小写敏感的字符串，代表所要查找元素的唯一 ID 。返回值：
返回一个匹配到 ID 的 DOM Element 对象，若在当前的 Document 下没有找到，则返回 null 。
例子：
<body> <div id="time">2020-10-7</div> <script> //1.因为我们文档页面是从上往下加载，所以先得有标签，所以我们script写到标签的下面 //先找到文档document //2.get 获得 element 元素 by 通过 驼峰命名法 //3.参数 id 是大小敏感的字符串 //4.返回的是一个元素对象 var timer = document.getElementById('time'); console.log(timer); console.log(typeof timer); //5.console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法 console.dir(timer) </script> </body>使用 getElementsByTagName(） 方法可以返回带有指定标签名的对象的集合。
document.getElementsByTagName('标签名');注意：
因为得到的是一个对象的集合，所以我们想要操作里面得元素就需要遍历。得到元素对象是动态的。 <body> <ul> <li>余生路长，一起看月落又重生， 灯灭灯再红</li> <li>余生路长，一起看月落又重生， 灯灭灯再红</li> <li>余生路长，一起看月落又重生， 灯灭灯再红</li> <li>余生路长，一起看月落又重生， 灯灭灯再红</li> <li>余生路长，一起看月落又重生， 灯灭灯再红</li> <li>余生路长，一起看月落又重生， 灯灭灯再红</li> </ul> <ul class="nav"> <li>未经允许，擅自特别喜欢你，不好意思了</li> <li>未经允许，擅自特别喜欢你，不好意思了</li> <li>未经允许，擅自特别喜欢你，不好意思了</li> <li>未经允许，擅自特别喜欢你，不好意思了</li> <li>未经允许，擅自特别喜欢你，不好意思了</li> </ul> <script> //1.返回的是 获取过来的元素对象集合 以伪数组的形式存储的 var lis = document.getElementsByTagName('li'); console.log(lis); //获取第一个li console.log(lis[0]); //2.我们想要依次打印里面的元素对象，我们可以采取遍历的方式。 for (var i = 0; i < lis.length; i++) { console.log(lis[i]); } //3.element.getElementsByTagName() 可以得到这个元素里面的某些标签 var nav = document.getElementById('nav');//这个获得nav 元素 var navlis = nav.getElementsByTagName('li'); console.log(navlis); </script> </body>例子：
<body> <div class="box">盒子1</div> <div class="box">盒子2</div> <div id="nav"> <ul> <li>首页</li> <li>产品</li> </ul> </div> <script> //1.getElementsByClassName 根据类名获得某些元素集合 var boxs = document.getElementsByClassName('box'); console.log(boxs); //2.querySelector 返回指定选择器的第一个元素对象，切记 里面的选择器需要加符号 .box #nav var fristbox = document.querySelector('.box'); console.log(fristbox); var nav = document.querySelector('#nav'); console.log(nav); var li = document.querySelector('li'); console.log(li); //3.querySelectorAll()返回指定选择器的所有元素对象集合 var allBox = document.querySelectorAll('.box'); console.log(allBox); var lis = document.querySelectorAll('li'); console.log(lis); </script> </body>例子：
<body> <script> //1.获取body 元素 var bodyEle = document.body; console.log(bodyEle); console.dir(bodyEle); //2.获取html元素 var htmlEle = document.documentElement; console.log(htmlEle); </script> </body>