问题11.什么是DOM？
答：
DOM代表文档对象模型，它是HTML和XML文档的接口（API）。
当浏览器第一次读取（解析）HTML文档时，它会创建一个大对象，基于HTML文档的真正大对象就是DOM。
它是从HTML文档建模的树状结构。
DOM用于交互和修改DOM结构或特定的元素或节点。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document Object Model</title> </head> <body> <div> <p> <span></span> </p> <label></label> <input> // other elements </div> </body> </html>
上面代码的DOM的图形表示类似于
JavaScript中的文档对象代表DOM。
它为我们提供了许多可用于选择元素以更新元素内容的方法。
JavaScript可以更改页面中的所有HTML元素
JavaScript可以更改页面中的所有HTML属性
JavaScript可以更改页面中的所有CSS样式
JavaScript可以删除现有的HTML元素和属性
JavaScript可以添加新的HTML元素和属性
JavaScript可以对页面中所有现有的HTML事件做出反应
JavaScript可以在页面中创建新的HTML事件
问题12.请说明attributes和property之间的区别？
答：
JS DOM对象的property类似于特定元素的实例变量。
property可以是各种数据类型。
通过与Vanilla JS中的对象进行交互或使用jQuery的prop()方法，可以访问property。
attributes位于HTML中，而不是DOM中。
attributes类似于property，但不如其功能强大。
如果可以使用property，建议使用property而不是attribute。与property不同，attribute 是字符串数据类型
问题13.什么是Cookie？您将如何使用JavaScript创建，读取和删除Cookie？
答：
Cookie只是从网站发送的数据，通常是很小的数据，并通过用于访问网站的Web浏览器存储在用户的计算机上。
这是网站记住状态信息并记录用户浏览活动的可靠方法。
创建一个Cookie：
使用JS创建Cookie的最基本方法是为文档分配一个字符串值。
document.cookie = “key1 = value1; key2 = value2; … ; keyN= valueN; expires = date”;
读取Cookie：
使用JS读取cookie就像创建一样简单。
Cookie对象是cookie，只要您想访问cookie，就使用此字符串。
该document.cookie字符串保留一对name = value列表，其中一个分号将每对分开。
该name代表一个cookie的名称，以及value代表各自的cookie的字符串值。
要将字符串分为键和值，可以使用split()方法。
删除Cookie：
只需将过期日期设置为已经过去的时间。
某些Web浏览器不允许您删除cookie，除非您未指定cookie的路径。
因此，定义cookie路径对于确保正确的cookie是deleted.assign文档的字符串值很重要。
问题14.什么是事件传播？
答：
当事件发生在DOM元素上时，该事件并不完全发生在那个元素上。
在“冒泡阶段”中，事件冒泡或向上传播至父级，祖父级，祖父的父级，直到到达窗口为止；而在“捕获阶段”中，事件从窗口开始向下直到触发元素事件或event.target。
此过程称为事件传播。
它分为三个阶段。
1.Capturing Phase –事件从窗口开始，然后下降到每个元素，直到到达目标元素。
2.Target Phase –事件已达到目标元素。
3.Bubbling Phase –事件从目标元素冒泡，然后上升到每个元素，直到到达窗口。
问题15.什么是事件冒泡？
答：
当事件发生在DOM元素上时，该事件并不完全发生在那个元素上。
在Bubbling Phase中，事件冒泡，或者到达父级，祖父级，祖父的父级，直到到达窗口为止。
如果我们有像这样的示例标记
<div class="grandparent"> <div class="parent"> <div class="child">1</div> </div> </div>
和javascript代码。
function addEvent(el, event, callback, isCapture = false) { if (!el || !event || !callback || typeof callback !== 'function') return; if (typeof el === 'string') { el = document.querySelector(el); }; el.addEventListener(event, callback, isCapture); } addEvent(document, 'DOMContentLoaded', () => { const child = document.querySelector('.child'); const parent = document.querySelector('.parent'); const grandparent = document.querySelector('.grandparent'); addEvent(child, 'click', function (e) { console.log('child'); }); addEvent(parent, 'click', function (e) { console.log('parent'); }); addEvent(grandparent, 'click', function (e) { console.log('grandparent'); }); addEvent(document, 'click', function (e) { console.log('document'); }); addEvent('html', 'click', function (e) { console.log('html'); }); addEvent(window, 'click', function (e) { console.log('window'); }); });
该addEventListener()方法具有第三个可选参数useCapture，其默认值为false，事件将在Bubbling phase中发生。
如果useCapture是true，则事件将在Capturing Phase中发生。
如果单击子元素，它将child, parent, grandparent, html, document 和window分别记录在控制台上。
这整个事件是事件冒泡。
问题16.什么是事件捕获？
答：
当事件发生在DOM元素上时，该事件并不完全发生在那个元素上。
在捕获阶段，事件从窗口开始一直到触发事件的元素。
如果我们有这样的示例标记
<div class="grandparent"> <div class="parent"> <div class="child">1</div> </div> </div>
和JavaScript代码是
function addEvent(el, event, callback, isCapture = false) { if (!el || !event || !callback || typeof callback !== 'function') return; if (typeof el === 'string') { el = document.querySelector(el); }; el.addEventListener(event, callback, isCapture); } addEvent(document, 'DOMContentLoaded', () => { const child = document.querySelector('.child'); const parent = document.querySelector('.parent'); const grandparent = document.querySelector('.grandparent'); addEvent(child, 'click', function (e) { console.log('child'); }, true); addEvent(parent, 'click', function (e) { console.log('parent'); }, true); addEvent(grandparent, 'click', function (e) { console.log('grandparent'); }, true); addEvent(document, 'click', function (e) { console.log('document'); }, true); addEvent('html', 'click', function (e) { console.log('html'); }, true) addEvent(window, 'click', function (e) { console.log('window'); }, true) });
该addEventListener()方法具有第三个可选参数useCapture，其默认值为false，事件将在Bubbling phase中发生。
如果useCapture是true，则事件将在Capturing Phase中发生。
如果单击子元素，它将window, document, html, grandparent, parent和child分别记录在控制台上。
这整个事件是事件捕获
问题17.解释event.preventDefault()和event.stopPropagation()方法之间的区别？
答：
event.preventDefault()方法可防止元素的默认行为。
如果在表单元素中使用，它将阻止其提交。
如果在锚元素中使用，它将阻止其导航。
如果在上下文菜单中使用，它将阻止其显示或显示。
当event.stopPropagation()方法停止事件的传播时。
它阻止了事件在冒泡或捕获阶段发生。
问题18.如何知道是否在元素中使用了event.preventDefault()方法？
答：
我们可以在事件对象中使用event.defaultPrevented属性。
它返回一个布尔值，指示是否在特定元素中调用event.preventDefault()。
顶部↑
问题19.什么是Closure(闭包)？
答：
每当从某个内部范围内访问在当前范围之外定义的变量时，都会创建Closures。
它使我们能够从内部函数访问外部函数的范围。
换句话说，闭包是与函数相关的本地声明的变量，并在相关函数返回时保留在内存中。
闭包包含创建闭包时在范围内的所有局部变量。
在JavaScript中，每次创建函数时都会创建闭包。要使用闭包，只需在另一个函数中定义一个函数并将其公开即可。
让我们看一个例子
没有Closure
function greet(message) { console.log(message); } function greeter(name, number) { return name + " says Hey!! He has " + age + " subscribers"; } var message = greeter("Tech Talks", 1026); greet(message);
有Closure
function greeter(name, age) { var message = name + " says Hey!! He has " + age + " subscribers"; return function greet() { console.log(message); }; } // Generate the closure var TechTalksGreeter = greeter("Tech Talks", 1026); // Use the closure TechTalksGreeter();
问题20.您可以用几种方法在JavaScript中创建数组？
答：
使用JavaScript创建数组的方法有以下三种：
通过创建数组的实例：
var someArray = new Array();
通过数组构造函数：
var someArray = new Array(‘value1’, ‘value2’,…, ‘valueN’)
通过使用数组文字：
var someArray = [value1, value2,…., valueN];
![[JS]面试官：你的简历上写着熟悉jsonp，那你说说它的底层逻辑是怎样的？](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635462/20241109/ab6c62833d4349a3b910e97f27656c88.png?x-oss-process=image/resize,h_160,m_lfit)