前端——DOM与BOM总结

人生の三重奏

于 2024-09-30 13:14:49 发布

阅读量489

点赞数 17

文章标签：前端 DOM BOM javascript

本文链接：https://blog.csdn.net/qq_53256193/article/details/142633249

版权

一、DOM

1.DOM介绍

DOM全称为 “Document Object Model”，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。）

当网页加载时，浏览器就会自动创建当前页面的文档对象模型（DOM）。在DOM中，文档的所有部分（例如元素、属性、文本等）都会被组织成一个树结构（类似于族谱），树中每一个分支的终点称为一个节点，每个节点都是一个对象。

2.获取节点

DOM为我们提供了一个全局内置对象`document`，要操作HTML标签，我们可以调用`document`对象中的各种方法来获取页面中的标签（在js中我们可以称之为 **元素** 或者 **节点**）

根据CSS选择器来获取DOM元素

1.选择匹配的第一个元素

// 返回值：CSS选择器匹配的第一个元素。如果没有匹配到，则返回null。

document.querySelector('css选择器')

2.择匹配的多个元素

// 返回值：CSS选择器匹配的NodeList对象集合是一个伪数组

document.querySelectorAll('css选择器')

通过ID获取DOM元素

document.getElementById('box')

通过class名获取DOM元素

document.getElementsByClassName('text');

通过标签名获取DOM元素

document.getElementsByTagName('li')//获取到页面中所有的li标签

3.操作HTML内容

`节点.innerHTML` : 读取或设置元素文本内容,可识别标签语法

`节点.innerText` : 读取或设置元素文本内容,不能识别标签语法

<script>

// innerHTML 获取元素的内容 (从标签开始到结束标签之间所以的内容)

let Box = document.getElementById('box');

// 大于标签里的内容

console.log(Box.innerHTML);

let Span = document.getElementsByTagName('span')

// console.log(Span[0].innerHTML);

// 标签[0] 替换为感觉大家不是很激情

// Span[0].innerHTML = '感觉大家不是很激情';

// 会把原本的给替换掉

// 我就想在它这个标签原本基础上后面添加上这句话

// 通过赋值方法+=

// 获取到当前 Span[0].innerHTML 然后进行拼接 (+) 你需要修改的内容 (=) 赋值 Span[0].innerHTML

// Span[0].innerHTML = Span[0].innerHTML + '感觉大家不是很激情' ;

// x = x + 2 ===> 简化 x+=2; ;

Span[0].innerHTML += '感觉大家不是很激情';

let text = document.querySelector('.text');

console.log(text);

// text.innerHTML='123'

// 插入个标签 innerHTML会解析标签

// text.innerHTML='<a href="https://www.baidu.com/">点我带你看个好东西</a>'

// innerText 不会解析标签

text.innerText='<a href="https://www.baidu.com/">点我带你看个好东西</a>'

</script>

4.操作节点的标签属性

直接使用 `节点.属性` 的方式。eg：`console.log(节点.id);` `节点.title = "新的title"`。class名字不能 `.class` ，而是使用 `.className` 代替。

// 获取到我在div标签属性里面

// 获取到我取id名

console.log(Box.id);

//获取标签标题的描述

console.log(Box.title);

5.操作样式

访问元素节点的style属性，获取样式对象；样式对象中包含CSS属性，使用点语法操作。

p.style.color = "white";

p.style.width = "300px";

p.style.fontSize = "20px";

注意：如果css属性名包含连接符，使用JS访问时，一律去掉连接符,改为驼峰， font-size -> fontSize。

