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技术站
微信扫一扫 
支付宝扫一扫 