常见的DOM操作有哪些？常见的BOM对象有哪些？DOM操作与BOM对象的区别？

发布时间：2024年01月07日

常见的DOM操作有哪些？

一、DOM

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。

它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

任何 HTML或XML文档都可以用 DOM表示为一个由节点构成的层级结构。

二、常见的DOM操作

日常前端开发，我们都离不开DOM操作。

在以前，我们使用Jquery、zepto等库来操作DOM，之后在vue、Angular、React等框架出现后，我们通过操作数据来控制DOM（绝大多数时候），越来越少的去直接操作DOM。

但这并不代表原生操作不重要。相反，DOM操作才能有助于我们理解框架深层的内容。

下面就来分析DOM常见的操作，主要分为：

常见的DOM操作包括以下几种：

  1. 获取元素：你可以使用 document.getElementById(id)、document.getElementsByClassName(className)、document.getElementsByTagName(tagName) 等方法来获取页面上的元素。

  2. 修改元素属性：你可以使用 .setAttribute(name, value) 方法来设置元素的属性，也可以使用 .getAttribute(name) 来获取属性的值。

  3. 修改元素内容：你可以使用 .innerHTML 或 .textContent 来修改元素的文本内容。

  4. 创建新元素：使用 document.createElement(tagName) 方法可以创建新的元素节点，然后使用 .appendChild() 方法将其添加到父元素中。

  5. 移除元素：使用 .removeChild() 方法可以从父元素中移除子元素。

  6. 修改元素样式：你可以使用 .style 属性来修改元素的样式，也可以通过添加或移除 CSS 类来改变元素的样式。

  7. 添加事件监听器：使用 .addEventListener(event, callback) 方法可以为元素添加事件监听器，以响应用户的交互动作。

  8. 遍历DOM树：你可以使用不同的属性和方法来遍历DOM树，例如 .parentNode、.childNodes、.nextSibling、.previousSibling 等。

  9. 查询元素位置和尺寸：使用 .offsetTop、.offsetLeft、.offsetWidth、.offsetHeight 等属性可以获取元素的位置和尺寸信息。

  10. 修改元素的类名：使用 .classList 属性可以方便地添加、删除和切换元素的类名。

这些是常见的DOM操作，可以用来操控页面上的元素，实现动态交互和内容的修改。需要根据具体的需求选择合适的操作方法。

三、案例效果

选取元素：

描述：通过标签名、类名、ID或其他属性来选取HTML元素。
例子：选取所有段落元素并改变它们的颜色。
请添加图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选取元素示例</title>
</head>
<body>
    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>
    <p>这是第三个段落。</p>

    <script>
        var paragraphs = document.querySelectorAll('p');
        for (var i = 0; i < paragraphs.length; i++) {
            paragraphs[i].style.color = 'blue';
        }
    </script>
</body>
</html>

获取和设置元素内容：

描述：获取或设置HTML元素的文本内容或HTML代码。
例子：获取一个元素的文本内容并将其修改。
请添加图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取和设置元素内容示例</title>
</head>
<body>
    <p id="myElement">这是原始文本内容。</p>

    <script>
        var element = document.getElementById('myElement');
        var textContent = element.textContent; // 获取文本内容
        element.textContent = '新的文本内容'; // 设置文本内容
    </script>
</body>
</html>

添加和删除元素：

描述：在文档中动态添加新元素或删除现有元素。
例子：在列表中添加新的列表项。
请添加图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加和删除元素示例</title>
</head>
<body>
    <ul id="myList">
        <li>列表项1</li>
        <li>列表项2</li>
    </ul>

    <button onclick="addItem()">添加新项</button>

    <script>
        function addItem() {
            var list = document.getElementById('myList');
            var newItem = document.createElement('li');
            newItem.textContent = '新的列表项';
            list.appendChild(newItem); // 添加新的列表项
        }
    </script>
</body>
</html>

修改元素属性：

描述：获取或修改元素的属性值，如src、href、class等。
例子：修改图像的src属性。
请添加图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改元素属性示例</title>
</head>
<body>
    <img id="myImage" src="./img/1.jpeg" alt="原始图片">

    <button onclick="changeImage()">修改图片</button>

    <script>
        function changeImage() {
            var image = document.getElementById('myImage');
            image.src = './img/2.jpeg'; // 修改图像的src属性
        }
    </script>
</body>
</html>

事件处理：

描述：为元素添加事件监听器，以响应用户交互。
例子：为按钮添加点击事件处理程序。
请添加图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理示例</title>
</head>
<body>
    <button id="myButton">点击我</button>

    <script>
        var button = document.getElementById('myButton');
        button.addEventListener('click', function() {
            alert('按钮被点击了！');
        });
    </script>
</body>
</html>

遍历DOM树：

遍历DOM树是指在HTML文档中沿着父子、兄弟关系浏览元素。这允许您查找、访问和操作文档中的不同部分。

