JavaScript 前端面试 2（DOM、BOM）

三、DOM常见的操作有哪些

创建、删除、查询、更新节点（用类似数据库的操作来讲就是对节点的增删改查），节点可以是元素（element）、文本（text）、注释（comment）等等。

1：DOM

文档对象模型，是HTML 和 XML文档的编程接口

它提供了对文档的结构化的表述并且定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

任何HTML 和 XML文档都可以用DOM表示一个由节点构成的层级结构

节点有很多类型，每种类型对应着文档中不同的信息或者标记，也都有自己不同的特性、数据和方法，而且与其他类型有某种关系。

DOM像原子一样，有很多类型的DOM节点包含其他类型节点

举个例子

div 、 p就是元素节点，content就是文本节点，title是属性节点

2：创建节点

create Element

创建新元素，接受一个参数，即创建元素的标签名

创建一个文本节点

创建一个文档碎片

创建属性节点

3：获取节点

querySelector 选中单个DOM元素

传入任何有效的css选择器，即可选择当DOM元素（首个）：

没有指定的元素返回null

querySelectorAll 返回所有与之匹配的节点列表，如果没有匹配的返回一个空节点列表

注：该方法返回NodeList的静态实例，是一个静态的快照，并非实时查询

下面还有一些获取节点的方法：

1. document.getElementById('id属性值'); 
   - 作用：返回拥有指定 id 的对象的引用。

2. document.getElementsByClassName('class属性值'); 
   - 作用：返回拥有指定 class 的对象集合。

3. document.getElementsByTagName('标签名'); 
   - 作用：返回拥有指定标签名的对象集合。

4. document.getElementsByName('name属性值'); 
   - 作用：返回拥有指定名称的对象集合。

5. document/element.querySelector('CSS选择器'); 
   - 作用：仅返回第一个匹配的元素。

6. document/element.querySelectorAll('CSS选择器'); 
   - 作用：返回所有匹配的元素。

7. document.documentElement; 
   - 作用：获取页面中的 HTML 标签。

8. document.body; 
   - 作用：获取页面中的 BODY 标签。

9. document.all['']; 
   - 作用：获取页面中的所有元素节点的对象集合型。

说明：

document.getElementById 是最常用的方法之一，用于通过唯一标识符（id）获取单个元素。
getElementsByClassName 和 getElementsByTagName 返回的是一个类数组对象（HTMLCollection），需要通过索引访问具体元素。
querySelector 和 querySelectorAll 是现代浏览器中推荐使用的方法，支持 CSS 选择器语法，更加灵活。
document.documentElement 和 document.body 用于获取页面的根元素和主体部分。
document.all 是一个较老的方法，返回页面中所有元素的集合，但不推荐使用，因为它是非标准的。

除此之外DOM还有很多属性，它们之间的关系如图：

4：更新节点

innerHTML

不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树

innerText、textContent自动对字符串进行HTML编码，保证无法设置任何HTML标签

两者区别于在读取属性的时候，innerText不返回隐藏元素的文本，而textContent返回所有文本

style

DOM节点的style属性对应所有的CSS，可以直接获取或者设置，遇到-需要转化为驼峰命名

5.添加节点

innerHTML

如果DOM节点是空的可以直接使用innerHTML ='<span>child</span>'就可以修改DOM节点的内容，相当于添加了新的DOM节点，如果不为空则不可以因为会直接替换原有节点

appendChild

把子节点添加到父节点的最后一个子节点

insterBefore

把字节的插入到指定位置

prarentElement.insertBefore(newElement,referenceElement)插入到referenceElement之前

setSttribute

在指定元素中添加一个属性节点，如果元素中已有该属性改变其属性值
const div = document.getElementById('id')

div.setArrribute('class','white');//第一个参数是属性名，第二个参数是属性值

6.删除节点

要删除一个节点，首先要获取该节点本身和它的父节点，然后调用父节点的removeChild把自己删掉,删除后的节点虽然不在文档树中了，都是它还存在于内存中，可以随时再次添加到别的位置。

四、说说对BOM的理解，常见的BOM对象你了解哪些？

1.BOM是什么

BOM（Browser Object Meodel）浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象其作用就是和浏览器做一些交互效果，例如：页面的后退、刷新、前进、浏览器窗口变化，滚动条的滚动，以及获取一些客户信息比如：浏览器品牌版本，屏幕分辨率

浏览器的全部内容群不可以看成DOM，整个浏览器可以看出BOM。区别如下：

DOM	BOM
文档对象模型	浏览器对象模型
DOM就是把文档当作一个对象来看待	把浏览器当作一个对象来看待
DOM的顶级对象是document	BOM的顶级对象是window
DOM主要是操作页面的元素	BOM浏览器窗口交互的一些对象
DOM是W3C标准规范	BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

BOM常见对象:

window

location

navigator

screen

history

2.window

Bom的核心对象是window，它表示浏览器的一个实例，在浏览器中window对象有双重角色，即是浏览器窗口的一个接口，又是全局对象因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法

moveBy(x, y)
- 补充说明：此方法会将当前窗口从当前位置水平移动 x 个像素，垂直移动 y 个像素。
- 注意事项：
  - 如果 x 或 y 为负数，窗口会向左或向上移动。
  - 某些浏览器（如现代浏览器）可能限制或禁用此方法，尤其是当用户没有与页面交互时（例如，未点击或按键）。
