AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

js中BOM和DOM总结（基础篇）

2024-09-27 38
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 文章总结了JavaScript的BOM和DOM知识点，包括window、screen、location、history、navigator对象，以及消息框、计时器和cookie。同时，介绍了DOM的概念、节点获取和修改方法，以及事件处理。

BOM知识点概览

BOM是什么？

Browser Object Model (BOM) 浏览器对象模型。

浏览器对象模型BOM

1.window对象

window 它表示浏览器窗口。

  • window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
  • window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
    在这里插入图片描述
  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <button onclick="window.open('https://www.baidu.com/')">打开百度</button>
        <button onclick="window.close()">关闭窗口</button>
</body>
</html>
  • window.moveTo() - 移动当前窗口
  • window.resizeTo() - 调整当前窗口的尺寸

2.window screen对象

  • screen.availWidth - 可用的屏幕宽度
  • screen.availHeight - 可用的屏幕高度
 console.log("可用宽度:"+window.screen.availWidth);
 console.log("可用高度:"+window.screen.availHeight);
 console.log("屏幕高度:"+window.screen.height);
 console.log("屏幕宽度:"+window.screen.width);

在这里插入图片描述

3.window location对象

  • location.hostname 返回 web 主机的域名
  • location.pathname 返回当前页面的路径和文件名
  • location.port 返回 web 主机的端口 （80 或 443）
  • location.protocol 返回所使用的 web协议（http: 或 https:）

4.window history对象

  • history.back() - 与在浏览器点击后退按钮相同
  • history.forward() - 与在浏览器中点击向前按钮相同
  • history.go() -参数列表的数值即为前进或者后退的页面个数
function goForward() {
   
    history.go(2);//go() 里面的参数用来限制前进或者后退的页面个数
}
function goBack() {
   
    history.go(-1);//后退一个页面
}

5.navigator对象

用于提供当前浏览器及操作系统等信息，这些信息都放在navigator的各个属性中。
常用属性

  • appCodeName 获取浏览器的内部代码名。
  • appMinorVersion 获取浏览器的辅版本号，常用于浏览器的补丁货服务包。
  • appName 获取浏览器的名称。
  • appVersion 获取浏览器的平台和版本信息。
  • language 获取当前浏览器的语言，例如，可能的一个结果是“zh-CN”。
  • cookieEnabled 获取浏览器中是否启用 cookie 的布尔值。
  • cpuClass 获取计算机系统的 CPU型号，例如，Inter通常得到的结果是x86。
  • onLine 获取浏览器是否处于在线模式，结果是布尔值。
  • platform 获取运行浏览器的操作系统平台。 systemLanguage 获取 OS 使用的默认语言。
  • userAgent 获取由客户机发送服务器的 user-agent 头部的值。
  • userLanguage 获取 OS的自然语言设置。
  • mimeTypes 获取浏览器支持的所有的MIME类型的数组。
  • plugins 获取安装在浏览器上的所有插件的数组。
  • product 获取浏览器的产品名，例如，可能的结果是Gecko。
  • productSub 获取浏览器产品的更多信息，例如，可能的结果是20030107。
  • vendor 获取浏览器的厂商名称，例如，可能的结果是Google Inc.。
  • vendorSub 获取浏览器的厂商更多信息。

6.消息框 alert,prompt,confirm

function alertTest() {
   
    window.alert("xxxx");
}
function promptTest() {
   
    window.prompt("请输入一段数字","例如：1234");
}
function confirmTest() {
   
    window.confirm("请确认是否提交","确认");
}
alertTest();// 此时页面出现警告框
promptTest();// 提示框
confirmTest();//确认框

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7.计时

计时事件：JavaScript 在设定的时间间隔之后来执行代码。

  • setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
  • clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
  • setTimeout() - 在指定的毫秒数后执行指定代码。
  • clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

8.cookie

cookie,储存在用户本地终端上的数据.
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;（键值对以分号分隔）。
来自菜鸟教程的一个cookie实例链接: https://www.runoob.com/try/try.php?filename=tryjs_cookie_username
代码如下

