面试知识点总结 - js DOM

最新推荐文章于 2025-02-18 08:52:02 发布
最新推荐文章于 2025-02-18 08:52:02 发布
阅读量201 收藏
点赞数
分类专栏： js原理 面试知识点 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42291794/article/details/108172421
版权
本文详细总结了JavaScript DOM操作中的关键概念，包括节点类型、节点属性和方法、查找元素、动态样式、焦点管理和插入标记等，是JS开发者面试的重要复习资料。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 节点

1) 概念：
  1. 文档是由多层节点构成的树形结构，节点分为几种不同类型
  2. 文档节点Document是每个文档的根节点，只有一个子元素即<html>元素（元素节点），document对象为HTMLDocument的实例
  3. DOM中所有节点都继承Node类型
2) DOM中的对象类型：
  1. Object->EventTarget->Node->Document->HTMLDocument->document
  2. Object->EventTarget->Node->Element->HTMLElement
3) 节点的属性：
  1. nodeType、nodeName、nodeValue
  2. parentNode、childNodes（当前节点的所有子节点，保存着NodeList对象，是类数组对象，实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在NodeList对象中）
  3. nextSibling、previousSibling、firstChild、lastChild
4) 节点的方法：
  1. appendChild()、insertBefore()、replaceChild()、removeChild()都是操作childNodes属性的
  2. appendChild(新增的节点)：向当前节点的所有子节点childNodes列表中的末尾添加一个节点
  3. insertBefore(添加的节点，添加的位置)：向childNodes列表中的指定位置之前添加指定节点
  4. replaceChild(添加的节点，指定节点)：替换childNodes列表中的指定节点为添加的节点
  5. removeChild(指定节点)：删除childNodes列表中的指定节点
  6. cloneNode(指定节点，true/false是否深复制)：复制指定节点
  7. importNode(指定节点，true/false是否深复制)：跨文档复制指定节点
  8. normalize()：处理文档树中的文本节点，若果找到了空文本及诶单，则删除它；如果找到相邻的文本节点，则将他们合并为一个文本节点
5) 节点类型（nodeType）：
  1. Node.ELEMENT_NODE（1）：Element（元素节点）
  2. Node.ATTRIBUTE_NODE（2）;Attr（特性节点）
  3. Node.TEXT_NODE（3）:Text（文本节点）
  4. Node.CDATA_SECTION_NODE（4）
  5. Node.ENTITY_REFERENCE_NODE（5）
  6. Node.ENTITY_NODE（6）
  7. Node.PROCESSING_INSTRUCTION_NODE（7）
  8. Node.COMMENT_NODE（8）：Comment（注释节点）
  9. Node.DOCUMENT_NODE（9）：Document（文档节点）
  10. Node.DOCUMENT_TYPE_NODE（10）：DocumentType（文档类型节点）
  11. Node.COCUMENT_FRAGMENT_NODE（11）：DocumentFragment（文档标记节点）
  12. Node.NOTATION_NODE（12）
6) 文档类型document的属性：
  1. document.documentElement：<html>
  2. document.body：<body>
  3. document.doctype：<!DOCTYPE>
  4. document.URL：文档的完成的URL
  5. document.domain：文档的域名
  6. document.referrer：文档的来源页面的URL
  7. document.title：文档的标题
  8. document.charset：文档中实际使用的字符集（如UTF-8）
  9. document.defaultCharset：文档中默认的字符集
7) 查找元素（前3个方法均返回HTMLCollection对象）
  1. document.getElementById()
  2. document.getElementsByTagName()
  3. document.getElementsByName()
  4. document.impletementation.hasFeature(‘指定名称’,‘指定版本’)：检查浏览器是否支持指定名称和版本的功能。同ele.isSupported(‘指定名称’,‘指定版本’)：当前节点是否支持指定名称和版本的功能
  5. document.write(输出的文本字符串)：将文本写到浏览器页面（会替换原网页内容）
  6. document.writeln(输出的文本字符串)：将文本写到浏览器页面（会替换原网页内容），会在末尾添加换行（\n）
  7. document.open()：打开网页输出流
  8. document.close()：关闭网页输出流
  9. 在页面加载期间写入不需要open、close，在页面加载完，调用onload方法写入时需要
  10. **document.querySelector(css选择符)：**返回与该模式匹配的第一个元素，没有返回null
  11. **document.querySelectorAll(css选择符)：**返回所有匹配的元素，为NodeList的实例，不是动态的，可以使用方括号或item(index)获取里面的每个元素
  12. 元素.matchesSelector(css选择符)：如果调用元素与该选择符匹配，返回true，否则返回false
  13. document.getElementsByClassName(包含一个或多个类名的字符串)：返回带有指定类的所有元素的NodeList
