JS中的文档对象模型（一）

sun十三
213 阅读3分钟

这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战

文档对象模型（DOM,Document Object Model）是HTML和XML文档的编程接口，它表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。并且它在JavaScript中提供了DOM API，前几天的笔试就遇到了让我使用这些API的场景，所以学习一下是很有必要的。话不多说，让我们进入正题。

节点层级

每个文档的根节点是document节点，根节点的唯一子节点称为文档元素，文档元素是文档最外面的元素，所有其他元素都存在于这个元素之内,而且每个文档只能有一个文档元素。HTML页面中文档元素始终是元素，而XML文档中，任何元素都可能成为文档元素。 以下面的HTML为例：

   <html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
        <p>hello world</p>
    </body>
</html>

可以表示为以下的层级结构 未命名文件(1).png

节点类型

DOM中12种节点类型都继承一种基本类型，就是Node类型。因此它们都具有相同的基本属性和方法。 Node类型上定义了12个数值常量（1-12）代表12种节点类型，通过节点的nodeType属性就可以确定它是哪种节点类型。 eg：

if(someNode.nodeType==1){就说明该节点的节点类型是元素}
  1. 节点属性
  • nodeName、nodeValue：保存节点相关信息，值取决于节点类型。
  • childNodes：顾名思义，就是一个子节点类数组，包含一个NodeList的实例。可以通过中括号或者item()方法访问。
  • parentNode：指向其DOM树中的父元素。
  • previousSibling：指向其DOM树中的前一个同胞节点。
  • nextSibling：指向其DOM树中的后一个同胞节点。
  • firstChild、lastChild：针对于父节点来说的第一个和最后一个节点。
  • ownerDocument：指向代表整个文档的文档节点（拿掘金的创作者中心页面试了试）

image.png

  1. 节点方法

  • hasChildNodes()：判断节点有无子节点

  • cloneNode()：复制节点，接收一个布尔值参数，true代表深复制，false为浅复制。

  • normalize()：处理文档子树中的文本节点，有删除空文本节点和将相邻的两个同胞文本节点合并成一个。 接下来几个方法是在取得父节点的前提下，操纵节点，比较常用。

  • 父节点.appendChild(要插入的节点)：在childNodes列表末尾添加节点，返回值是新添加的节点。 注：如果是把已存在的节点传给appendChild，这个节点会从之前位置转移到新位置，即DOM中一个节点只能在文档中出现一次。如下：

<body>
    <div id='parent'>
        我是父节点
        <p id='child'>我是子节点</p>
    </div>
    <div id='test'> 
        测试
    </div>
    <script>
        let child=document.getElementById('child');
        let test=document.getElementById('test');
        test.appendChild(child);
    </script>
</body>

页面显示如下：

image.png

  • insertBefore(要插入的节点，参照节点)：实现在参照节点前插入节点并返回该节点。
  • replaceChild（要插入的节点，要替换掉的节点）：替换节点，返回被替换掉的节点。
  • removeChild(要移除的节点)：返回移除掉的节点。

今天就讲到这里，主要介绍了DOM里的节点层级以及节点类型所继承的Node类型里的基本属性和方法，明天我们再来看看比较常用到的节点类型————Document和Element。

avatar
文章
阅读
粉丝