function setCookie(cname,cvalue,exdays){
   
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;//创建cookie并且设置了cookie名称和过期时间
}
function getCookie(cname){
   
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
   
        var c = ca[i].trim();
        if (c.indexOf(name)==0) {
    return c.substring(name.length,c.length); }
    }
    return "";
}
function checkCookie(){
   
    var user=getCookie("username");
    if (user!=""){
   
        alert("欢迎 " + user + " 再次访问");
    }
    else {
   
        user = prompt("请输入你的名字:","");
        if (user!="" && user!=null){
   
            setCookie("username",user,30);
        }
    }
}
checkCookie();

DOM知识点概览

DOM是什么？

DOM 是 W3C（万维网联盟）的标准。
W3C DOM 标准被分为 3 个不同的部分：

  • 核心 DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

什么是 HTML DOM？

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM树（节点树）

HTML 文档中的所有内容都是节点：

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Title</title>
</head>
<body>
    <a href="#">My Link</a>
    <h1>My header</h1>
</body>
</html>

这段代码对应下面的dom树
在这里插入图片描述
节点树中是层级关系：

  • 在节点树中，顶端节点被称为根（root）
  • 每个节点都有父节点、除了根（它没有父节点）
  • 一个节点可拥有任意数量的子节点
  • 同胞是拥有相同父节点的节点

HTML DOM方法

HTML DOM方法是可以在节点（HTML 元素）上执行的动作.
在DOM树中所有的html元素都被看做是一个对象，而DOM方法就是用来获取这些对象的值和属性，并且可以进行修改和添加删除。

获取节点元素的方法

根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。
document.getElementById('id');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Title</title>

</head>
<body>
    <a href="#">My Link</a>
    <h1>My header</h1>
    <p id="p1">你好世界！</p>

    <script type="application/javascript">
        var p1 = document.getElementById("p1");// 获取id值是p1的节点元素，并且将它赋值给一个变量p1
        console.log(p1);// <p id="p1">你好世界！</p>
    </script>
</body>
</html>
根据标签名获取
1.使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

document.getElementsByTagName('标签名');

//还是用上面的html页面
var h1 = document.getElementsByTagName("h1");
console.log(h1);//打印一个集合

在这里插入图片描述
注意：

  • 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
  • 得到元素对象是动态的。
  • 如果获取不到元素,则返回为空的伪数组(因为获取不到对象)。
2.还可以获取某个元素(父元素)内部所有指定标签名的子元素.

element.getElementsByTagName('标签名');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Title</title>

</head>
<body>
    <a href="#">My Link</a>
    <h1>My header</h1>
    <p id="p1">你好世界！</p>
    <div id="div1">
        <span>我是行内元素</span>
    </div>

    <script type="application/javascript">
        var div1 = document.getElementById("div1");//获取外部元素div
        var span = div1.getElementsByTagName("span");//通过指定id的div获取到其内部的span元素（是一个集合）
        //因为我们上面div里面只有一个span，所以可以通过span.item(0) 访问到第一个span
        console.log(span.item(0));// <span>我是行内元素</span>
    </script>

</body>
</html>

注意：父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。

通过 HTML5 新增的方法获取
1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
2. document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象
3. document.querySelectorAll(‘选择器’); // 根据指定选择器返回