8) 元素的属性：
  1. document.getElementById(‘div1’)获取到的为元素节点，又叫标签
  2. 元素的属性有：
  1. id、className（class属性，每次改变的时整个class属性）、dir（语言的方向）等
  2. classList：（为集合类型，DOMTokenList的实例，可以使用方括号和item(index)获取其中的每个元素，可以使用方法
    add(指定字符串)：增加
    remove(指定字符串)：删除
    contains(指定字符串)：是否存在指定值
    toggle(指定字符串)：存在指定值就删除，不存在就添加
  1. 元素的属性的操作方法：
  1. getAttribute(特性名)：获取元素的特性，不区分大小写，可以去到data-xxx的自定义属性及标签的自带属性，打印的元素直接属性中只有标签自带的属性，自定义属性和自带属性会都保存在元素的attributes[data-xxx].nodeValue属性中，也可以在ele.dataset.xxx中找到自定义属性，attributes属性中包含NamedNodeMap对象，也是动态的
  2. setAttribute(特性名,特性值)：设置元素的特性，会替换原有的值
  3. removeAttribute(特性名)：删除指定特性
  1. 创建元素节点：
  1. createElement(要创建的元素的标签名如’div’)：创建元素节点
  2. createTextNode(要插入节点中的文本如’aaa’)：创建文本节点
    先取到文本节点或注释节点，再取该节点的内容（data/nodeValue），和元素节点一样，先取到节点，再取节点内容
9) NodeList（childNodes属性）、HTMLCollection（document.getElement…获取的元素）、NamedNodeMap（attributes属性）

以上类数组中的节点可以通过方括号[]和item(index)来访问，都是动态的（即如果新添加节点会自动更新，不用每次操作的先获取）

10) 动态样式：

加载时不存在，加载完成后（即调用window.onload）动态添加进去的；可以通过创建<link>标或者<script>、<style>，添加href属性，并把标签head.appendChild进去

11) 焦点管理：
  1. document.activeElement：当前获得了焦点的元素
  2. document.hasFocus()：判断文档是否获得了焦点
  3. ele.focus()：获取焦点
  4. 获取焦点方式：foucus()、用户输入（通常是tab键）、页面加载
12) 插入标记
  1. ele.innerHTML：调用元素的所有子节点（不包含自己）
  2. ele.outerHTML：调用元素的所有子节点（包含自己）
  3. ele.insertAdjacentHTML(指定位置，指定HTML文本)：在指定位置插入指定HTML文本
    指定位置为：
    beforebegin（作为前一个同辈元素插入）
    afterbegin（作为第一个子元素插入）
    beforeend（作为最后一个子元素插入）.
    afterend（作为最后一个同辈元素）
  4. ele.innerText：将调用元素的所有节点的文本拼接成的字符串（不包含自己）
  5. ele.outerText：将调用元素的所有节点的文本拼接成的字符串（包含自己）
  6. ele.children：返回元素的所有子节点（不包含空格），为HTMLCollection的实例；和childNodes一样
  7. ele.contains(指定节点)：调用节点是否包含指定节点
  8. ele.compareDocumentPosition(指定节点)：调用节点是否包含指定节点
  9. ele.contentDocument：元素所在框架的文档对象（document）
13) 滚动
  1. ele.scrollIntoView()：通过滚动浏览器窗口或者某个容器元素，调用元素就可以出现在视口中。
  2. 给某个元素设置焦点也可以让刘拉力器滚动并显示出获得焦点的元素
14) 命名空间
  1. 命名空间使用特性xmlns来指定
  2. XHTML的命名空间是：http://www.w3.org/1999/xhtml
  3. <html xmlns=‘http://www.w3.org/1999/xhtml’>
  4. 混合使用两种语言时，命名空间用处就很大了
