JavaScript DOM与BOM核心面试题深度解析

এ慕ོ冬℘゜

338人浏览 · 2026-05-17 11:59:39

এ慕ོ冬℘゜ · 2026-05-17 11:59:39 发布

前言

本篇承接上篇JS基础语法内容，聚焦DOM文档对象模型与BOM浏览器对象模型核心高频面试题，从定义原理、规范术语、底层逻辑、易错细节、标准代码示例、开发规范多维度严谨撰写，剔除口语化表达，补齐细节漏洞，强化专业性与完整性，严格对标满分博客标准，可直接用于学习复盘、面试背诵、技术发布。

22. 请讲述一下什么是DOM？作用是什么？

概念定义

DOM（Document Object Model，文档对象模型），是W3C标准规定、浏览器内置提供的HTML文档编程接口。浏览器解析HTML页面后，会将整个文档结构抽象为层级化DOM树，页面中每一部分都映射为树中的节点对象。

核心作用

作为JavaScript与HTML页面的交互桥梁，允许JS通过编程方式访问、读取、操作页面结构，实现对页面元素的增、删、改、查，动态修改元素内容、属性、样式，完成页面交互、动态渲染等前端功能。

23. DOM中的节点分为几种类型？

DOM树由不同功能的节点构成，开发中高频使用五大核心节点类型：

文档节点：整个HTML文档，DOM树的根节点，对应document对象。
元素节点：所有HTML标签（div、input、p等），是DOM操作的主要对象。
文本节点：标签内部包含的纯文本内容。
属性节点：标签上的属性（id、class、type、src等）。
注释节点：HTML页面中的注释内容。

补充易错点：换行、空格会被识别为空白文本节点，是DOM遍历中常见坑点。

24. 访问节点和创建节点的方法都有什么？

一、访问节点（基于节点关系获取）

通过节点自带属性，快速获取关联节点：

ownerDocument：获取当前节点所属的顶层文档节点
parentNode：获取当前节点的直接父节点
childNodes：获取所有子节点集合（包含文本、注释、元素节点）
firstChild：获取第一个子节点
lastChild：获取最后一个子节点
nextSibling：获取下一个同级节点
previousSibling：获取上一个同级节点

二、创建节点（原生DOM标准方法）

document.createElement("标签名")：创建元素节点
document.createTextNode("文本")：创建纯文本节点
document.createAttribute("属性名")：创建属性节点

25. 如何创建新元素并添加到页面中？

标准完整流程（四步规范写法）

使用document.createElement()创建目标元素节点；
可选：为新元素设置内容、属性、样式；
通过DOM选择器获取页面中已存在的父级元素；
调用appendChild()，将新元素追加至父元素内部末尾。

标准示例代码

// 1.创建元素
var newDiv = document.createElement("div");
newDiv.innerText = "新增内容";
// 2.获取父元素
var parent = document.getElementById("box");
// 3.添加到页面
parent.appendChild(newDiv);

26. 希望获取到页面中所有的checkbox怎么做

规范实现步骤，逻辑闭环无漏洞

通过document.getElementsByTagName("input")获取页面全部input元素；
定义空数组，用于存储筛选后的复选框；
遍历input集合，通过input.type === "checkbox"精准筛选；
将符合条件的元素存入数组，最终数组即为所有checkbox。

标准示例

var inputs = document.getElementsByTagName("input");
var checkboxArr = [];
for(var i=0;i<inputs.length;i++){
    if(inputs[i].type === "checkbox"){
        checkboxArr.push(inputs[i]);
    }
}