HTML DOM+浏览器BOM

撑续远
93 阅读10分钟

HTML DOM（文档对象模型）

HTML DOM是一种表示HTML文档的编程接口。它将HTML文档呈现为一个树状结构，使开发者可以通过编程方式访问、修改和操作HTML文档的内容、结构和样式。HTML DOM 提供了一组API（应用程序编程接口），使得JavaScript可以与HTML文档进行交互。

以下是HTML DOM的一些关键概念：

  1. 文档对象模型 (Document Object Model):

    • HTML DOM 将整个HTML文档表示为一个树状结构，树的顶部是 document 对象，代表整个文档。

  2. 节点 (Nodes):

    • HTML文档中的所有元素、属性、文本等都被表示为节点。节点可以是元素节点、属性节点、文本节点等。

  3. 元素节点 (Element Nodes):

    • HTML文档中的HTML元素（如<p>、<div>等）被表示为元素节点。

  4. 属性节点 (Attribute Nodes):

    • HTML元素的属性（如id、class等）被表示为属性节点。

  5. 文本节点 (Text Nodes):

    • HTML文档中的文本内容被表示为文本节点。

  6. 获取元素:

    • 使用诸如 getElementById、getElementsByClassName、getElementsByTagName 等方法，可以通过JavaScript获取HTML元素。
    javascriptCopy code
var elementById = document.getElementById('myElement');
var elementsByClass = document.getElementsByClassName('myClass');

  7. 操作元素内容:

    • 使用属性和方法，可以读取或修改元素的内容。
    javascriptCopy code
var myElement = document.getElementById('myElement');
var content = myElement.innerHTML; // 获取元素内容
myElement.innerHTML = 'New Content'; // 设置元素内容

  8. 修改样式:

    • 使用 style 属性，可以通过JavaScript修改元素的样式。
    javascriptCopy code
var myElement = document.getElementById('myElement');
myElement.style.color = 'red'; // 修改文本颜色

HTML DOM 提供了强大的工具，使得开发者能够通过JavaScript与HTML文档进行交互，实现动态的、响应式的Web应用程序。

HTML DOM 节点

HTML DOM 中的节点是文档结构的组成部分，代表文档中的元素、属性、文本等。节点构成了文档对象模型的树状结构。以下是HTML DOM中的一些常见节点类型：

  1. 元素节点（Element Nodes）:

    • 表示HTML文档中的标签元素，如 <p>、<div>、<span> 等。
    htmlCopy code
<div id="myDiv">This is an element node.</div>

    javascriptCopy code
var elementNode = document.getElementById('myDiv');

  2. 属性节点（Attribute Nodes）:

    • 表示HTML元素的属性，如 id、class、src 等。
    htmlCopy code
<img src="image.jpg" alt="An image">

    javascriptCopy code
var imageElement = document.getElementsByTagName('img')[0];
var attributeNode = imageElement.getAttributeNode('src');

  3. 文本节点（Text Nodes）:

    • 表示HTML文档中的文本内容。
    htmlCopy code
<p>This is a text node.</p>

    javascriptCopy code
var paragraph = document.getElementsByTagName('p')[0];
var textNode = paragraph.childNodes[0];

  4. 注释节点（Comment Nodes）:

    • 表示HTML文档中的注释。
    htmlCopy code
<!-- This is a comment node. -->

    javascriptCopy code
var commentNode = document.createComment('This is a comment node.');

  5. 文档节点（Document Node）:

    • 表示整个HTML文档。
    javascriptCopy code
var documentNode = document;

在JavaScript中，可以使用各种方法来获取、创建、修改和删除这些节点。例如，document.getElementById、document.getElementsByTagName、createElement、appendChild等方法都用于与节点相关的操作。通过操作这些节点，你可以实现对HTML文档的动态修改和交互。

浏览器对象模型BOM

浏览器对象模型（Browser Object Model，BOM）是一组表示浏览器窗口及其组件的对象。BOM 提供了与浏览器交互的方式，允许 JavaScript 代码操作浏览器窗口、导航历史、屏幕尺寸等。