注意：
querySelector 和 querySelectorAll里面的选择器需要加符号（类选择器 . 和 id选择器 # ）,
比如:document.querySelector(‘#nav’); document.querySelector(‘.bd’);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Title</title>

</head>
<body>
    <a href="#">My Link</a>
    <h1>My header</h1>
    <p id="p1">你好世界！</p>
    <div id="div1">
        <span>我是行内元素</span>
    </div>
    <div class="div2">我是第一个类属性为div2 的div元素</div>
    <div class="div2">我是第二个类属性为div2 的div元素</div>
    <p class="demo">hello</p>
    <p class="demo">hi</p>

    <script type="application/javascript">
       var div2  = document.querySelector(".div2");
       console.log(div2);
       var divList = document.querySelectorAll(".div2");
       console.log(divList);//获取了当前页面中所有类属性为div2的元素，是一个NodeList集合
       var pList = document.getElementsByClassName("demo");
       console.log(pList);//获取当前页面所有类属性为demo的元素，是一个HTMLCollection集合
    </script>

</body>
</html>

在这里插入图片描述

特殊元素获取
1.获取body元素

doucumnet.body // 返回body元素对象

2.获取html元素

document.documentElement // 返回html元素对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Title</title>

</head>
<body>
    <a href="#">My Link</a>
    <h1>My header</h1>
    <p id="p1">你好世界！</p>
    <div id="div1">
        <span>我是行内元素</span>
    </div>
    <div class="div2">我是第一个类属性为div2 的div元素</div>
    <div class="div2">我是第二个类属性为div2 的div元素</div>
    <p class="demo">hello</p>
    <p class="demo">hi</p>

    <script type="application/javascript">
      var body = document.body;//获取body元素，包含body里面的所有元素
      var AllList = document.documentElement;//获取整个html页面的元素
      console.log(body);
      console.log(AllList);
    </script>

</body>
</html>

在这里插入图片描述

修改操作节点元素

修改 HTML DOM 包含：

  • 改变 HTML内容
  • 改变 CSS 样式
  • 改变 HTML 属性
  • 创建新的 HTML 元素
  • 删除已有的 HTML 元素
  • 改变事件（处理程序）
1.改变html内容

改变元素内容，最简单的方法是使用 innerHTML 属性或者innerText来修改文本元素内容。
element.innerHTML = "值"
这里的值可以是一个标签<p> 111</p>
element.innerText = "值"

例如：给id属性值为div1的元素添加一段文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Title</title>

</head>
<body>
    <a href="#">My Link</a>
    <h1>My header</h1>
    <p id="p1">你好世界！</p>
    <div id="div1"></div><!--原本div里面没有任何内容-->

    <script type="application/javascript">
        var div1 = document.getElementById("div1").innerText="嘿！";//给id属性值是div1的元素添加一段文字
    </script>

</body>
</html>

在这里插入图片描述

2.给html修改样式

element.style.属性='值'
例如：将h1标题添加一个背景色，并且将文字颜色改成蓝色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Title</title>

</head>
<body>
    <a href="#">My Link</a>
    <h1>My header</h1>
    <p id="p1">你好世界！</p>
    <div id="div1"></div><!--原本div里面没有任何内容-->

    <script type="application/javascript">
        var div1 = document.getElementById("div1").innerText="嘿！";//给id属性值是div1的元素添加一段文字
        var h1 = document.getElementsByTagName("h1");
        console.log(h1);// 获取到的是一个集合，因为这个html页面只有一个h1标签，所以可以通过.item(0)来访问到第一个h1元素
        h1.item(0).style.background="lightYellow";//给标题添加背景色
        h1.item(0).style.color="blue";//将标题的文字颜色修改
    </script>

</body>
</html>

在这里插入图片描述

3.创建新的 HTML 元素 (新增子元素)

element.appendChild

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Title</title>

</head>
<body>
    <a href="#">My Link</a>
    <h1>My header</h1>
    <p id="p1">你好世界！</p>
    <div id="div1"></div>

    <script type="application/javascript">
        var div1 = document.getElementById("div1");
        var span = document.createElement("span");//创建一个span元素
        var spanText = document.createTextNode("我是新增的");//新建文本节点内容
        span.appendChild(spanText);//span里面添加文本内容
        div1.appendChild(span);//将span嵌入到div里面
        var bd = document.body;
        console.log(bd);//查看body里面的元素
    </script>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

4.删除已有的 HTML 元素

element.remove()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Title</title>

</head>
<body>
    <a href="#">My Link</a>
    <h1>My header</h1>
    <p id="p1">你好世界！</p>
    <div id="div1"></div>

    <script type="application/javascript">
        var p1 = document.getElementById("p1");
        p1.remove();//删除 id为p1 的元素
        //此时页面上 你好世界！ 不存在了

    </script>

</body>
</html>

在这里插入图片描述
小结：
1.一些常用的 HTML DOM 方法：

  • getElementById(id) - 获取带有指定 id 的节点（元素）
  • appendChild(node) - 插入新的子节点（元素）
  • removeChild(node) - 删除子节点（元素）
    2.一些常用的 HTML DOM 属性：
  • innerHTML - 节点（元素）的文本值
  • parentNode - 节点（元素）的父节点
  • childNodes - 节点（元素）的子节点
  • attributes - 节点（元素）的属性节点
    3.DOM对象方法
  • getElementById() 返回带有指定 ID 的元素。
  • getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
  • getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
  • appendChild() 把新的子节点添加到指定节点。
  • removeChild() 删除子节点。
  • replaceChild() 替换子节点。
  • insertBefore() 在指定的子节点前面插入新的子节点。
  • createAttribute() 创建属性节点。
  • createElement() 创建元素节点。
  • createTextNode() 创建文本节点。
  • getAttribute() 返回指定的属性值。
  • setAttribute() 把指定属性设置或修改为指定的值。

还是多多练习，熟练自然掌握不需要刻意记忆，需要用到时查阅即可！

5.使用事件

当 HTML 元素"有事情发生"时，浏览器就会生成事件：

  • 在元素上点击
  • 加载页面
  • 改变输入字段

HTML 事件的例子：

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图片已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当 HTML 表单被提交时
  • 当用户触发按键时
onclick 事件

鼠标被点击完成后就会触发onclick事件。
例如，给一个按钮添加点击事件
用来切换整个页面的背景色，实现夜间模式切换，哈哈哈哈！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Title</title>

</head>
<body id="bd">
    <a href="#">My Link</a>
    <h1>My header</h1>
    <p id="p1">你好世界！</p>
    <button onclick="changeBg()">点击切换夜间模式</button>

    <script type="application/javascript">
        function changeBg() {
    
            var body = document.getElementById("bd");
            var a = document.getElementsByTagName("a");
            var h1 = document.getElementsByTagName("h1");
            var p1 = document.getElementById("p1");
            body.style.background = "black";//修改背景色
            a.item(0).style.color = "white";//修改超链接字体颜色为白色
            h1.item(0).style.color="blue";//修改标题颜色为蓝色
            p1.style.color="yellow";//修改p1 字体颜色为黄色
        }
    </script>

</body>
</html>

初始页面效果
在这里插入图片描述
点击按钮后
在这里插入图片描述
心血来潮，再来一个升级版，模式互相切换！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Title</title>

</head>
<body id="bd">
    <a href="#">My Link</a>
    <h1>My header</h1>
    <p id="p1">你好世界！</p>
    <button onclick="changeBg()" value="初始">点击切换模式</button>

    <script type="application/javascript">
        var body = document.getElementById("bd");
        var a = document.getElementsByTagName("a").item(0);
        var h1 = document.getElementsByTagName("h1").item(0);
        var p1 = document.getElementById("p1");
        var btn  = document.getElementsByTagName("button").item(0);

        function changeBg() {
    
           if (btn.value==="初始"){
    
               body.style.background = "black";//修改背景色
               a.style.color = "white";//修改超链接字体颜色为白色
               h1.style.color="blue";//修改标题颜色为蓝色
               p1.style.color="yellow";//修改p1 字体颜色为黄色
               btn.value="被点击";
           }else if(btn.value==="被点击"){
    
               //恢复初始样式
               body.style.background = "white";
               a.style.color = "black";
               h1.style.color="black";
               p1.style.color="black";
               btn.value="初始";
            }

        }
    </script>

</body>
</html>
onload和onunload事件

当用户进入或离开页面时，会触发 onload 和 onunload 事件。
例如，cookie的检验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="checkCookies()"><!--在body加载时就会调用checkCookies函数-->
    <script type="application/javascript">
        function checkCookies()
        {
    
            if (navigator.cookieEnabled==true)
            {
    
                alert("Cookies 已启用")
            }
            else
            {
    
                alert("Cookies 未启用")
            }
        }
    </script>
</body>
</html>
onchange 事件

onchange事件一般用于表单检验（输入字段的验证）。
比如通过onchange事件将输入的字符转换为大写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript">
        function upper() {
    
            let ipt1 = document.getElementById("ipt1");//获取input元素
            ipt1.value=ipt1.value.toUpperCase();//修改input输入框中的值，将其转换为大写
            console.log(ipt1.value);
        }
    </script>
</head>
<body>
<p>通过onchange事件，将输入框中的数据转换为大写字母</p>
<input type="text" id="ipt1" placeholder="请输入小写英文字母"  onchange="upper()">
</body>
</html>
onmouseover 和 onmouseout 事件

当鼠标移入会触发 onmouseover 事件，鼠标移出时会触发onmouseout事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1{
    
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background: aquamarine;
        }
    </style>
</head>
<body>
    <div id="div1" onmouseover="mouseOver()" onmouseout="mouseOut()" >

    </div>
    <script type="application/javascript">
        var div1 =document.getElementById("div1");
        function mouseOver() {
    
            div1.style.color="green";
            div1.innerText="移动鼠标试试！";
        }
        function mouseOut(){
    
            div1.style.color="red";
            div1.innerText="拜拜咯";
        }
    </script>
</body>
</html>
onmousedown、onmouseup 事件

当鼠标被按下时触发onmousedown事件，鼠标松开时触发onmouseup事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style >
        #div1{
    
            width: 200px;
            height: 200px;
            border-radius: 10px;
            border: 2px solid gray;
            background: aquamarine;
        }
    </style>

