0061-0062.DOM操作中相关知识的复习 · 原生js-2020

### JS中常用的DOM操作 > DOM：document object model 文档对象模型（提供一系列的属性和方法，供我们获取和操作DOM元素） #### 1.获取DOM的方式 - document.getElementById([元素的ID])：在整个文档中，根据元素的ID，获得这个元素对象 + document是获取元素的上下文（获取元素的范围），getElementById方法的上下文只能是document + 获取到的结果是一个对象（堆内存：里面存储着很多内置的属性和方法） - [context].getElementsByTagName([标签名])：在指定的上下文中，基于元素的标签名获取一组元素集合 + 获取的结果是HTMLCollection元素集合 - [context].getElementsByClassName([样式类名])：在指定上下文中，基于样式类名获取对应的元素集合 + 不兼容IE6~8低版本浏览器 - document.getElementsByName([NAME属性值])：根据元素的NAME属性值，在整个文档中获取一组元素集合 + 在IE浏览器中（9及以下）只对表单元素作用 - document.documentElement：获取整个HTML元素对象（HTML是页面的根节点） - document.body：获取整个BODY元素对象 - document.head：获取整个HEAD元素对象不兼容IE6~8低版本浏览器，可以根据选择器（类似于CSS选择器）快速获取元素和元素集合的办法： - [context].querySelector([SELECTOR]) 获取一个元素对象 - [context].querySelectorAll([SELECTOR]) 获取一组元素集合在不考虑兼容的情况下，这两个方法就足以获取我们需要的元素对象和元素集合了 #### 2.获取DOM节点的属性和方法 > 我们认为在页面中所有呈现的内容，都是DOM文档中的一个节点（node），例如：元素标签是元素节点、注释的内容是注释节点、文本内容是文本节点、document是文档节点... #### 3.关于DOM元素中的增加/删除/修改 - document.createElement([标签名])：动态创建一个DOM元素 - [CONTAINER].appendChild([元素])：把元素动态插入到指定容器的末尾 - [CONTAINER].insertBefore([新元素],[原始页面中的元素])：把新创建的元素放置到指定容器原始页面元素的前面 [原始页面中的元素]肯定在[CONTAINER]容器中 - [CONTAINER].removeChild([元素])：在指定容器中移除元素 - document.createTextNode()：创建一个文本节点 - ... - 设置元素的属性/自定义属性 + 元素.xxx=xxx + 元素.setAttribute(xxx,xxx) setAttribute/getAttribute/removeAttribute #### 4.修改DOM元素的样式 - 元素.style.xxx ：修改（获取）当前元素的行内样式 + 操作的都是行内样式，哪怕把样式写在样式表中，只要没有写在行内上，也获取不到 - 元素.className：操作的是当前元素的样式类，基于样式类的管理给予其不同的样式 #### 5.给DOM元素设置内容 - innerHTML / innerText：给非表单元素设置或者操作其内容 - value：操作表单元素的内容 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title>珠峰培训 - 微信：18310612838</title>  <style> .active { color: red; background-color: lightblue; } </style> </head> <body> <div class="box"> <h2 class="title">新闻标题</h2> <ul class="item" id="itemBox"> <li class="noLine">我是第1条新闻</li> <li>我是第2条新闻</li> <li class="noLine">我是第3条新闻</li> <li>我是第4条新闻</li> <li>我是第5条新闻</li> </ul> </div> <div class="noLine" name="AAA">我是外面的DIV</div> <input type="text" name="AAA">  <script> // 或者.ITEM这个UL // document.getElementById('itemBox'); // document.getElementsByTagName('ul')[0]; // document.getElementsByClassName('item')[0]; // querySelector不管匹配的结果有多少个，都只获得第一个（元素对象） // #itemBox .item ul ... // let itemBox = document.querySelector('ul'); // console.log(itemBox); // querySelectorAll获取的都是集合（哪怕只有一项也是集合） // let navList = document.querySelectorAll('#itemBox li'); // console.log(navList); </script> <script> /* // 获取整个页面中所有具备 noLine 样式类的元素 // let noLines = document.getElementsByClassName('noLine'); // console.log(noLines); //=>[li,li,div] // 获取到的结果是元素集合，不管集合中有几项，它都是集合 let item = document.getElementsByClassName('item'); item = item[0]; //=>获取集合中的第一项（这才是我们要操作的ITEM元素对象） let noLines = item.getElementsByClassName('noLine'); console.log(noLines); //=>[li,li] */ /* var AAAS = document.getElementsByName('AAA'); console.log(AAAS); //=>[div,input] IE9 [input] 真实项目中也是基于它操作表单元素的，尤其是单选框或者复选框 */ </script> <script> /* let itemBox = document.getElementById('itemBox'), navList = itemBox.getElementsByTagName('li'); */ // console.dir(itemBox); //=>它是一个对象：itemBox.xxx=xxx // console.dir(navList); //=>它是一个元素集合HTMLCollection（类数组集合：数字作为索引，LENGTH代表长度），集合中的每一项是单独的元素对象 navList[0].xxx=xxx //===========设置样式 /* itemBox.style.color = 'red'; itemBox.style.backgroundColor = 'green'; //=><ul class="item" id="itemBox" style="color: red; background-color: green;"> 设置的结果都是行内样式 itemBox.style.cssText = `color: red; background-color: green;`; 这种方式是STYLE一个个设置样式的简写，批量给行内上设置很多样式 */ /* itemBox.className = 'active'; //=>CLASSNAME这样操作会把之前的样式类名给覆盖掉 itemBox.className += ' active'; //=>这样也可以，记得加空格区分每个样式类 itemBox.classList.add('active'); //=>向指定样式集合中新增一个样式类（兼容性差） */ </script> </body> </html> ~~~