描述：遍历文档的层次结构，访问父元素、子元素和兄弟元素。
例子：查找元素的父元素和子元素。
请添加图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历DOM树示例</title>
</head>
<body>
    <div id="parentDiv">
        <p>这是父元素。</p>
        <ul>
            <li>子元素1</li>
            <li>子元素2</li>
        </ul>
        <p>另一个子元素。</p>
    </div>

    <!-- 将JavaScript代码放在文档底部 -->
    <script>
        // 等待文档加载完成后再执行代码
        document.addEventListener("DOMContentLoaded", function() {
            // 获取父元素
            var parentElement = document.getElementById('parentDiv');
            if (parentElement) {
                console.log("父元素标签名: " + parentElement.tagName); // 输出：DIV
            }

            // 获取子元素
            var childElements = parentElement ? parentElement.children : [];
            console.log("子元素数量: " + childElements.length); // 输出：3

            // 遍历子元素
            for (var i = 0; i < childElements.length; i++) {
                var child = childElements[i];
                console.log("子元素标签名: " + child.tagName);
            }

            // 获取下一个兄弟元素
            var siblingElement = parentElement ? parentElement.nextElementSibling : null;
            if (siblingElement) {
                console.log("下一个兄弟元素标签名: " + siblingElement.tagName); // 输出：P
            }

            // 获取前一个兄弟元素
            var previousSiblingElement = parentElement ? parentElement.previousElementSibling : null;
            if (previousSiblingElement) {
                console.log("前一个兄弟元素标签名: " + previousSiblingElement.tagName); // 输出：H1
            }
        });
    </script>
</body>
</html>

常见的BOM对象有哪些？

一、BOM 是什么

BOM(Browser Object Model)，浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象。

其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退，前进，刷新，浏览器的窗口发生变化，滚动条的滚动，以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。

浏览器的全部内容可以看成DOM，整个浏览器可以看成BOM。区别如下：

DOMBOM
文档对象模型文档对象模型
DOM就是把 文档当作一个 对象 来看待BOM把 浏览器 当作一个 对象 来看待
DOM的顶级对象是 document BOM的顶级对象是 window
DOM主要学习的是操作页面元素BOM学习的是浏览器窗口交互的一些对象
DOM是 W3C 标准规范BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

二、window

Bom 的核心对象是 window ，它表示浏览器的一个实例。

在浏览器中，window 对象有双重角色，即是浏览器窗口的一个接口，又是全局对象。

因此所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。

var name = 'js每日一题';
function lookName(){
  alert(this.name);
}

console.log(window.name);  //js每日一题
lookName();                //js每日一题
window.lookName();         //js每日一题

关于窗口控制方法如下：

  • moveBy(x,y)：从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体。
  • moveTo(x,y)：移动窗体左上角到相对于屏幕左上角的(x,y)点。
  • resizeBy(w,h)：相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体。
  • resizeTo(w,h)：把窗体宽度调整为w个像素，高度调整为h个像素。
  • scrollTo(x,y)：如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置。
  • scrollBy(x,y)： 如果有滚动条，将横向滚动条向左移动x个像素，将纵向滚动条向下移动y个像素。

window.open() 既可以导航到一个特定的 url，也可以打开一个新的浏览器窗口。

如果 window.open() 传递了第二个参数，且该参数是已有窗口或者框架的名称，那么就会在目标窗口加载第一个参数指定的URL。

window.open('htttp://www.vue3js.cn','topFrame')
==> < a href=" " target="topFrame"></ a>

window.open() 会返回新窗口的引用，也就是新窗口的 window 对象。

const myWin = window.open('http://www.vue3js.cn','myWin')

window.close() 仅用于通过 window.open() 打开的窗口。

新创建的 window 对象有一个 opener 属性，该属性指向打开他的原始窗口对象。

三、location

location属性描述如下：

属性名例子说明
hash“#Examples”utl中#后面的字符，没有则返回空串
hostdeveloper.mozilla.org:443服务器名称和端口号
hostnamedeveloper.mozilla.org域名，不带端口号
hrefhttps://developer.mozilla.org:443/en-US/Location.host?q=123#Examples完整url
pathname“/en-US/”服务器下面的文件路径
port443url的端口号，没有则为空
protocolhttps:使用的协议
search?q=123url的查询字符串，通常为？后面的内容

除了 hash之外，只要修改location的一个属性，就会导致页面重新加载新URL。

location.reload()，此方法可以重新刷新当前页面。这个方法会根据最有效的方式刷新页面，如果页面自上一次请求以来没有改变过，页面就会从浏览器缓存中重新加载。

如果要强制从服务器中重新加载，传递一个参数true即可。

四、navigator

navigator 对象主要用来获取浏览器的属性，区分浏览器类型。属性较多，且兼容性比较复杂。

Navigator 接口表示用户代理的状态和标识。它允许脚本查询它和注册自己进行一些活动。

可以使用只读的 window.navigator 属性检索 navigator 对象。

下表列出了一些navigator 对象接口定义的属性和方法：

