前端——DOM与BOM总结

人生の三重奏 2024-10-15 16:33:02 阅读 85

一、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() 四舍五入

<code><!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta http-equiv="X-UA-Compatible" content="IE=edge">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<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());



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。