DOM
DOM 简介
- 文档对象模型（Doacument Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。
- W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
- DOM树
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UdyiwUvp-1669188701589)(F:\大前端\笔记\js\API\img\dom树.png)]
- 文档：一个页面就是一个文档，DOM 中使用 document 表示
- 元素：页面中的所有标签都是元素，DOM 中使用 element 表示
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
- DOM 把以上内容都看做是对象
获取元素
如何获取页面元素
- 通过
js代码来获取页面中的标签 - 获取到以后就可以操作这些标签了
- 获取页面中的元素可以使用以下几种方式:
- 根据 ID 获取
- 根据标签名获取
- 通过 HTML5 新增的方法获取
- 特殊元素获取
根据 ID 获取元素
getElementById()
-
使用 getElementById() 方法可以获取带有 ID 的元素对象。
-
返回一个匹配到 ID 的 DOM
Element对象。若在当下Document没有找到，则返回 null。 -
语法：
var 变量= document.getElementById('id名') //前边的 变量 是用于存放接收获取过来的元素的 -
使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。
-
例如
<body> <div id="time">2022-11-18</div> <script> // 1. 因为文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面 // 2. get 获得 element 元素 by 通过 驼峰命名法 // 3. 参数 id是大小写敏感的字符串. // 4. 返回的是一个元素对象 var timer = document.getElementById('time') //获取到的就是页面中的那个 id 为 time 的 div 标签 console.log(timer) console.log(typeof timer) // 5. console.dir 打印返回的元素对象 更好的查看里面的属性和方法 console.dir(timer) </script> </body>
根据标签名获取
getElementsByTagName()
-
使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
-
因为页面中可能有多个元素的 标签 名称一样，所以获取到的是一组元素
-
哪怕真的只有一个这个标签名，那么也是获取一组元素，只不过这一组中只有一个 DOM 元素而已
-
语法：
var 变量= document.getElementsByTagName('标签名') -
例如
//1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的 var lis = document.getElementsByTagName('li') //2.因此想要一次打印里边的元素可以采取遍历的方式 // 3. 如果页面中只有一个li 返回的还是伪数组的形式 // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式[] // 5. element.getElementsByTagName('标签名') 父元素必须是指定的单个元素 // var ols = document.getElementsByTagName('ol') // [ol] // console.log(ols[0].getElementsByTagName('li')) var ols = document.getElementById('ol') console.log(ols.getElementsByTagName('li'))- 获取到的是一组元素，是一个长得和数组一样的数据结构，但是不是数组，是 伪数组
- 那么，这个一组数据也是按照索引排列的，所以我们想要准确的拿到这个
div，需要用索引来获取。
-
注意：
- 因为得到的是一个对象的集合(包含元素对象的数组)，所以我们想要操作里面的元素就需要遍历。
- 得到元素对象是动态
通过 HTML5 新增的方法获取
getElementsByClassName
-
通过类名返回获取元素
document.getElementsByClassName(‘类名’) -
因为页面中可能有多个元素的
class名称一样，所以获取到的是一组元素 -
哪怕获取的
class只有一个，那也是获取一组元素，只不过这一组中只有一个 DOM 元素而已 -
语法
var 变量 = document.getElementsByClassName(‘类名’) // 根据类名返回元素对象集合 -
获取到的是一组元素，是一个长得和数组一样的数据结构，但是不是数组，是 伪数组
-
那么，这个一组数据也是按照索引排列的，所以我们想要准确的拿到这个
div，需要用索引来获取。 -
例如
<div class="box">盒子1</div> <div class="box">盒子2</div> <div id="nav"> <ul> <li>首页</li> <li>产品</li> </ul> </div> <script> // getElementsByClassName 根据类名获得某些元素集合 var boxs = document.getElementsByClassName('box') </script>
querySelector
-
通过指定选择器返回第一个元素对象
document.querySelector('选择器') -
里面的选择器需要加符号 .box #nav
var 变量 = document.querySelector('选择器') // 根据指定选择器返回第一个元素对象 //选择器如标签、类名、id -
例如
<div class="box">盒子1</div> <div class="box">盒子2</div> <div id="nav"> <ul> <li>首页</li> <li>产品</li> </ul> </div> <script> //querySelector 返回指定选择器的第一个元素对象 var firstBox = document.querySelector('.box')//前面变量接收的是.box的第一个对象元素 var nav = document.querySelector('#nav') var li = document.querySelector('li') </script>
document.querySelectorAll
-
返回指定选择器的所有元素对象集合
document.querySelectorAll('选择器')var 变量 = document.querySelectorAll('选择器') -
例如
<div class="box">盒子1</div> <div class="box">盒子2</div> <div id="nav"> <ul> <li>首页</li> <li>产品</li> </ul> </div> <script> // querySelectorAll()返回指定选择器的所有元素对象集合 var allBox = document.querySelectorAll('.box') var lis = document.querySelectorAll('li') </script>
获取特殊元素（body，html）
获取body 元素
var bodyEle（变量） = document.body
获取html 元素
var htmlEle（变量） = document.documentElement
110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
