JavaScript中DOM和BOM原理详析

2023年6月10日上午11:44 • JavaScript

JavaScript中DOM和BOM原理详析

什么是DOM？

DOM（文档对象模型）是JavaScript操作网页的接口，它将网页文档看成一个树形结构，可以通过JavaScript来操作这个树形结构中的各个节点。HTML中的标签、文本和属性都被表示为树中的节点，节点与节点之间有父子和兄弟关系。

DOM接口

DOM提供了一系列的API，可以通过这些API对节点进行操作，例如：

获取元素:getElementById、getElementsByTagName等方法；
修改元素：innerHTML属性、setAttribute方法等；
新增元素：createElement、appendChild等。

什么是BOM？

BOM（浏览器对象模型）是JavaScript操作浏览器窗口的接口，它提供了一些对象，可以通过JavaScript来操作浏览器窗口，例如：

窗口大小：通过window对象的innerWidth和innerHeight属性来获取；
窗口位置：通过window对象的screenLeft和screenTop属性来获取；
历史记录：通过history对象来操作。

DOM和BOM的关系

DOM是用来操作页面文档的，而BOM是用来操作浏览器窗口的。在JavaScript中，DOM和BOM都是通过window对象来访问的，因为window对象是JavaScript和浏览器之间的桥梁，它提供了对DOM和BOM的访问。

// 获取元素
let divElement = document.getElementById('myDiv');
let pElements = document.getElementsByTagName('p');

// 修改元素
divElement.innerHTML = 'Hello World';
divElement.setAttribute('class', 'myDivClass');

// 新增元素
let newElement = document.createElement('h1');
newElement.innerText = 'DOM and BOM';
document.body.appendChild(newElement);

// 获取窗口大小和位置
let windowHeight = window.innerHeight;
let windowWidth = window.innerWidth;
let windowLeft = window.screenLeft;
let windowTop = window.screenTop;

// 操作历史记录
history.back();
history.forward();

示例说明

示例一

以下示例展示了如何使用JavaScript操作页面元素，将一个按钮的文本修改为"Click Me"，添加一个事件监听器，当点击按钮时弹出一个对话框。

<!DOCTYPE html>
<html>
<head>
    <title>DOM示例</title>
    <script type="text/javascript">
        window.onload = function() {
            let btn = document.getElementById('myBtn');
            btn.innerHTML = 'Click Me';
            btn.addEventListener('click', function() {
                alert('Hello World');
            })
        }
    </script>
</head>
<body>
    <button id="myBtn">My Button</button>
</body>
</html>

示例二

以下示例展示了如何使用JavaScript操作浏览器窗口，当窗口大小小于600px时，将文本的颜色修改为红色；当窗口大小大于600px时，将文本的颜色修改为绿色。

<!DOCTYPE html>
<html>
<head>
    <title>BOM示例</title>
    <style type="text/css">
        p {
            font-size: 30px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            setInterval(function() {
                let windowWidth = window.innerWidth;
                if(windowWidth < 600) {
                    document.getElementsByTagName('p')[0].style.color = 'red';
                } else {
                    document.getElementsByTagName('p')[0].style.color = 'green';
                }
            }, 1000);
        }
    </script>
</head>
<body>
    <p>Hello World</p>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript中DOM和BOM原理详析 - Python技术站