BOM 的主要对象包括：

  1. window 对象:

    • window 对象是 BOM 的核心对象，代表浏览器窗口或标签。它包含了全局作用域的变量和函数，并提供了与浏览器交互的各种方法和属性。例如，window.location 用于获取或设置当前文档的URL。
    console.log(window.location.href); // 获取当前页面的URL

  2. navigator 对象:

    • navigator 对象提供了关于浏览器的信息，如浏览器的名称、版本、用户代理等。
    console.log(navigator.userAgent); // 获取用户代理字符串

  3. screen 对象:

    • screen 对象提供了有关用户屏幕的信息，如屏幕的宽度、高度等。
    console.log(screen.width); // 获取屏幕宽度

  4. history 对象:

    • history 对象允许通过 JavaScript 操作浏览器的历史记录。可以使用 history.back()、history.forward()、history.go() 等方法。
    history.back(); // 后退一页

  5. location 对象:

    • location 对象包含了有关当前 URL 的信息，可以用于获取或修改浏览器的当前URL。
    console.log(location.href); // 获取当前页面的URL

  6. document 对象:

    • document 对象不属于 BOM，而是属于 DOM（文档对象模型）。它表示当前载入的文档，提供了与文档内容进行交互的方法和属性。
    console.log(document.title); // 获取文档标题

通过使用 BOM 提供的对象和方法，开发者可以实现对浏览器窗口、导航历史、屏幕等的操作和控制，以及获取有关浏览器的信息。

1. 为什么需要DOM？

DOM（Document Object Model）是Web开发中不可或缺的一部分，它提供了一种标准化的方式来访问和操作HTML或XML文档。以下是为什么需要DOM的一些原因：

  1. 动态内容更新：DOM允许开发者使用JavaScript来动态地修改网页内容、结构和样式。通过操作DOM，可以实现动态加载内容、实时更新数据等功能，为用户提供更丰富的交互体验。
  2. 交互性增强：通过DOM，开发者可以轻松地添加事件监听器，以便在用户与网页进行交互时执行特定的函数或操作。例如，响应用户点击按钮、滑动页面或输入文本等。
  3. 分离逻辑和表现：DOM允许将网页的逻辑和表现分离，使得开发者可以更专注于实现功能和业务逻辑，而不需要过多关注页面的具体表现。这种分离使得代码更加清晰、易于维护和重用。
  4. 跨平台和跨浏览器兼容性：由于DOM是浏览器中通用的标准接口，因此使用DOM编写的JavaScript代码可以在不同的浏览器和平台上运行，具有良好的兼容性。这有助于减少因浏览器差异而导致的问题。
  5. 简化复杂操作：对于一些复杂的操作，如动态生成元素、样式处理或布局调整等，使用DOM可以简化开发过程，减少工作量和出错率。

总的来说，DOM提供了与文档进行交互的能力，使得开发者能够创建动态、交互式的Web应用。无论是在构建单页面应用、实现复杂交互还是优化性能方面，DOM都起到了至关重要的作用。

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

在DOM上同时绑定两个点击事件，一个使用捕获阶段，一个使用冒泡阶段，事件的执行顺序取决于它们在DOM结构中的注册顺序。

如果先注册的是捕获阶段的事件，后注册的是冒泡阶段的事件，那么事件的执行顺序是先捕获后冒泡。反之，如果先注册的是冒泡阶段的事件，后注册的是捕获阶段的事件，那么事件的执行顺序是先冒泡后捕获。

3. innerHTML、 nodeValue与 textContent之间的区别？