16) 样式
  1. 定义样式的方式：
    内联样式（使用style特性指定）、<link>、<style>
  2. 访问元素的样式：
  1. 内联样式：ele.style.xxx
    ele.style.cssText：所有样式，设置该属性会重写整个内联样式
  2. 所有样式：window.getComputedStyle(ele,’:after’是否包含伪元素)
  3. 操作样式表：document.styleSheets[0].cssRules[0].style.xxx
  1. 样式表
  1. 样式表中有规则，规则中有样式，样式表和规则都会有多个
  2. 样式表包含<link>、<style>两种样式
  3. 获取所有样式表：document.styleSheets，包含<link>、<style>两种样式，可能有多个
  4. Object->StyleSheet->CSSStyleSheet->document.styleSheets[0]
  5. Object->CSSRule->CSSStyleRule->document.styleSheets[0].cssRules[0]
  6. Object->StyleSheetList->document.styleSheets
  7. Object->CSSRuleList->document.styleSheets[0].cssRules
  8. document.styleSheets[0].cssRules[0].style.xxx
DOM面试题练习
huyao的博客
07-17 3112
题目一：要求点击任何一个元素，返回它在事件冒泡时所经过的元素 阿里实习生网上测试题目，当初看着学姐做的 如果元素有id，那么打印id 如果有className，那么打印className 否则打印小写标签名 例如：点击li时，返回：html body #page .content.main .refer ul li &lt;div id="page"&gt; &lt;div ...
原生js部分面试题
weixin_70032683的博客
08-16 392
原生js部分面试题
前端面试知识点--DOM事件
阿虾搞搞的博客
02-17 234
基本概念： DOM事件的级别 DOM0 element.οnclick=function(){} DOM2 element.addEventListener(‘click’,function(){},false) DOM3 element.addEventListener(‘keyup’,function(){},false) DOM2级 与 DOM0级相比 1、可以绑定多个监听函数，而DOM0级...
JavaScript——DOM，2024年最新前端开发者跳槽面试
m0_60732644的博客
04-10 337
节点概述：网页中所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。HTML DOM数这的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。一般地，节点至少拥有nodeType（节点类型）、nodeName(节点名称)和nodeValue（节点值）这三个基本属性。1】元素节点 nodeType为1；2】属性节点 nodeType为2；3】文本节点 nodeType为3（文本节点包含文字、空格、换行等）；
JS面试题--DOM操作相关
一只胖胖胖miao
08-29 1797
（1）在DOM中操作中怎么创建、添加、删除、移除、替换、插入和查找节点 ①通过以下代码创建节点 createDocumentFragment()//创建一个DOM片段 createElement();//创建一个具体的元素 createTextNode();//创建一个文本节点 ②添加、移除、替换、插入节点 appendChild(); removeChild(); replaceCh...
JavaScript 前端面试 2（DOM、BOM）
最新发布
weixin_67480430的博客
02-18 732
Bom的核心对象是window，它表示浏览器的一个实例，在浏览器中window对象有双重角色，即是浏览器窗口的一个接口，又是全局对象因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。要删除一个节点，首先要获取该节点本身和它的父节点，然后调用父节点的removeChild把自己删掉,删除后的节点虽然不在文档树中了，都是它还存在于内存中，可以随时再次添加到别的位置。，例如：页面的后退、刷新、前进、浏览器窗口变化，滚动条的滚动，以及获取一些客户信息比如：浏览器品牌版本，屏幕分辨率。
面试知识点总结--JSP与Servlet.pdf
01-25
理解并掌握这些知识点对于Java Web开发者来说至关重要，不仅能在面试中展示专业技能，还能在实际项目中提高开发效率和应用性能。在解释技术原理的同时，能结合具体实践案例，会让面试官对你的能力有更深入的认识。
前端面试突破核心知识点备考-Vue
04-09
### Vue.js 核心知识点详解 #### Vue.js 简介 Vue.js 是一款轻量级、高效且灵活的前端框架，专为构建用户界面而设计。它支持单页面应用 (SPA) 和复杂的前端项目。Vue.js 的核心优势在于其易学性、灵活性以及高效的...
JavaScript面试开发常用的知识点总结
10-21
JavaScript是Web开发中不可或缺的一部分，尤其在面试环节，掌握JavaScript的核心知识点至关重要。本文将深入探讨JavaScript面试中常见的语法和类型、数据结构和类型等方面的知识。 首先，我们关注语法和类型。在...
JavaScript核心知识点梳理-前端开发者必读的全面指南
02-06
内容概要：本文档详尽整理了JavaScript的各类核心知识点，涵盖了JavaScript的基本语法...对于那些希望深入了解并精通JavaScript语言特性的人来说，《JavaScript 面试知识点总结.pdf》无疑是一份非常有价值的参考资料。
2023vue面试题总结-17页
05-24
本篇文章将深入解析2023年Vue面试中的关键知识点。 1. **MVVM 与 MVC的区别**： MVVM的核心特点是实现了View和Model的自动同步，当Model的属性改变时，视图层会自动更新。相比之下，MVC（Model-View-Controller）...
前端面试题总结--1 JS篇
敲代码不爱找bug的妹子
11-08 4611
妹子就要找工作了，所以时候要研究一下面试题，总结一下，查缺补漏。所以要开始搜刮各种的面试题做练习啦~~1.JS中DOM节点操作，添加，删除，插入，查询，创建，复制节点 //1.创建节点 document.createElement();//创建一个新元素 document.createTextNode();//创建一个文本节点 //2.查
javascript判断元素是否已经focus
热门推荐
PT - Blog
04-21 3万+
javascript判断元素是否已经focus 获取焦点事件
DOM深入学习 --- 聚焦：focus / blur ，foucs / blur 委托的实现，tabindex中任何元素都可聚焦（六）
秋天，黄叶坠地，凉风有信。
03-11 2920
文章目录聚焦：focus/blurfocus/blur 事件focus/blur 方法允许在任何元素上聚焦：tabindexfocus/blur 委托总结 聚焦：focus/blur 当用户点击某个元素或使用键盘上的 Tab 键选中时，该元素将会获得聚焦（focus）。还有一个 HTML 特性（attribute）autofocus 可以让焦点在网页加载时默认落在一个元素上，此外还有其它途径可以获得焦点。 聚焦到一个元素通常意味着：“准备在此处接受数据”，所以，这正是我们可以运行代码以初始化所需功能的时刻。
判断当前元素是否是获取焦点状态
zlzbt
06-05 6395
下一个节点自动获取焦点遇到的坑 简介activeElement属性 activeElement 属性返回文档中当前获得焦点的元素。 小编在写react 的过程中遇到了一点坑，由于自己写了一个时间控件，选择完年份之后自动跳到月份的选择框上是的月份选择框自动获取焦点 const nextFocusDomNode = ReactDOM.findDOMNode(this.refs[nextF...
类型“EventTarget”上不存在属性“clientHeight”。
KaiSarH
07-11 3399
类型“EventTarget”上不存在属性“clientHeight”。
DOM事件 中的 focus 和blur
alonia的博客
05-10 2465
今天做一个表单验证时 ，遇到一个问题，利用form.addEventListener 绑定事件时，发现focus 不起作用 通过查阅资料 终于知道了问题出在哪里？ （资料出处https://developer.mozilla.org/en-US/docs/Web/Events/   和   https://segmentfault.com/a/1190000003942014） 1.不是所有事
判断当前获取焦点的元素
vcxiaohan的博客
02-19 4215
test ;$(function() { $(document).on('keyup', function() { $('body').append(''+ document.activeElement.tagName.toLowerCase());//统
js面试知识点
醉梦者的博客
09-20 1130
9-17： js dom节点操作： //速记： getElementById(“div1”) //找 createElement(“p”) //建 appendChild(para) //加 removeChild(child) //删 replaceChild(newnode,oldnode) //换 cloneNode(true) //克隆 .innerHTML= //改内容 ....
JavaScript面试开发必备知识点详解
本文档主要为JavaScript面试者提供了一份详细的开发常用知识点总结，涵盖了JavaScript语言的基础核心内容，以便帮助面试者更好地准备面试。以下是关键知识点的详细解析： 1. **语法与类型**: - **变量声明与定义**...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值