Javascript基础知识（三）BOM，DOM总结

BOM（浏览器对象模型）

浏览器对象模型（BOM）提供了一组与浏览器窗口有关的对象，有助于操作浏览器窗口和屏幕显示。BOM是由浏览器厂商自行定义的，因此不属于W3C标准。

BOM的核心对象是window对象，表示浏览器窗口和页面。window对象还可以通过自身属性和方法来操作浏览器窗口、页面、框架、历史记录和用户数据等。

示例1：获取浏览器窗口大小

let windowWidth = window.innerWidth || document.documentElement.clientWidth;
let windowHeight = window.innerHeight || document.documentElement.clientHeight;
console.log(`当前窗口大小为：${windowWidth} x ${windowHeight}`);

示例2：创建新窗口

let newWindow = window.open('https://www.example.com', '_blank');

DOM（文档对象模型）

文档对象模型（DOM）是一种用于操作HTML和XML文档的API，将文档看作树形结构，每个节点表示文档中的一个元素、属性、文本等。

DOM将文档抽象成一个“文档对象”，通过针对文档对象的操作来修改文档的内容、结构和样式等。DOM API提供了一组对象和方法，可帮助我们查找、创建、修改和删除文档中的元素、属性和文本等。

示例1：查找元素

let heading = document.querySelector('h1');
console.log(`页面中第一个H1标题的内容为：${heading.innerText}`);

示例2：修改元素样式和内容

let heading = document.querySelector('h1');
heading.style.color = 'red';
heading.innerText = '欢迎来到我的网站';

DOM还提供了更多的功能，例如事件绑定、动态创建元素、在文档中移动元素等操作。了解DOM可以帮助我们更好地掌握如何操作HTML和XML文档。