DOM与BOM

DOM与BOM

DOM（Document Object Model）和BOM（Browser Object Model）是JavaScript中的两个重要概念。

DOM是指文档对象模型，指的是HTML或XML文档对应的一棵树形结构，通过DOM可以对文档中的各个元素进行操作和控制。在DOM树中，每个元素都有对应的节点和属性，通过JavaScript中的DOM API可以对这些节点和属性进行访问和操作。例如，可以通过document.getElementById() 方法获取元素，通过element.setAttribute() 方法设置元素属性，通过element.innerHTML 修改元素内容等等。

BOM是指浏览器对象模型，指的是浏览器窗口和页面之间的交互接口，包含浏览器提供的一些全局对象，比如window、location、navigator和screen等，在BOM中，可以通过这些对象来获取和操作浏览器的信息和状态，例如可以通过window.open() 方法打开一个新窗口，通过location.href 修改页面URL等等。

DOM 和 BOM 是两个相互独立的概念，但二者之间也有联系，因为在浏览器中，DOM 对象是挂载在 BOM 对象的 window 对象下面的，因此可以通过 window 对象来访问和操作 DOM 对象。同时，JavaScript 代码可以通过 DOM 和 BOM API 进行页面的操作和功能实现。

常用的DOM操作：

1. 获取元素：document.getElementById()，document.getElementsByClassName()，document.getElementsByTagName()，document.querySelector()，document.querySelectorAll()

2. 操作元素内容和属性：element.innerHTML，element.textContent，element.setAttribute()，element.getAttribute()，element.classList.add()，element.classList.remove()，element.style

3. 创建、插入和删除元素：document.createElement()，parentNode.insertBefore()，parentNode.appendChild()，element.remove()

4. 事件监听：element.addEventListener()

常用的BOM操作：

1. 窗口和页面：window.open()，window.close()，window.alert()，window.prompt()，window.confirm()，window.location.href

2. 定时器：setInterval()，setTimeout()

3. 浏览器信息和状态：navigator.userAgent，navigator.onLine，screen.width，screen.height

4. 历史记录：history.back()，history.forward()，history.go()

需要注意的是，DOM 和 BOM 操作都会影响页面性能和用户体验，因此在使用过程中需要注意合理性和性能优化。