JavaScript之BOM+DOM

什么是BOM？

BOM（Browser Object Model），即浏览器对象模型，它提供了一组与浏览器交互的对象和方法，可以用来实现浏览器的基本操作。BOM的核心是window对象，window对象是全局对象，它包含了许多属性和方法，如setTimeout和setInterval等。

BOM的常用属性和方法

1. 弹出窗口

浏览器窗口可以通过JavaScript代码使用window对象的open()方法创建新的窗口。

window.open(url, name, features, replace);

• url：可选参数，新窗口加载的URL地址
• name：可选参数，新窗口的名称，用于后续的操作等
• features：可选参数，配置新窗口的特性，如窗口大小、是否可调整等
• replace：可选参数，是否替换历史记录，默认为false

2. 窗口大小和位置

BOM提供了一些用于操作窗口的属性和方法。

• window.innerWidth/innerHeight：获取窗口的内部宽度和高度
• window.outerWidth/outerHeight：获取窗口的外部宽度和高度
• window.screenX/screenY：获取窗口相对于屏幕的X/Y坐标
• window.moveBy()：相对于当前位置移动窗口
• window.moveTo()：移动窗口到指定位置
• window.resizeBy()：相对于当前大小缩放窗口
• window.resizeTo()：缩放窗口到指定大小

3. 操作文档

BOM中的window对象也提供了一些方法，可以用于操作页面上的元素。

• window.document：返回当前文档对象
• document.getElementById()：获取指定ID的元素
• document.getElementByClassName()：获取指定类名的元素
• document.getElementsByTagName()：获取指定标签名的元素
• document.createElement()：创建一个新的元素
• element.innerHTML：获取或设置元素的HTML内容

DOM

DOM（Document Object Model）是指文档对象模型，它是BOM的一部分，但它与BOM不同的是，它提供了一种处理网页内容的方法。DOM将HTML文档视为一个层次结构的对象，因此可以使用JavaScript来操作和修改文档内容。

DOM的核心是文档对象document，document对象提供了各种方法来修改文档内容，如getElementById、getElementsByClassName、createElement等方法。

1. 获取元素

使用document.getElementById()方法可以获取指定ID的元素。

const element = document.getElementById('id');

使用document.getElementsByTagName()方法可以获取指定标签名的元素。

const elements = document.getElementsByTagName('tag');

使用document.getElementsByClassName()方法可以获取指定类名的元素。

const elements = document.getElementsByClassName('className');

2. 新增元素

使用document.createElement()方法可以创建一个新的元素。

const element = document.createElement('tag');

使用element.innerHTML属性可以设置元素的HTML内容。

element.innerHTML = 'Hello World';

使用element.appendChild()方法可以将一个元素添加到另一个元素的子元素列表中。

parentElement.appendChild(childElement);

3. 修改元素

使用element.style属性可以修改元素的CSS样式。

element.style.backgroundColor = 'red';

使用element.setAttribute()方法可以设置元素属性。

element.setAttribute('attributeName', 'attributeValue');

4. 删除元素

使用element.parentNode.removeChild()方法可以删除元素。

parentElement.removeChild(childElement);

总结

BOM和DOM是网页中的两个重要组成部分，我们可以借助它们来对网页进行操作，如新增、删除、修改元素、弹出窗口等。掌握基本的BOM和DOM操作对于网页开发来说是非常重要的，希望本文对您有所帮助。