前言
- 系列文章目录：
- 根据视频和PPT整理
- 视频及对应资料：
- JS
- 视频：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程
- 视频对应资源(在视频简介里面)
- 链接：【https://gitee.com/xiaoqiang001/java-script.git】
- 视频对应资源(百度网盘)
- 链接：【https://pan.baidu.com/s/1q952v5mnFGR9IFjHlyn7Wg】
- 提取码：1234
1. DOM 简介
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。通过这些 DOM 接口可以改变网页的内容、结构和样式。
DOM树：
- 文档：一个页面就是一个文档，DOM 中使用 document 表示
- 元素：页面中的所有标签都是元素，DOM 中使用 element 表示
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
DOM 把以上内容都看做是对象
2. 获取元素
- 获取页面中的元素可以使用以下几种方式:
- 根据 ID 获取
- 根据标签名获取
- 通过 HTML5 新增的方法获取
- 特殊元素获取
2.1 根据 id 获取元素
DOM中，使用 getElementById() 方法可以获取带有指定 id 的元素对象，返回值为 id 对应的元素对象。
语法：
document.getElementById('id');
<body> <div id="time">2022-11-05</div> </body> <script> // 通过id获取其对应的元素对象 var div_time = document.getElementById('time'); console.log(div_time, typeof div_time); </script>
使用
console.dir()可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。
<body> <div id="time">2022-11-05</div> </body> <script> // 通过id获取其对应的元素对象 var div_time = document.getElementById('time'); console.log(div_time, typeof div_time); console.dir(div_time); </script>
2.2 根据标签名获取元素
使用 getElementsByTagName() 方法可以获取指定标签名的对象的集合，获取到的标签对象的集合以伪数组的形式存储。
2.2.1 获取整个文档中指定标签名的元素
语法：
document.getElementsByTagName('标签名');
注意：得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
<body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script> var lis = document.getElementsByTagName('li'); console.log(lis); </script>
<body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script> var lis = document.getElementsByTagName('li'); console.log(lis); for (var i=0; i<lis.length; i++) { console.log(lis[i]); } </script>
通过getElementsByTagName()方法获取指定标签名的对象，不管获取到的标签元素对象有几个，都是以伪数组的形式存储的。
<body> <ul> <!-- <li>1</li> --> <!-- <li>2</li> --> <!-- <li>3</li> --> </ul> </body> <script> var lis = document.getElementsByTagName('li'); console.log(lis); </script>
2.2.1 获取某个元素中指定标签名的元素
我们还可以通过某个元素(父元素)获取其内部的所有指定标签名的元素。
语法：
element.getElementsByTagName('标签名');
注意：父元素必须是单个对象，即element必须是单个元素对象。
<body> <ul> <li>ul 1</li> <li>ul 2</li> <li>ul 3</li> </ul> <ol id="ol"> <li>ol 1</li> <li>ol 2</li> <li>ol 3</li> </ol> </body> <script> var ol = document.getElementById('ol'); var lis = ol.getElementsByTagName('li'); console.log(lis); for (var i=0; i<lis.length; i++) { console.log(lis[i]); } </script>
2.3 通过 HTML5 新增的方法获取
2.3.1 根据类名获取文档中的元素
语法：
document.getElementsByClassName(‘类名’)；
注意：得到的是一个元素对象的集合。
<body> <div class="box"></div> <div class="box"></div> <div class="nav"> <ul> <li>1</li> <li>2</li> </ul> </div> </body> <script> boxs = document.getElementsByClassName('box') console.log(boxs) </script>
2.3.2 根据指定选择器获取第一个元素对象
语法：
document.querySelector('选择器');
注意：选择器需要加符号，比如：
document.querySelector('#nav');
<body> <div class="box"></div> <div class="box"></div> <div id="nav"> <ul> <li>1</li> <li>2</li> </ul> </div> </body> <script> box = document.querySelector('.box') console.log(box) nav = document.querySelector('#nav') console.log(nav) li = document.querySelector('#nav ul li') console.log(li) </script>
2.3.3 根据指定选择器获取元素对象
语法：
document.querySelectorAll('选择器');
注意：选择器需要加符号，比如：
document.querySelectorAll('.nav');
<body> <div class="box"></div> <div class="box"></div> <div id="nav"> <ul> <li>1</li> <li>2</li> </ul> </div> </body> <script> boxs = document.querySelectorAll('.box') console.log(boxs) lis = document.querySelectorAll('#nav ul li') console.log(lis) </script>
2.4 获取特殊元素
2.4.1 获取body元素
语法：
doucumnet.body // 返回body元素对象
<body> <div class="box"></div> <div class="box"></div> <div id="nav"> <ul> <li>1</li> <li>2</li> </ul> </div> </body> <script> body = document.body console.log(body) </script>
2.4.2 获取html元素
语法：
document.documentElement // 返回html元素对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box"></div> <div class="box"></div> <div id="nav"> <ul> <li>1</li> <li>2</li> </ul> </div> </body> <script> html = document.documentElement console.log(html) </script> </html>
