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

杀死一只知更鸟debug

已于 2022-10-13 17:27:38 修改

阅读量1k

点赞数 4

分类专栏： JavaScript 文章标签： javascript 前端 html

于 2022-10-05 17:53:03 首次发布

本文链接：https://blog.csdn.net/m0_63622279/article/details/127149502

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

BOM和DOM总结

BOM知识点概览
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操作了，暂时完结。

杀死一只知更鸟debug

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
2
评论
js中BOM和DOM总结（基础篇）

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

扫一扫