1. 速盾网络首页
  2. 网站运维

nodes和elements（element和elementary）

小道研究 • • 网站运维
DOM(文档对象模型)可以将任何 HTML和XML 文档描绘成一个由多层 Node节点构成的结构。
DOM 有 DOM树的概念，在 JavaScript 中的所有节点类型都继承自 Node基类，因此所有节点类型都共享相同的基本属性和方法。
Node 包括：
  1. Element元素节点
  2. Document文档根节点
  3. characterData字符数据
  4. DocumentFragment文档片段
  5. DocumentType文档类型
其中 Element元素节点包括 HTMLElement 和 SVGElement构成，我们处理的 Element元素并不全是 HTML元素。
characterData 字符数据包括 Text 文本节点、Comment 注释节点、ProcessingInstruction处理信息节点构成。
每个节点都有一个 nodeType 属性，用于表明节点的类型。

图片来源 Mozilla

每一个 Html元素都是节点，但不是每个节点都是 Html元素，我们来验证下。
其中 Document 是文档根节点：
    console.log(document);console.log(document.childNodes);console.log(document.children);
    document 会输出当前文档的根节点：#document；
    document.childNodes 会输出两个节点，一个是 <!DOCTYPE html> ，因为这个也属于节点类型，另一个是 <html></html> 节点；
    document.children 只会输出 <html></html>节点。
    我们最熟悉的 Element节点，是元素型节点，有开始标签和结束标签。
    <div id=\\\"elementId\\\">这是一个 element节点</div>
    <script>  let elementId = document.getElementById(\\\'elementId\\\');  console.log(elementId.childNodes)  console.log(elementId.children)  console.log(elementId.nodeType)</script>
    elementId.childNodes 会输出一个文本节点；
    elementId.children 输出为空；
    elementId.nodeType 输出 1，请参考Node类型常量表。
    它们有一些导航类的操作，下面列出方法和功能。
    节点的导航（寻找节点）
    方法 功能
    parentNode 找到父节点
    childNodes 找到子节点
    firstChild 找到第一个子节点
    lastChild 找到最后一个节点
    nextSibling 找到下一个节点
    previousSibling 找到上一个节点
    Element 元素的导航操作（寻找元素）
    方法 功能
    parentElement 找到父元素
    children 找到子元素
    firstElementChild 找到第一个子元素
    lastElementChild 找到最后一个子元素
    nextElementSibling 找到下一个元素
    previousElementSibling 找到上一个元素
    节点修改操作：
    方法 功能
    appendChild 最后添加节点
    insertBefore 插入第一个节点
    removeChild 移除一个节点，想移除节点，需要先找到父节点才能移除
    replaceChild 替换节点，相当于 remove一个节点，并 insert一个节点
    高级操作：
    方法 功能
    compareDocumentPosition 用于比较两个节点的关系函数
    contains 检查一个节点是否包含另一个节点
    isEquaInode 检查两个节点是否完全相同
    isSameNode 检查两个节点是否在同一个节点，可以在 JavaScript 中 === 来处理
    cloneNode 复制一个节点，如果传入参数为 true ，则会连子元素做深拷贝
    参考来源：
    [1]https://www.it-swarm.dev/zh/javascript/node%E5%AF%B9%E8%B1%A1%E5%92%8Celement%E5%AF%B9%E8%B1%A1%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F/943630280/
    [2]https://baike.baidu.com/item/nodeType%20%E5%B1%9E%E6%80%A7/278300
    图片授权基于 www.pixabay.com 相关协议

    原创文章，作者：小道研究，如若转载，请注明出处：https://www.sudun.com/ask/34486.html

    赞 (0)
    小道研究's avatar小道研究
    0 0
    上一篇 2024年4月7日 下午6:01
    下一篇 2024年4月7日 下午6:03

    相关推荐

    发表回复

    您的邮箱地址不会被公开。 必填项已用 * 标注