[TOC] # 2.1如何获取页面元素 DOM在我们实际开发中主要用来操作元素。 我们如何来获取页面中的元素呢? ## 获取页面中的元素可以使用以下几种方式: ● 根据ID获取 ● 根据标签名获取 ● 通过HTML5新增的方法获取 ● 特殊元素获取公 ~~~ <div id="time ">2019-9-9</div> <script> // 1.因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面 // 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> ~~~ # 获取元素 ## 2.2根据ID获取 使用getElementByld()方法可以获取带有ID的元素对象。 ~~~ //get(获得) element (元素)by通过驼峰命名法 var timer = document.getElementById('time ' ); // 通过声明 把获取的值赋予给左边的变量名 ~~~ ### 检验 输出他的类型 console.log(typeof timer); ### [//5.console.dir打印我们返回的元素对象更好的查看里面的](https://5.console.xn--dir-rt9d10ip9dw2hoxfstgvuryuas85bt3ccr8eeab80uu99b5h8dooozxj424a/)**属性**和**方法** console.dir(timer); ## 2.3根据标签名获取 （获取输入的 所有标签 ） 使用getElementsByTagName()方法可以返回带有指定标签名的**对象的集合**。 ### [//1.返回的是](https://1.xn--zbs696amkms1x/)**获取**过来元素对象的**集合**以伪数组的形式**存储的** var lis = document.getElementsByTagName('li' ); console.log(lis); console.log(lis\[0\]); //获取集合中 第n 个属性 ### [//2.我们想要](https://2.xn--vnq625bqya576i/)**依次打印**里面的**元素对象**我们可以采取**遍历的方式** 遍历输出 for (var i = 0; i < lis.length; i++) { console.1og(lis\[i\]); ### //（重点）3. element.getElementsByTagName()**可以得到这个元素里面的某些标签** 1、先获取 id 元素 2、这给id 元素下的 标签元素 ~~~ var nav = document.getElementById('nav'); // 这个获得id=nav元素 var navLis = nav.getElementsByTagName( '1i' ); //获取nav下所有li console.log(navLis); ~~~ ## 2.4通过HTML5新增的方法获取 （获取类名）（**电脑端**如果**不考虑兼容型可以用**，**不然不能用**）（**移动端 手机端放心使用**） ### **获取类名** 1. document.getElementsByClassName('类名') ; //根据类名返回元素对象集合 ### 获取选择器**第一个对象**（.类名 #id名） 2. document.querySelector ('选择器');//根据指定选择器返回第一个元素对象 ### 获取选择器**所有对象**（.类名 #id名） 3. document.querySelectorAll( '选择器'); // 根据指定选择器返回 ### 代码实验  ## 2.5获取特殊元素( body , html ) ### 获取body元素 ~~~ 1. doucumnet.body ;// 返回body元素对象 2. 使用 var bobyle = doucumnet.body ; ~~~ ### 获取htm|元素 ~~~ 1. document.documentElement / 返回html元素对象 2. 使用 var htmlle =document.documentElement; ~~~