BOM是什么？？？DOM又是什么？？？

BOM（Browser Object Model）指的是浏览器对象模型，它是用于描述浏览器窗口及其内容的一种抽象表示。BOM并不是W3C标准的一部分，而是浏览器厂商基于JavaScript提供的一系列对象和方法的集合，用于操作浏览器窗口、处理用户输入以及与浏览器交互等功能。
BOM包含了一系列对象，其中最重要的是window对象，它代表了一个浏览器窗口或一个标签页。window对象提供了许多属性和方法，用于操作当前浏览器窗口的各个方面，如窗口大小、位置、历史记录、文档加载状态等。除了window对象之外，BOM还包括其他一些重要的对象，例如navigator对象用于获取浏览器的相关信息（如用户代理字符串、浏览器类型等），location对象用于获取和设置当前文档的URL信息，history对象用于操作浏览器的历史记录等。

总的来说，BOM提供了一种与浏览器窗口进行交互的机制，开发者可以利用BOM提供的对象和方法来实现各种功能，例如打开新窗口、操作历史记录、处理用户输入等。
DOM（Document Object Model）是文档对象模型，它是一种编程接口，用于表示和操作HTML或XML文档。DOM将整个文档表示为一个对象树，允许程序和脚本以一种与平台和语言无关的方式访问和修改文档的内容、结构和样式。
通过DOM，开发者可以使用JavaScript等脚本语言来操作HTML或XML文档，实现如添加节点、删除节点、修改节点属性、处理事件等操作。DOM提供了一组API，用于访问和修改文档内容，使得文档的修改更加方便和灵活。

BOM的常见操作

常见的BOM操作包括以下几种：

打开和关闭窗口：
- 使用window.open()方法可以在浏览器中打开一个新的窗口或标签页，并可以指定URL、窗口大小、位置等参数。
- 使用window.close()方法可以关闭当前窗口或标签页。
操作浏览器历史记录：
- 使用window.history.back()方法可以在浏览器中后退到上一个页面。
- 使用window.history.forward()方法可以在浏览器中前进到下一个页面。
定时器操作：
- 使用setTimeout()函数可以在一定的时间间隔后执行一次代码。
- 使用setInterval()函数可以每隔一定的时间间隔重复执行一次代码。
- 使用clearTimeout()和clearInterval()函数可以取消之前设置的定时器。
操作浏览器窗口尺寸和位置：
- 使用window.resizeTo()和window.resizeBy()方法可以改变浏览器窗口的大小。
- 使用window.moveTo()和window.moveBy()方法可以改变浏览器窗口的位置。
操作浏览器的Cookies：
- 使用document.cookie属性可以读取和设置浏览器的Cookies。
- 通过设置document.cookie属性，可以创建、修改、删除浏览器的Cookies。
获取浏览器信息：
- 使用navigator.userAgent属性可以获取浏览器的用户代理字符串，从而判断用户使用的浏览器类型和版本。
- 使用navigator.language属性可以获取浏览器的语言设置。
操作浏览器窗口的位置：
- 使用window.scrollTo()和window.scrollBy()方法可以在浏览器窗口中滚动到指定位置。

这些是常见的BOM操作，开发者可以利用这些操作与浏览器窗口进行交互，并实现各种功能和效果。

DOM的常见操作

1. DOM节点的获取

DOM节点获取的api以及其使用

getElementById // 按照 id 查询
getElementsByTagName // 按照标签名查询
getElementsByClassName // 按照类名查询
querySelectorAll // 按照 css 选择器查询

// 按照 id 查询
var imooc = document.getElementById('imooc') // 查询到 id 为 imooc 的元素
// 按照标签名查询
var pList = document.getElementsByTagName('p')  // 查询到标签为 p 的集合
console.log(divList.length)
console.log(divList[0])
// 按照类名查询
var moocList = document.getElementsByClassName('mooc') // 查询到类名为 mooc 的集合
// 按照 css 选择器查询
var pList = document.querySelectorAll('.mooc') // 查询到类名为 mooc 的集合

2. DOM节点的创建

创建一个新节点，并把它添加到指定节点的后面。已知的html结构如下：

<html>
  <head>
    <title>DEMO</title>
  </head>
  <body>
    <div id="container"> 
      <h1 id="title">我是标题</h1>
    </div>   
  </body>
</html>

要求添加一个有内容的 span 节点到 id 为 title 的节点后面，做法就是：

// 首先获取父节点
var container = document.getElementById('container')
// 创建新节点
var targetSpan = document.createElement('span')
// 设置 span 节点的内容
targetSpan.innerHTML = 'hello world'
// 把新创建的元素塞进父节点里去
container.appendChild(targetSpan)

appendChild()方法用于向指定节点的子节点列表的末尾添加新的子节点。其参数应该是要添加的子节点对象。通常情况下，可以传递一个已存在的DOM节点作为参数，以将其添加为目标节点的子节点。

3. DOM节点的删除

删除指定的DOM节点，html结构如下：

<html>
  <head>
    <title>DEMO</title>
  </head>
  <body>
    <div id="container"> 
      <h1 id="title">我是标题</h1>
    </div>   
  </body>
</html>

需要删除 id 为 title 的元素，做法是：

// 获取目标元素的父元素
var container = document.getElementById('container')
// 获取目标元素
var targetNode = document.getElementById('title')
// 删除目标元素
container.removeChild(targetNode)

或者通过子节点数组来完成删除：

// 获取目标元素的父元素
var container = document.getElementById('container')
// 获取目标元素
var targetNode = container.childNodes[0]
// 删除目标元素
container.removeChild(targetNode)

4. 修改DOM元素

修改 DOM 元素这个动作可以分很多维度，比如说移动 DOM 元素的位置，修改 DOM 元素的属性等。

将指定的两个 DOM 元素交换位置， 已知的 HTML 结构如下：

<html>
  <head>
    <title>DEMO</title>
  </head>
  <body>
    <div id="container"> 
      <h1 id="title">我是标题</h1>
      <p id="content">我是内容</p>
    </div>   
  </body>
</html>

现在需要调换 title 和 content 的位置，可以考虑 insertBefore 或者 appendChild：

// 获取父元素
var container = document.getElementById('container')   
 
// 获取两个需要被交换的元素
var title = document.getElementById('title')
var content = document.getElementById('content')
// 交换两个元素，把 content 置于 title 前面
container.insertBefore(content, title)

什么是BOM和DOM？它们常见的操作又有哪些呢？