博客
关于我
【面向JS--DOM节点】
阅读量:478 次
发布时间:2019-03-06

本文共 4763 字,大约阅读时间需要 15 分钟。

Understanding and Working with the DOM

The Document Object Model (DOM) is a fundamental technology for interacting with web content. It provides a structured way to manipulate and traverse elements, texts, and other parts of a web document. The DOM is built on top of ECMAScript (the core JavaScript syntax) and consists of DOM (核心DOM) and BOM (浏览器对象模型Browser Object Model).

DOM Overview

The original goal of the DOM was to standardize the manipulation of XML and HTML documents. The current version focuses on HTML, making it easier for developers to modify and enhance web content directly from JavaScript. While the HTML DOM offers a simpler API for common tasks, it doesn't cover all functionalities. For tasks that the HTML DOM can't handle, you might need to fall back to the Core DOM. For most web development scenarios, using the HTML DOM is recommended for its simplicity and efficiency.


DOM Structure: Nodes and Their Relationships

The DOM represents every element, text, attribute, and comment in a web document as a Node. Nodes are interconnected in a hierarchical structure, forming a tree. The root of this tree is the document object, which contains all the nodes of the webpage.

Types of Nodes

  • Element Nodes: Represent HTML elements (e.g., <div>, <p>).
  • Text Nodes: Represent text content within HTML elements.
  • Attribute Nodes: Represent attributes of HTML elements (e.g., id, class).
  • Comment Nodes: Represent HTML comments (e.g., <!-- comment -->).
  • Common Node Properties

    All nodes have the following three common attributes:

    Property Element Node Attribute Node Text Node Document
    nodeName Element's tag name (e.g., "div") Attribute name (e.g., "id") Text content Document
    nodeType 1 2 3 9
    nodeValue null Attribute value Text content null

    Node Relationships: Parent, Child, and Sibling

    Nodes in the DOM have relationships defined by parent-child relationships and brother-sibling relationships.

    Parent and Child Relationships

    • parentNode: Returns the parent node of the current node.
    • childNodes: Returns an array-like object containing all direct child nodes of the current node.
    • firstChild: Returns the first direct child node of the current node.
    • lastChild: Returns the last direct child node of the current node.

    Brother Relationships

    • previousSibling: Returns the previous sibling node of the current node.
    • nextSibling: Returns the next sibling node of the current node.

    Caveats

    • Dynamic Collections: The childNodes, previousSibling, and nextSibling properties return dynamic collections, which do not hold the list of nodes but instead provide live results. This means that iterating over these collections requires a guard.^ierce

    Element vs. Text Nodes

    When using methods like firstChild or lastChild, you need to be careful. For example, in the HTML snippet &lt;p&gt; &lt;span&gt;&lt;/span&gt;&lt;/p&gt;, calling firstChild on the <p> element returns the text node containing the space between <p> and <span>, not the <span> element itself. This distinction is crucial for correctly accessing and manipulating the DOM.


    Traversing the DOM with JavaScript

    An effective way to traverse the DOM is to use a combination of firstChild, lastChild, and other node relationships. Here's an example to traverse all direct child elements of an element node:

    function getElementChildren(element) {    const children = element.childNodes;    const length = children.length;    for (let i = 0; i < length; i++) {        // To avoid issues with dynamic collections, check if the index still exists        // If this is not feasible, store the list of nodes and compare lengths        const node = children[i];        if (node.nodeType === 1) {            // Process first child            console.log('Child element:', node.nodeName);        }    }}

    This approach prevents unnecessary DOM re-parsing by precomputing the length of childNodes and comparing it when traversing.


    Element-Specific Relationships

    The DOM also includes Element Trees, which are used when you need to work with elements only and avoid issues with text nodes or attribute nodes. Elementary trees focus on element relationships such as:

    • Parent Element: parentElementNode
    • Child Elements: children
    • First Element: firstElementChild
    • Last Element: lastElementChild
    • Previous Element Sibling: previousElementSibling
    • Next Element Sibling: nextElementSibling

    Conclusion

    Mastering the DOM is essential for web development. By understanding node hierarchies, node types, and their relationships, you can efficiently manipulate and reshape web content. Always remember to fall back to the Core DOM when the HTML DOM API isn't sufficient, and consider using an element tree when working exclusively with elements. With practice, traversing and modifying the DOM will become intuitive and efficient.

    转载地址:http://pmxdz.baihongyu.com/

    你可能感兴趣的文章
    MySql中mvcc学习记录
    查看>>
    mysql中null和空字符串的区别与问题!
    查看>>
    MySQL中ON DUPLICATE KEY UPDATE的介绍与使用、批量更新、存在即更新不存在则插入
    查看>>
    MYSQL中TINYINT的取值范围
    查看>>
    MySQL中UPDATE语句的神奇技巧,让你操作数据库如虎添翼!
    查看>>
    Mysql中varchar类型数字排序不对踩坑记录
    查看>>
    MySQL中一条SQL语句到底是如何执行的呢?
    查看>>
    MySQL中你必须知道的10件事,1.5万字!
    查看>>
    MySQL中使用IN()查询到底走不走索引?
    查看>>
    Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
    查看>>
    MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
    查看>>
    mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
    查看>>
    mysql中出现Unit mysql.service could not be found 的解决方法
    查看>>
    mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
    查看>>
    Mysql中各类锁的机制图文详细解析(全)
    查看>>
    MySQL中地理位置数据扩展geometry的使用心得
    查看>>
    Mysql中存储引擎简介、修改、查询、选择
    查看>>
    Mysql中存储过程、存储函数、自定义函数、变量、流程控制语句、光标/游标、定义条件和处理程序的使用示例
    查看>>
    mysql中实现rownum,对结果进行排序
    查看>>
    mysql中对于数据库的基本操作
    查看>>