使用 `.className` 可以来操作标签的类名，但是需要新加一个类名，或者去掉某个类名时，使用`.className`较为麻烦。所以推荐使用.classList` 来操作类名。

添加：`节点.classList.add("类名")`。

移除：`节点.classList.remove("类名")`。

切换（有则删，无则加）：`节点.classList.toggle("类名")`。

let title =document.querySelector('.tit1');

// 修改文字颜色

title.style.color='green';

// 需要访问元素节点 style属性来获取样式对象样式对象里面包含css属性

// 添加个宽度

title.style.width = '250px';

//文字大小

title.style.fontSize = '30px'

6.创建、添加、删除节点

- 创建节点：createElement 创建一个元素节点；

- 添加节点：

- appendChild 元素最后添加一个子节点；

- insertBefore 在元素某个子节点之前添加新子节点，第一个参数为新节点，第二个参数为已存在的子节点。

- 替换节点：replaceChild 用新节点替换某个子节点，第一个参数为新节点，第二个参数为已存在的某个子节点。

- 删除节点：removeChild 删除元素的某个子节点。

let wrap =document.querySelector('.wrap');

// console.log(wrap);

// 先创建一个新节点

let newP =document.createElement('p');

// 添加节点在网页的控制台(Elements查看)

wrap.appendChild(newP)

// 在你创建的标签里面插入文本内容 createTextNode()

let text = document.createTextNode('是个大帅哥')

// 给newp添加上你创建的文本内容

newP.appendChild(text)

// 创建一个新的节点

let box=document.createElement('a');

box.innerHTML='超级喜欢听它的课111';

// wrap.appendChild(box);

// 在wrap上的第二个子节点前面进行插入 insertBefore(添加到新节点,在第几个子节点位置插入)

wrap.insertBefore(box,wrap.children[1]);

// children 打印元素子节点集合

// console.log(wrap.children);

// 替换节点

// 创建个新的节点

let boss =document.createElement('h2');

// 插入点文字在创建新的h2上

boss.innerHTML ='无限老师';

// 替换把wrap第一个子节点替换掉

// 先获取到我需要替换的值

// console.log(wrap.children[0]);

// replaceChild(替换新的值, 别替换掉的值)

wrap.replaceChild(boss,wrap.children[0]);

// 删除节点把wrap的第三子节点删除

wrap.removeChild(wrap.children[2]);

7.监听事件

事件是达到某个事先设定的条件，自动触发的动作。例如点击了某个按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。我们可以使用 JavaScript中的监听事件来检测事件是否发生并执行某些特定的程序。

事件种类

鼠标事件： onclick 左键单击 ondblclick 左键双击

onmouseover onmouseenter 鼠标移入 onmouseout

onmouseleave鼠标移出

onmousedown 鼠标按下 onmousmove 鼠标移动

onmouseup 鼠标抬起 oncontextmenu 右键单击

键盘事件：onkeydown onkeypress 键按下 onkeyup 键抬起

系统事件： onload 加载完成后 onerror 加载出错后

onresize 窗口调整大小时 onscroll 滚动时

表单事件： onfocus 获取焦点后

onblur 失去焦点后 onchange 改变内容后

onreset 重置后 onselect 选择后 onsubmit 提交后

代码书写步骤

- 获取事件源：`document.getElementById(“box”);`

- 绑定事件：事件源box.事件onclick = function(){ 事件驱动程序 };

二、BOM

1.BOM介绍

浏览器对象模型（Browser Object Model，简称 BOM）是 JavaScript 的组成部分之一，BOM 赋予了 JavaScript 程序与浏览器交互的能力。

window对象是BOM 的核心，用来表示当前浏览器窗口，其中提供了一系列用来操作或访问浏览器的方法和属性。另外，JavaScript中的所有全局对象、函数以及变量也都属于window 对象。

2.定时器

1.周期性定时器——每隔一段时间就执行一次代码

// 开启定时器:

let timerID = setInterval(function, interval);

/*

参数 :

function : 需要执行的代码,可以传入函数名;或匿名函数

interval : 时间间隔,默认以毫秒为单位 1s = 1000ms

返回值 : 返回定时器的ID,用于关闭定时器

*/

// 关闭指定id对应的定时器

clearInterval(timerID);

2.一次性定时器——等待多久之后执行一次代码

// 开启超时调用:

let timerId = setTimeout(function,timeout);

// 关闭超时调用:

clearTimeout(timerId);

3.对象属性

window的大部分属性又是对象类型

history：保存当前窗口所访问过的URL

back() 对应浏览器窗口的后退按钮，访问前一个记录

forward() 对应前进按钮，访问记录中的下一个URL

location：保存当前窗口的地址栏信息(URL)

- 属性：`href 设置或读取当前窗口的地址栏信息

navigator：获取浏览器相关的信息。

<script>

// 用户当前的url信息

console.log(location);

// 操作一下点击页面文档跳转对应的地址

document.onclick =function(){

location.href='https://www.bilibili.com/'

}

// 返回当前窗口上一条历史记录

history.back();

// 返回下一条历史记录

history.forward();

// 放回浏览器相关信息

console.log(navigator);

</script>

4.Math对象

Math对象主要提供一些列数学运算的方法

属性：圆周率 : Math.PI

我们主要用的就是他里面的随机数方法

- Math.random() 随机生成0到1之间的数包括0不包括1

- Math.ceil() 向上取整(天花板值) 遇到小数向上取整

- Math.floor() 向下取整(地板值) 遇到小数向下取整

- Math.round() 四舍五入

<!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>
      <script>
        //  表达一个圆周率  
        console.log(Math.PI);

        // Math对象具有数学常数   函数数学和方法   执行数学相关运算  
        console.log(Math);

        // math.abs() 函数返回指定数值的绝对值  
        console.log(Math.abs(-10));// 正数   10   绝对值只能是正数 

        console.log(Math.abs());// NaN  放的不是数值那就是NaN

        console.log(Math.abs(null));//0  除了null 表示 0 

        // 伪随机数   取值 0-1之间    
        console.log(Math.random());

        // 取0~100 随机数 
        let num=Math.random()*100;
        console.log(num);

        // 取整数 parseInt()
        console.log(parseInt(num));

        // 四舍五入  Math.round()
        console.log( Math.round(11.5));
        console.log( Math.round(-22.5));// -22    整数的话才是23
        
        // Math.floor 向下取整   
        console.log(Math.floor(11.5));

        // 负数向下取整   相当于回退了一位  
        console.log(Math.floor(-12.95)); //-13  

        // 向上取整   遇到小数就向上取整  
        console.log(Math.ceil(12.1));
      </script>
</body>
</html>

5.日期对象

1.创建日期对象

let date1 = new Date("2022/11/11");

let date2 = new Date("2011/11/11 11:11:11");

2.日期对象方法

1. getTime() 返回一个毫秒值到时间零点的距离

2. getFullYear() 返回年

3. getMonth() 返回月注意:得到的月份是从0开始要返回当前月需要加1

4. getDate() 返回日期

5. getHours() 返回小时

6. getMinutes() 返回分钟

7. getSeconds() 返回秒

8. getDay() 返回星期

// Date时间对象

console.log(Date());

// 常用Date方法

// 创建日期对象

let date = new Date();

// 获取年份

console.log(date.getFullYear());

// 获取月份 (0~11) 这里需要+1

console.log(date.getMonth() + 1);

// 获取月份第几天 (1 - 31)

console.log(date.getDate());

// 获取一周第几天 (0~6) 0值表示星期天 6 星期六

console.log(date.getDay());

// 获取小时 (0~23)

console.log(date.getHours());

// 获取分钟 (0~59)

console.log(date.getMinutes());

// 获取秒

console.log(date.getSeconds());