</head>
<body>
  <div id="div1" onmouseup="upMouse()" onmousedown="downMouse()"></div>
  <script type="application/javascript">
      var div1 = document.getElementById("div1");
      function upMouse() {
    
          div1.style.color="white";
          div1.style.fontFamily="微软雅黑";
          div1.innerText="鼠标松开";
      }
      function downMouse() {
    
          div1.style.color="black";
          div1.style.fontFamily="微软雅黑";
          div1.innerText="鼠标按下";
      }
  </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
以上就是基础的dom操作了，暂时完结。

文章标签：
JavaScript
前端开发
数据格式
XML
移动开发
关键词：
JavaScript DOM
js dom
JavaScript BOM
bom dom
js bom dom
杀死一只知更鸟debug
目录
相关文章
光明顶阳顶天
|
25天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染，了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略，可以提高网页的性能和用户体验，确保页面能够快速、流畅地呈现给用户。在实际开发中，要根据具体情况进行权衡和调整，以达到最佳的效果。
光明顶阳顶天
28 1
我是快乐的嘟嘟
|
11天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具，通过它们可以动态地改变页面的内容、样式和行为，为用户提供丰富的交互体验。
我是快乐的嘟嘟
75 49
我是快乐的嘟嘟
|
11天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
我是快乐的嘟嘟
74 48
大树营养快线
|
12天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法，JavaScript 可以实现丰富的网页交互效果，如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中，开发者可以根据具体的需求和场景，选择合适的 DOM 元素操作方法来实现所需的功能，为用户提供更加流畅和动态的网页体验。
大树营养快线
38 4
光明顶阳顶天
|
22天前
|
缓存 编解码 JavaScript
DOM 和 BOM 在项目中应用时的性能优化方法
【10月更文挑战第19天】总之，优化 DOM 和 BOM 的性能需要综合考虑多个方面，通过合理的设计和技术手段，提升项目的运行效率和用户体验。在实际开发中，要不断地进行性能优化实践，以适应不断变化的需求和技术发展。
光明顶阳顶天
36 7
光明顶阳顶天
|
22天前
|
JavaScript 安全 物联网
DOM 和 BOM 在项目中的应用
【10月更文挑战第19天】在现代网页开发和应用项目中，DOM（文档对象模型）和 BOM（浏览器对象模型）扮演着至关重要的角色。它们为开发者提供了与网页文档和浏览器环境进行交互的能力，使项目能够实现丰富的功能和用户体验。
光明顶阳顶天
26 5
光明顶阳顶天
|
22天前
|
XML 编解码 JavaScript
DOM（文档对象模型）和 BOM（浏览器对象模型）
【10月更文挑战第19天】在前端开发中，理解 DOM（文档对象模型）和 BOM（浏览器对象模型）是至关重要的。它们是 Web 开发的基础，为我们提供了与网页文档和浏览器进行交互的能力。
光明顶阳顶天
46 5
神明木佑
|
1月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
神明木佑
45 4
神明木佑
|
1月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
神明木佑
35 0
Hoshiᅟᅠ
|
1月前
|
JavaScript 前端开发 Java
【前端基础篇】JavaScript之BOM介绍
【前端基础篇】JavaScript之BOM介绍
Hoshiᅟᅠ
36 0