DOM API-JS通过文档对象树操作Doc和CSS

最新推荐文章于 2025-05-24 15:24:14 发布

ceilf

最新推荐文章于 2025-05-24 15:24:14 发布

阅读量806

点赞数 25

分类专栏：前端文章标签： javascript css 开发语言

本文链接：https://blog.csdn.net/2301_78856868/article/details/148143832

版权

前端专栏收录该内容

12 篇文章

订阅专栏

还记得我在之前的前端文章里面老是提及的 DOM 吗，当时只是简单介绍了它的组成以及作用，今天我们就来详细聊聊

Web浏览器

先来聊聊web浏览器，web浏览器是非常复杂的软件，有许多活动部件，许多部件并不能由开发者通过 JS 控制或操纵，这主要是出于安全考虑。不然网站可以访问密码等敏感信息

尽管有限制，但是 Web API 仍然给开发者提供了很多权限，比如

窗口：窗口（window）是载入网页的浏览器标签；在 JS 中，它由 Window 对象表示，通过这个对象上的方法，我们可以对窗口进行操作，比如：返回窗口的大小（Window.innerWidth、Window.innerHeight），操作加载到窗口的文档，在客户端存储该文档的特定数据（例如使用本地数据库或其他存储机制），为当前窗口附加一个事件处理器（ addEventListener( ) ）等

导航器：(navigator) 在网络上出现时，代表浏览器的状态和身份（即用户代理）。在 JS 中，它由 Navigator 对象表示，我们可以通过这个对象检索用户的首选语言、用户网络摄像头的媒体流等信息

文档：(document，在浏览器中用 DOM 表示）是加载到窗口的实际页面，在 JS 中，它由 Document 对象表示。我们可以使用这个对象来返回和操作构成文档的 HTML 和 CSS 的信息，例如，在 DOM 中获得一个元素的引用，改变其文本内容（比如之前的 output ），对其应用新样式，创建新的元素并将其作为子元素加到当前元素，甚至完全删除它

本文主要讲的是 DOM API 的操作，也会聊聊其他部分

基础

目前在浏览器标签加载的文档是由一个文档对象模型也就是DOM表示的，它是浏览器创建的“树状结构”表示，使 HTML 结构能被编程语言轻松访问，浏览器本身在渲染页面时使用它将样式和其他信息应用于正确的元素，开发者可以在页面渲染后通过 JS 操作 DOM

DOM 的树状结构主要看 HTML 的嵌套，同层的就是兄弟节点，在里层的就是后代节点（子节点是直连的后代节点）

比如

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Simple DOM example</title>
  </head>
  <body>
    <section>
      <img
        src="dinosaur.png"
        alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." />
      <p>
        Here we will add a link to the
        <a href="https://www.mozilla.org/">Mozilla homepage</a>
      </p>
    </section>
  </body>
</html>

它的DOM树如下（Live DOM Viewer这个网站可以将HTML转为DOM）

树上的节点中，有的代表标签元素，有的代表文本（根节点一般是 HTML）

下面给个例子

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple DOM example</title>
  </head>
  <body>
      <section>
        <img src="pow.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
        <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
      </section>
    <script src="ex1.js"></script>
  </body>
</html>


const link=document.querySelector('a');

link.textContent='pow';

我们通过DOM的方法 document.querySelector( ) 选择除了第一个 <a> 元素，并更改了这个链接的文本内容（它们定义在 <a> 元素的 HTMLAnchorElement 接口上，继承于更一般的父接口 HTMLElement 以及 Node）

还有其他方法：

Document.getElementById( )

Document.getElementsByTagName( )

但是还是推荐用 querySelector 这个CSS选择器，因为它支持 CSS 语法

创建新节点

document.creatElement( ); 创建新段落

Node.appendChild( ); 在后面追加新段落，其中 Node 代表DOM中的节点名

document.createTextNode( ); 在内部链接的段落添加文本节点

移除和删除节点

Node,removeChild( ) 删除节点的父节点.remove(删除节点名)

Element.remove( ) 删除仅基于自身的节点（图论）

旧浏览器不支持这种删除自身的方式，得用: 删除节点.parentNode.removeChild(删除节点)

制作副本

Node.cloneNode( )

操作样式CSS

首先，可以用 Document.stylesheets 来获得一个附加在文档上的所有样式表的列表，它返回一个包含 CSSStyleSheet 对象的类数组，接着就可以根据需要添加/删除样式（但这种方法过时了）

（CSSStyleSheet 是用于表示 CSS样式表的接口，属于 CSS对象模型（CSSOM）的一部分，通过 StyleSheet 接口继承，内含属性和方法： cssRules、insertRule(rule,index)在指定位置插入CSS规则、delete(index)、ownerRule 若样式通过@import引入，指向对应规则。比如 document.styleSheets[0].cssRules 可以得到第一个样式表的规则列表）

直接内联样式添加到元素上，通过 HTMLElement.style 属性实现

比如 para.style.color="white";

para.style.backgroundColor="black";