# 1、根据document对象查询 document是JS内置的一个对象，表示整个HTML文档。根据document查询，意思就是在整个文档范围内查询。 * 单词： get -- 获取、得到 Element -- 元素 Elements -- 很多元素 By… -- 根据…./通过…. Class -- 类 Tag -- 标签 query -- 查询 Selector -- 选择器 * 练习： getElementById() -- 根据元素的id值获取一个元素类型的节点 返回值是一个dom对象 getElementsByTagName() -- 通过标签名获取很多个元素类型的节点 返回一个包含很多dom对象的数组 具体查询方法见下表  演示的HTML： ``` <ul> <li class="a">李清照</li> <li id="tangwei">汤唯</li> <li class="a">唐婉</li> <li>王昭君</li> </ul> <p class="a">上述内容是美女型诗人。</p> <br> ``` ``` 请输入更多诗人： <input type="text" name="shiren" /> 查询的JS代码： /****************** script标签一定要放到ul/p/input标签下面 *******************/ //------------------------根据id查询 var tangwei = document.getElementById('tangwei'); //console.log(tangwei); //tangwei.style.样式名称 = 值; 给标签添加样式 tangwei.style.color = 'red'; //-----------------------根据标签名查询 var lis = document.getElementsByTagName('li'); // 返回数组，数组中包含满足条件的4个li //console.log(lis); for(var i=0; i<lis.length; i++){ lis[i].style.backgroundColor = '#ccffcc'; } //---------------------根据元素的类名查询 var as = document.getElementsByClassName('a'); // 返回数组，数组中包含类名为a的元素 for(var i=0; i<as.length; i++){ as[i].style.fontSize = '30px'; } //---------------------根据元素的name属性查询 var input = document.getElementsByName('shiren'); // 返回数组，数组中包含属性name为shiren的元素 input[0].style.backgroundColor = '#ccc'; //--------------------根据css选择器选择元素 //document.querySelector('css选择器'); var liqingzhao = document.querySelector('.a'); // 返回一个dom对象，class为a的有很多，也只返回第一个 liqingzhao.style.border = 'solid 1px pink'; var all = document.querySelectorAll('p, input'); //返回数组 for(var i in all){ all[i].style.border = 'dashed 1px blue'; } ``` 最终效果：  # 2、相互关系查询 * 相互关系查询可以分为下面三种情况： 根据父节点查找子节点 根据子节点查父节点 查询兄弟节点 * 单词： child -- 孩子 children -- 很多孩子 Node -- 节点 nodes -- 很多节点 first -- 第一个 last -- 最后一个 Element -- 元素 Sibling -- 兄弟，姐妹 Siblings -- 所有的兄弟，姐妹 previous -- 上一个 next -- 下一个 具体属性/方法见下表：  演示的HTML代码： ``` <ul id="u"> <li>泽拉斯</li> <li>蚂蚱</li> <li>拉克丝</li> <li>安妮</li> <li>维克托</li> </ul> 测试的JS代码： /******************* 根据父节点查找子节点 ************************/ //先找到父节点 //var ul = document.getElementsByTagName('ul')[0]; //var ul = document.getElementById('u'); var ul = document.querySelector('#u'); // ------------- 查询所有ul的子节点 -- children //var lis = ul.children; // 返回数组。 查询ul的所有子节点 //console.log(lis); // ------------- 查询所有ul的子节点 -- childNodes //var lis = ul.childNodes; // //console.log(lis); //---------------查询所有ul的子节点 --- //var lis = ul.getElementsByTagName('li'); //在ul中查找所有ul后代中的li //console.log(lis); //---------------查询ul的第一个子节点 --- firstChild //var li1 = ul.firstChild; //console.log(li1); //不好用，会把第一个空白当做第一个子元素 //---------------查询ul的第一个子节点 --- firstElementChild //var li1 = ul.firstElementChild; //console.log(li1); //好用，但是IE8+才支持 //---------------查询ul的最后一个子节点 --- lastChild //---------------查询ul的最后一个子节点 --- lastElementChild /******************* 根据子点查找父节点 ************************/ //随便找一个子节点 //var mazha = document.getElementsByTagName('li')[1]; //var ul2 = mazha.parentNode; //console.log(ul2); /******************* 兄弟关系查询 ************************/ //随便找一个子节点 var mazha = document.getElementsByTagName('li')[1]; //查询上一个兄弟 //var zelasi = mazha.previousSibling; //console.log(zelasi); //不好使，会认为空白是上一个兄弟 //var zelasi = mazha.previousElementSibling; //console.log(zelasi); //好使，但是IE8+支持 //查询下一个兄弟 -- nextSibling //查询下一个兄弟 -- nextElementSibling ``` 效果：打开注释，依次查看即可。 # 3、遗留DOM 早期DOM访问形式，在一些特定元素的获取上比较方便。被保留下来使用，W3C标准化之后 称为“0级DOM”。  HTML代码： ``` <form name="f1"> 用户名：<input type="text" name="username" value="123"><br> 密码：<input type="password" name="pwd" value="123"> </form> <form name="f2"> 邮箱：<input type="text" name="email" value="123"><br> 电话：<input type="password" name="tel" value="123"> </form> ``` JS代码： ``` //获取body节点 var body = document.body; body.style.backgroundColor = '#ccc'; //获取form document.forms[1].style.border = 'solid 1px red'; //获取form，通过name值 document.f1.style.border = 'solid 1px blue'; //找表单中各个项 document.f1.username.style.backgroundColor = 'yellow'; ``` 效果：