0


前端——DOM与BOM总结

一、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());
标签: 前端 DOM BOM

本文转载自: https://blog.csdn.net/qq_53256193/article/details/142633249
版权归原作者 人生の三重奏 所有, 如有侵权,请联系我们删除。

“前端——DOM与BOM总结”的评论:

还没有评论