HTML DOM+浏览器BOM

property和attribute的区别？

属性（attribute）和特性（property）是两个概念，它们在某些情况下可以互换使用，但在其他情况下却有区别。

属性（attribute）通常用来描述对象的某种特征或特点，并且是对象的固有部分。属性可以是对象的内部状态，也可以是对象的外部特征。例如，对于一个人的对象，属性可以是人的姓名、年龄、性别等。

特性（property）更加强调一个对象所具有的某种特定能力或行为。它是对象对外界的某种响应或表现。特性通常通过方法来实现，并且可以读取或设置。例如，对于一个人的对象，特性可以是人的说话能力，可以通过"说话"方法来实现。

总的来说，属性更加强调对象的固有特征，而特性更加强调对象的行为或能力。它们可以是对象的某种状态或行为，但在具体的使用上可能会有一定的区别。

什么是事件流？

事件流是指描述事件从页面中接收和发送到页面元素的顺序和方式的概念。在 HTML 文档结构中，事件流描述了事件究竟是如何传播的。事件流有两种：冒泡流和捕获流。

冒泡流（Bubbling）是指事件由最具体的元素接收，然后逐级向上传播到较为不具体的节点（从内向外），直到传播至 document 对象。

捕获流（Capturing）指的是事件由最不具体的元素（通常是 document 对象）首先接收，然后逐级向下传播到最具体的节点（从外向内），最终传播至目标对象。

实际上，当触发一个事件时，先触发捕获阶段，然后目标阶段，最后是冒泡阶段。通过这种方式，开发者可以在事件传播的不同阶段对事件进行处理和拦截。

在 JavaScript 中，开发者可以通过 addEventListener 函数的第三个参数来控制事件的流动阶段，如果设置为 true，则表示使用捕获流；如果设置为 false，则表示使用冒泡流。

如何让清除单个定时器和所有定时器?

要清除单个定时器，可以使用clearTimeout()函数，将定时器的标识作为参数传递给clearTimeout()函数。

示例代码如下：

const timerId = setTimeout(() => {
  // 定时器回调函数
}, 1000);

// 清除单个定时器
clearTimeout(timerId);

要清除所有定时器，可以使用clearInterval()函数清除所有的间歇定时器，使用clearTimeout()函数清除所有的延时定时器。

示例代码如下：

// 清除所有间歇定时器
let intervalId = setInterval(() => {
  // 间歇定时器回调函数
}, 1000);
clearInterval(intervalId);

// 清除所有延时定时器
let timeoutId = setTimeout(() => {
  // 延时定时器回调函数
}, 1000);
clearTimeout(timeoutId);

注意，clearTimeout()和clearInterval()函数需要传入对应定时器的标识作为参数，如果传入的参数是无效的定时器标识，函数将不会起任何作用。所以在清除定时器时，要确保传入的参数是正确的定时器标识。 DOM（文档对象模型）是指将XML或HTML文档表示为树形结构的API，它提供了一种将网页文档内各个部分进行访问，操作和控制的方式。我们需要用DOM来操作和管理网页的内容、结构、样式和行为。

为什么需要DOM？

以下是使用DOM的一些原因：

1. 动态更新网页内容：使用DOM可以动态地更新网页内容、样式和布局，使页面更加生动有趣。

2. 方便的事件处理：使用DOM可以方便地操作元素的事件，比如鼠标点击、键盘敲击、页面滚动等，从而实现更多的交互和动态效果。

3. 跨平台支持：DOM是一种W3C标准的API，支持跨平台和跨浏览器使用。

4. 网页解析：使用DOM可以方便地解析和操作XML和HTML文档，提取需要的信息，从而实现网页爬虫等应用。

5. 构建可访问网站：使用DOM可以增强网站的可访问性和可用性，使得网站更加易于阅读、使用和访问，提高用户体验。

在一个 DOM 上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次，先执行冒泡还是捕获？

在一个 DOM 上同时绑定两个点击事件时，如果其中一个用捕获，另一个用冒泡，那么点击事件会依次触发两次，先执行捕获，再执行冒泡。

具体来说，事件流分为三个阶段：捕获阶段、目标阶段和冒泡阶段。在捕获阶段，事件从文档根节点向下传播，直到到达触发事件的元素。在目标阶段，事件到达目标元素，触发该元素上绑定的事件处理函数。在冒泡阶段，事件从目标元素开始向上冒泡，直到到达文档根节点。

当在一个元素上同时绑定捕获和冒泡事件处理函数时，在事件传播过程中，先触发捕获阶段的事件处理函数，然后到达目标阶段时触发目标元素上的事件处理函数，最后触发冒泡阶段的事件处理函数。因此，点击事件会依次触发两次，先执行捕获，再执行冒泡。如果两个事件处理函数中有相同的功能，就会执行两次相同的功能。如果不希望出现这种情况，可以在其中一个事件处理函数中使用event.stopPropagation()方法，阻止事件的冒泡传递。

innerHTML、 nodeValue与 textContent之间的区别？

这三者是用于操作DOM元素内容的属性：

1. innerHTML：innerHTML属性用于获取或设置元素的HTML内容。当读取innerHTML时，会返回元素内部的HTML代码，包括标签。当设置innerHTML时，会替换元素的所有子节点和其内容。因此，使用innerHTML会涉及HTML解析和重新渲染，慎用以避免性能问题。

// 获取元素的HTML内容
const content = element.innerHTML;

// 设置元素的HTML内容
element.innerHTML = "<p>This is a new paragraph</p>";

2. nodeValue：nodeValue属性用于获取或设置节点的值。对于文本节点，nodeValue表示文本内容；对于其他类型的节点，nodeValue为null。可以通过nodeValue来读取或修改文本节点的内容。

// 获取文本节点的值
const textValue = textNode.nodeValue;

// 设置文本节点的值
textNode.nodeValue = "New text content";

3. textContent：textContent属性用于获取或设置元素的文本内容，会返回元素及其所有后代节点的文本内容，但会忽略所有HTML标记。设置textContent会删除元素的所有子节点，并插入一个文本节点来表示指定的文本内容。

// 获取元素的文本内容
const textContent = element.textContent;

// 设置元素的文本内容
element.textContent = "New text content";

因此，这三个属性的区别在于它们所针对的内容和操作方式。在选择使用时，需要根据具体的需求来决定使用哪个属性。