- 示例：
  
  JavaScript复制
```
window.moveBy(100, 50); // 窗口向右移动 100 像素，向下移动 50 像素
```
moveTo(x, y)
- 补充说明：此方法会将窗口左上角移动到屏幕左上角的绝对位置 (x, y)。
- 注意事项：
  - x 和 y 是相对于屏幕左上角的绝对坐标。
  - 同样可能受到浏览器限制。
- 示例：
  
  JavaScript复制
```
window.moveTo(200, 100); // 将窗口左上角移动到屏幕坐标 (200, 100)
```
resizeBy(w, h)
- 补充说明：此方法会将窗口的宽度和高度相对调整，增加或减少指定的像素值。
- 注意事项：
  - 如果 w 或 h 为负数，窗口会缩小。
  - 用户可能需要手动允许窗口调整大小（某些浏览器会限制）。
- 示例：
  
  JavaScript复制
```
window.resizeBy(50, -30); // 宽度增加 50 像素，高度减少 30 像素
```
resizeTo(w, h)
- 补充说明：此方法会将窗口的宽度和高度调整为指定的像素值。
- 注意事项：
  - w 和 h 是窗口的新宽度和高度。
  - 可能受到浏览器的安全限制。
- 示例：
  
  JavaScript复制
```
window.resizeTo(800, 600); // 将窗口调整为宽度 800 像素，高度 600 像素
```
scrollTo(x, y)
- 补充说明：此方法会将窗口内容滚动到指定的位置 (x, y)。
- 注意事项：
  - x 和 y 是相对于窗口内容的滚动位置。
  - 如果页面没有滚动条，此方法不会生效。
- 示例：
  
  JavaScript复制
```
window.scrollTo(100, 200); // 横向滚动到 100 像素，纵向滚动到 200 像素
```
scrollBy(x, y)
- 补充说明：此方法会将窗口内容相对当前滚动位置移动 x 和 y 像素。
- 注意事项：
  - 如果 x 或 y 为负数，内容会向左或向上滚动。
  - 与 scrollTo 不同，scrollBy 是相对滚动。
- 示例：
  
  JavaScript复制
```
window.scrollBy(50, -30); // 横向向右滚动 50 像素，纵向向上滚动 30 像素
```

`window.open()` 方法补充说明

window.open(url, windowName)
- 补充说明：
  - url：要打开的页面的 URL。如果为空字符串（""），会打开一个空白窗口。
  - windowName：新窗口的名称或目标属性（如 _blank、_self 等）。
- 注意事项：
  - 如果 windowName 是一个已存在的窗口名称，新页面会加载到该窗口中。
  - 浏览器可能会拦截弹出窗口（弹窗阻止程序），除非用户主动触发（如点击事件）。
- 示例：
  
  JavaScript复制
```
// 打开一个新窗口，加载指定 URL
window.open("https://example.com", "newWindow");

// 打开一个空白窗口
window.open("", "blankWindow");

// 在特定窗口或框架中打开
window.open("https://example.com", "targetWindow");
```
window.open() 的参数（可选）
- 除了 url 和 windowName，还可以通过第三个参数指定窗口的特性（如大小、位置等）。
- 示例：
  
  JavaScript复制
```
window.open(
  "https://example.com",
  "newWindow",
  "width=800,height=600,resizable=yes,scrollbars=yes"
);
```

总结

moveBy 和 moveTo：用于移动窗口位置，但可能受到浏览器限制。
resizeBy 和 resizeTo：用于调整窗口大小，同样可能受到限制。
scrollTo 和 scrollBy：用于控制页面滚动位置。
window.open：用于打开新窗口或在指定窗口中加载页面，需注意弹窗阻止问题。
window.close()仅通过window.open()打开的窗口新创建的window对象有一个opener属性，该属性指向打开它的元素窗口对象

3.location

实例：

url:
http://foo:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents

属性名	例子	说明
hash	`#contents`	URL 中 `#` 后面的字符，没有则返回空串
host	`www.wrox.com:80`	服务器名称和端口号
hostname	`www.wrox.com`	域名，不带端口号
href	`http://www.wrox.com:80/WileyCDA/?q=javascript#contents`	完整的 URL
pathname	`/WileyCDA/`	服务器下面的文件路径
port	`80`	URL 的端口号，没有则为空
protocol	`http:`	使用的协议
search	`?q=javascript`	URL 的查询字符串，通常为 `?` 后面的内容

除了hash之外只要修改一个location属性就会导致页面重新加载URL

location.reload()此方法可以重新刷新当前页面，此方法会根据最有效的方式刷新页面，如果页面自上一次请求以来没有改变过，页面就会从浏览器缓存中重新加载

4.navigator

主要用来获取浏览器的属性，区分浏览器的类型。属性较多，而且兼容性比较复杂：

5：screen

保存的纯粹是客户端能力信息，也就是浏览器窗口外面的客户端显示器的信息，比如：像素宽度和像素高度

6.history

history对象主要用来操作浏览器URL的历史记录，可以通过参数向前向后或者指定跳转

常用属性：
history.go()

接受一个整数或者字符串参数：像最近的一个记录中包含的指定字符串的页面跳转

history.go(‘......com’)

history.go(3)//向前跳转3个记录

history.go(-1)//向后跳转1个记录
history.forward(）//向前跳转一个页面

history.back(）//向后跳转一个页面

history.length//获取历史记录数