在JavaScript中，innerHTML、nodeValue和textContent都是与DOM节点相关的属性，但它们在使用和功能上有一些重要的区别。

  1. innerHTML：这是一个复合W3C标准的属性，用于获取或设置一个元素的HTML内容。当你要插入或获取一个元素的内部HTML时，可以使用这个属性。例如，如果你有一个<div>元素，你可以使用innerHTML来改变这个元素内部的HTML结构。
  2. nodeValue：这个属性是用来获取或设置一个节点的内容。对于元素节点，nodeValue通常返回null，因为元素节点通常包含文本或其他子节点。然而，如果你尝试在一个文本节点上使用nodeValue，它会返回该文本节点的内容。要注意的是，你不能使用nodeValue来改变一个元素节点的内部HTML，它主要用于处理文本节点。
  3. textContent：这个属性返回一个节点的所有文本内容，包括其子节点的文本内容。这和nodeValue相似，但有一些重要的区别。首先，textContent可以用于元素节点和文本节点，而nodeValue只能用于文本节点。其次，textContent会返回所有文本，包括在元素内部的文本和注释，而nodeValue只返回文本节点的内容。

4. property和attribute的区别？

在HTML和DOM中，"property" 和 "attribute" 是两个相关但不同的概念。

  1. Property（属性）：

    • Property 是一个 JavaScript 对象的属性，表示 DOM 元素的当前状态。这些属性可以动态地更改，并且它们通常反映了元素的当前状态。通过 JavaScript 访问元素的属性时，实际上是在访问这个元素的属性(property)。
    • 例如，通过 element.value 可以获取或设置一个表单元素的当前值，这是该元素的一个属性。

Attribute（特性）：

  • Attribute 是 HTML 元素在标记中定义的属性。它们通常是静态的，一旦页面加载，它们的值就不能通过 JavaScript 直接更改。属性提供了初始值，但在页面生命周期中可能会被 JavaScript 中的相应属性值所覆盖。
  • 例如，<input type="text" value="Hello"> 中的 type 和 value 是该元素的属性(attribute)。

5. 什么是事件流？

事件流描述的是在页面上接收和处理事件的顺序。在 HTML DOM 中，事件流分为三个阶段：

  1. 捕获阶段（Capturing Phase）：

    • 事件从根节点向目标元素传播的过程称为捕获阶段。在这个阶段，事件从最外层的元素开始传播，一直传播到目标元素。这个阶段在实际开发中较少被使用。

  2. 目标阶段（Target Phase）：

    • 事件到达目标元素时触发，即事件到达目标元素本身。在这个阶段，事件的目标元素是事件的目标，即事件将在这个元素上被处理。

  3. 冒泡阶段（Bubbling Phase）：

    • 事件从目标元素开始，沿着DOM树的冒泡路径向上传播，直到到达根节点。冒泡阶段是最常用的阶段，因为它符合自底向上的事件处理逻辑。

在实际开发中，可以利用事件流的不同阶段来实现更复杂的事件处理逻辑，同时也可以通过 addEventListener 方法的第三个参数来控制事件处理程序是在捕获阶段还是冒泡阶段执行。

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

在 JavaScript 中，你可以使用 clearTimeout 和 clearInterval 函数来清除单个定时器和所有定时器。这两个函数的使用方式如下：

清除单个定时器：

javascriptCopy code
// 设置一个定时器
var timerId = setTimeout(function() {
    console.log('单个定时器执行了');
}, 1000);

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

在上面的例子中，setTimeout 返回一个定时器标识符 timerId，然后可以使用 clearTimeout 来取消这个定时器。

清除所有定时器：

javascriptCopy code
// 设置多个定时器
var timerId1 = setTimeout(function() {
    console.log('定时器1执行了');
}, 1000);

var timerId2 = setInterval(function() {
    console.log('定时器2执行了');
}, 2000);

// 清除所有定时器
clearTimeout(timerId1);
clearInterval(timerId2);

在上面的例子中，使用 clearTimeout 清除了第一个定时器，使用 clearInterval 清除了第二个定时器。

注意，使用 clearInterval 清除定时器时，需要提供 setInterval 返回的标识符，而使用 clearTimeout 清除定时器时，需要提供 setTimeout 返回的标识符。确保清除定时器的标识符是正确的。

avatar
文章
阅读
粉丝