属性说明
appCodeName返回浏览器的代码名。只读,任何浏览器中，总是返回 ‘Gecko’。该属性仅仅是为了保持兼容性。
appMinorVersion返回浏览器的次级版本。
appName返回浏览器的名称。只读,不要指望该属性返回正确的值。
appVersion返回浏览器的平台和版本信息。只读,返回一个字符串，表示浏览器的版本。不要指望该属性返回正确的值。
browserLanguage返回当前浏览器的语言。
battery返回一个 BatteryManager 对象，你可以用它来获取一些电池充电状态的信息。
connection返回一个提供NetworkInformation对象来获取设备的网络连接信息，只读 。
cookieEnabled返回指明浏览器中是否启用 cookie 的布尔值。只读，当忽略 cookie 时返回 false，否则返回 true
cpuClass返回浏览器系统的 CPU 等级。
onLine返回浏览器是否在线，在线返回 ture，否则返回 false。
platform返回运行浏览器的操作系统平台。只读,返回一个字符串。
systemLanguage返回 OS 使用的默认语言。
userAgent返回由客户机发送服务器的 user-agent 头部的值。只读,返回当前浏览器的用户代理字符串。
userLanguage返回 OS 的自然语言设置。
geolocation返回浏览器的地理位置信息。只读，返回一个 Geolocation 对象。
language返回浏览器使用的语言。只读，返回表示用户的首先语言，通常是浏览器用户界面的语言。当未知的时，返回null。
languages返回一个表示用户已知语言的数组，只读，并按优先顺序排列。
mineTypes返回浏览器所支持的MIME类型的数组，只读。
oscpu返回当前操作系统名。
product返回浏览器使用的引擎（产品）。只读,返回当前浏览器的产品名称（如，“Gecko”）。
方法说明
javaEnabled()返回一个布尔值，该值指示浏览器是否支持并启用了 Java。如果是，则返回 true，否则返回 false。
taintEnabled()返回一个布尔值，规定浏览器是否启用数据污点(data tainting) 。如果浏览器启用了数据污染，则为 true，否则为 false。

五、screen

保存的纯粹是客户端能力信息，也就是浏览器窗口外面的客户端显示器的信息，比如像素宽度和像素高度。

属性说明
availHeight返回屏幕的高度（不包括Windows任务栏），只读。
availWidth返回屏幕的宽度（不包括Windows任务栏），只读。
availLeft返回屏幕左边边界的第一个像素点，只读。
availTop返回屏幕最顶端像素，只读。
colorDepth返回目标设备或缓冲器上的调色板的比特深度，只读。
height返回屏幕的总高度
left返回从最左边界到当前屏幕的像素值。
pixelDepth返回屏幕的颜色分辨率（每象素的位数），只读。
top返回最上边界到当前屏幕的像素值。
width返回屏幕的总宽度
orientation返回当前屏幕的朝向。
mozEnabled布尔值。如果设置为 false 将关闭设备的屏幕。
mozBrightness控制设备屏幕的亮度。期望参数是 0-1.0 之间的浮点数。

六、history

history对象主要用来操作浏览器URL的历史记录，可以通过参数向前，向后，或者向指定URL跳转。

常用的属性如下：

history.go()
接收一个整数数字或者字符串参数：向最近的一个记录中包含指定字符串的页面跳转。

history.go('maixaofei.com')

当参数为整数数字的时候，正数表示向前跳转指定的页面，负数为向后跳转指定的页面。

history.go(3) //向前跳转三个记录
history.go(-1) //向后跳转一个记录

history.forward()：向前跳转一个页面
history.back()：向后跳转一个页面
history.length：获取历史记录数

DOM操作与BOM对象的区别？

DOM（Document Object Model）和BOM（Browser Object Model）都是用于在浏览器中进行编程的重要对象模型，但它们有一些关键的区别：

一、 DOM（文档对象模型）：

  • DOM用于操作和访问网页文档的结构和内容。
  • 它允许您以树状结构的方式访问HTML或XML文档中的元素，如元素、属性、文本等。
  • DOM提供了一种方式来添加、修改、删除文档中的元素和内容。
  • 主要用于处理网页的内容和结构，例如更改文本、添加/删除元素、修改样式等。
  • 典型的DOM对象包括document、element、node等，用于操作HTML或XML文档的元素和内容。

二、 BOM（浏览器对象模型）：

  • BOM用于与浏览器窗口和浏览器本身的交互。
  • 它提供了对象来控制浏览器的行为，如打开/关闭窗口、导航历史、浏览器尺寸、弹出对话框等。
  • BOM不是标准化的，它的特性和行为在不同的浏览器中有所不同，因此在跨浏览器开发中需要小心处理。
  • 典型的BOM对象包括window、navigator、location、history、screen等，用于控制浏览器窗口和浏览器的属性和行为。

总结来说，DOM主要关注于操作和访问网页的内容和结构，而BOM关注于与浏览器本身的交互。这两者虽然在JavaScript中都使用对象模型来表示，但它们的职责和操作对象是不同的。在Web开发中，您通常需要同时使用DOM和BOM来实现各种交互和功能。

持续学习总结记录中，回顾一下上面的内容：
常见的DOM操作有哪些？常见的BOM对象有哪些？DOM操作与BOM对象的区别？

文章来源:https://blog.csdn.net/qq_37255976/article/details/134465537
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章