三、JS03 DOM 操作

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量254 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72817617/article/details/130145381
版权
文章详细介绍了JavaScript操作DOM的核心概念，包括DOMcore、HTML-DOM和CSS-DOM，以及节点的层次关系、节点信息和访问方式。此外，还讲解了如何创建、插入、删除和替换节点，以及操作节点属性和样式，包括动态改变颜色和大小等。
摘要由CSDN通过智能技术生成

三、DOM 操作

3.1 JavaScript DOM 操作

DOM (Document Object Model) 为文档对象模型，是 HTML 和 XML 文档的编程接口

DOM 提供了对整个文档的访问模型，将文档作为一个树形结构

树的每个节点表示了一个 HTML 标签或标签内的文本

3.1.1 DOM 操作分类

使用 JavaScript 操作 DOM 时分为三个方面：DOM core(DOM 核心操作)、HTML-DOM 和 CSS-DOM，开发者可通过这些操作实现动态地增加、删除、修改数据

1、DOM core（DOM 核心操作）

  • HTML core 定义了一套标准的针对任何结构化文档的对象
  • getElementById()、getElementsByTagName() 等方法都是 DOM core 的组成部分

2、HTML-DOM

  • HTML-DOM 提供了一些更简单的标记描述各种 HTML 元素的属性
  • 获取 DOM 模型中的某些对象，既可以使用 DOM core 实现，也可以使用 HTML-DOM 实现
  • 相对于 DOM Core 获取对象、属性而言，HTML-DOM 的代码通常较为简短
  • HTML-DOM的应用范围没有 DOM core 广泛

3、CSS-DOM

  • CSS-DOM 是针对 CSS 的操作
  • CSS-DOM 技术的主要作用是获取和设置 style 对象的各种属性

3.1.2 节点和节点主键的关系

节点可以理解为 HTML 文档中每个标签或者元素

  • 整个文档就是一个文档节点
  • 每个 HTML 标签就是一个元素节点
  • 包含在 HTML 元素中的文本是文本节点
  • 每个 HTML 属性就是一个属性节点
  • 注释属于注释节点

一个 HTML 文档是由各个不同的节点组成，下面示例展示了 HTML 文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM 节点</title>
</head>
<body>
  <h1>标题</h1>
  <p>DOM 应用</p>
  <ul>
    <li>列表1</li>
    <li>列表2</li>
  </ul>
</body>
</html>

以上节点的结构层次关系图
document-文档
根节点-HTML
head-标签
body-标签
meat-标签
title-标签
文本-DOM节点
h1-标签
p-标签
ul-标签
文本-标题
文本-DOM应用
li-标签1
li-标签2
文本-列表1
文本-列表2
  • 以上可以清晰的看出一个文档节点被抽象为一个 DOM 树的结果
  • 通过 DOM 树可以方便后续对 DOM 树中的节点进行操作

使用 父节点（parent）、子节点（child）、兄弟节点（sibling）等术语来描述节点的层次关系

  • 父节点拥有子节点，同级的子节点被称为同胞或兄弟节点
  • 在以上 DOM 树中，顶部节点被称为 根（root）、 节点。
  • 每个节点都有父节点，除了根节点，如、 的父节点都是 节点
  • “DOM 节点” 的父节点是
  • 一个节点可以拥有任意数量的子节点，如 节点的子节点有
  • 、

    和

    • 兄弟节点是拥有相同父元素的节点。例如，两个
    • 就是兄弟节点，它们的父节点均为
      • 节点

    3.1.3 节点信息

    1、每个节点都拥有包含节点某些信息的属性

    • nodeName（节点名称）
    • nodeValue（节点值）
    • nodeType（节点类型）

    2、nodeName 属性含有某个节点的名称

    • 元素节点的 nodeName 是标签名称
    • 属性节点的 nodeName 是属性名称
    • 文本节点的 nodeName 永远是 #text
    • 文档节点的 nodeName 永远是 #document

    3、nodeValue 属性包含文本

    • 属性节点的 nodeValue 属性包含属性值
    • nodeValue 属性对于文档节点和元素是不可用的

    4、nodeType 属性可返回节点的类型

    • 重要的节点类型
    元素类型节点类型
    元素 element1
    属性 attr2
    文本 text3
    注释 comments8
    文档 document9

    3.1.4 访问节点

    使用 DOM core 访问 HTML 文档的节点主要有两种方式

    1、使用 getElement 系列方法访问指定节点

    2、根据节点的层次关系访问

    1、使用 getElement 系列方法访问指定节点

    方法名描述
    getElementById()返回按 id 属性查找的第一个对象的引用
    getElementByName()返回按带有指定名称 name 查找的对象的集合
    一个文档中可能会有多个同名节点，因此返回的是元素数组
    getElementByTagName()返回带有指定标签名 TagName 查找的对象的集合

    2、根据层次关系访问节点

    • 根据层次关系访问节点，可以遵循文档的结构
    • 在文档的局部进行 “短距离地查找元素”
    • 节点属性
    属性名称描述
    parentNode返回节点的父节点
    childNodes返回子节点集合，childNodes[i]
    firstChild返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
    lastChild返回节点的最后一个子节点
    nextSibling下一个节点
    previousSibling上一个节点
    • 如果你的标签之间存在空格或换行，那么这些空格和换行也算作一个节点
    • 例如，输出下面的 ul 标签内有几个子节点
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断节点</title>
</head>
<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
<script type="text/javascript">
  //获取 ul 节点
  var obj=document.getElementsByTagName("ul")[0];
  //输出 ul 内有几个子节点
  alert(obj.childNodes.length);
</script>
</body>
</html>
    • 运行结果

    image-20230413200009255

    • 从上面的结果可以看出，ul 标签内只有 3 对 li 标签，但是输出结果却是 7 ，这是因为，ul 标签内的空行也被认为是一个节点，所以才会显示 7
    • javaScript 内提供一组可兼容不同浏览器的 element 属性，可以消除这种因空行、换行等出现的无法准确访问到节点的情况
    • element 属性只会访问到标签元素
    • element 属性
    属性名称描述
    firstElementChild返回节点的第一个子节点
    lastElementChild返回节点的最后一个子节点
    nextElementSibling下一个节点
    previousElementSibling上一个节点

    3.2 操作节点

    在网页开发中，如果想动态地改变网页内容，需要对网页中的节点进行操作

    主要是对节点属性、节点、节点样式进行操作

    3.2.1 操作节点的属性

    HTML DOM 操作提供了获取及改变节点属性值的标准方法

    • getAttribute( “属性名” ) ：用来获取属性的值
    • setAttribute( “属性名”,“属性值” ) ：用来设置属性的值
    • 当使用 getAttribute() 方法读取属性值时，如果属性不存在，则返回 null

    3.2.2 创建或插入节点

    • 使用 JavaScript 操作 DOM 有很多方法可以创建或增加一个新节点，主要方法如下
    • 创建节点
    名称描述
    createElement( tagName )创建一个标签名为 tagName 的新元素节点
    A.appendChild(B)把 B 节点追加到 A 节点的子节点的末尾，将 B 节点作为最后一个子元素添加到A元素
    insertBefore(A,B)把 A 节点插入到 B 节点之前
    cloneNode(deep)复制某个指定的节点
    • insertBefore(A,B) 中有两个参数
      • A 是必选项，表示插入的节点
      • B 是可选项，表示新节点被插入 B 节点的前面
    • cloneNode(deep) 中的参数为布尔值
      • 若 deep 值为 true，则复制该节点及该节点的所有子节点
      • 若 deep 值为 false，则只复制该节点和其属性

    3.2.3 删除和替换节点

    删除和替换节点的方法

    名称描述
    removeChild(node)删除元素内指定的子元素 node
    replaceChild(newNode,oldNode)用其他的节点替换指定的节点
    • 方法 replaceChild(newNode,oldNode) 有两个参数
      • newNode 是替换的新节点
      • oldNode 是要被替换的节点

    3.2.4 操作节点样式

    通过获取节点，通过改变节点的样式属性，可以实现各种动态效果

    有两种方式可以动态地改变样式属性

    1、使用样式的 style 属性

    2、使用样式的 className 属性

    1、style 属性

    • style 是一个对象，代表一个单独的样式声明
    • 可以通过应用样式的文档或元素访问 style 对象
    • 使用 style 属性改变样式的语法 如下
    HTML元素.style.样式属性="值";
    • 例如：将一个id 为 titles 的 div 字体改变为红色，字体大小改为 13px
    document.getElementById("titles").style.color="#FF0000";
document.getElementById("titles").style.fontSize="25px";
    • 上面代码中，CSS 中设置字体属性为 font-size，在 JavaScript 中则是 fontSize
    • 因为在 JavaScript中 “-” 代表减号，因此，如果 CSS 的属性有 “-”，则要省去，并且 “-” 后的字母要大写

    2、className 属性

    • className 属性可设置或返回元素的 class 样式
    • 语法如下
    HTML.元素.className="样式名称";
    • 示例
    //获取属性值：
HTMLElementObject.className
//设置属性值：
HTMLElementObject.className="classname"

    3.2.5 获取元素样式

    • JavaScript 中可以使用 style 属性获取样式的属性值，语法如下
    HTML元素.style.样式属性
    • 但是上面这种方法存在一定的缺陷，它只能获取行内样式的属性值，无法获取内部样式表或外部样式表中的属性值
    • 微软为每个元素提供了一个 currentStyle 对象，它包含所有元素的 style 对象的特性和任何违背覆盖的 CSS 规则的 style属性
    • currentStyle 对象语法如下
    HTML元素.currentStyle.样式属性
    • currentStyle 可以获取样式属性的值，但是只局限于 IE 浏览器，其他浏览器无法获取样式的属性值
    • DOM 提供了一个 getComputedStyle() 方法，此方法接收两个参数，需要获取样式的属性值
    • 语法格式如下
    document.defaultView.getComputedStyle(元素,null).属性
    • defaultView：获取文档的窗口对象
    • getComputedStyle：方法用于获取指定元素的 CSS 样式

    象语法如下**

    HTML元素.currentStyle.样式属性
    • currentStyle 可以获取样式属性的值，但是只局限于 IE 浏览器，其他浏览器无法获取样式的属性值
    • DOM 提供了一个 getComputedStyle() 方法，此方法接收两个参数，需要获取样式的属性值
    • 语法格式如下
    document.defaultView.getComputedStyle(元素,null).属性
    • defaultView：获取文档的窗口对象
    • getComputedStyle：方法用于获取指定元素的 CSS 样式
    兰巧儿
    关注
    专栏目录
    JS的DOM操作
    BowenXu11的博客
    04-02 187
    DOM操作 1.什么是DOM，就是把HTML当成一个Document对象 2.如何获取元素 2.1直接通过window.ID ,就可以获取对象。（不推荐）。 2.2通过document.getElementById(‘ID’) 来获取（推荐） JS为元素动态注册事件 1.获取元素对象 document.getElmementById（） 2.增加单击对象document.getElmementBy...
    JS——DOM操作
    aixuexide3236的博客
    11-21 506
    DOM概念 事件基础文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、Ac
    数据结构--知识点16--搜索算法(二叉树)
    ANingL的博客
    09-06 3107
    文章目录一、树的概念1、特点2、树的术语3、树的种类4、树的存储与表示5、常见的树的应用场景二、二叉树1、概念2、性质 一、树的概念 树是一种抽象数据类型(ADT)或是视作这种抽象数据类型的数据结构 1、特点 每个节点有零个或多个子节点 没有父节点的节点称为根节点 每一个非根节点有且只有一个父节点 除了根节点外，每个子节点可以分为**多个不相交(因为都只有一个父节点)**的子树 2、树的术语 节点的度：一个节点含有的子树的个数称为该节点的度 树的度：一棵树中，最大的节点的度称为树的度 叶节点或终端节点
    通过层级关系访问元素节点
    shixuerong的博客
    08-02 381
    代码】 通过层级关系访问元素节点。
    节点访问关系
    06-23
    JavaScript节点访问关系
    按层次关系访问结点
    weixin_30600197的博客
    11-16 1234
    <script type="text/javascript"> function showNode( ){ var imgObj=document.getElementById("imgFruit"); var imgParent=imgObj.parentNode; alert(imgParent.nodeName); ...
    5、层次关系访问节点和创建节点
    weixin_30551963的博客
    06-12 274
    层次关系访问节点和创建节点 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"&...
    JavaScript dom操作 趣味案例
    06-25
    本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可...
    JavaScript dom操作 dom元素查询 示例代码
    06-27
    JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
    JS实现的DOM插入节点操作示例
    11-28
    JavaScript DOM（Document ...了解这些基本的JavaScript DOM操作，可以让你更好地控制网页的动态内容和交互性。同时，结合其他DOM方法和属性，如`removeChild`、`replaceChild`等，可以实现更复杂的页面动态更新功能。
    JavaScript DOM操作 示例代码
    06-25
    包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含...
    javascript DOM 操作.doc
    01-15
    javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型（Document Object Model，DOM），以便于动态地更改网页的内容和结构。下面是javascript DOM 操作的相关知识点： IE 中...
    DOM07---通过节点的层次关系获取节点对象
    奋斗、
    05-30 2683
    <!-- 通过节点的层次关系获取节点对象 关系： 1、父节点：parentNode属性 2、子节点：childNodes集合，获得全部子节点 3、兄弟节点： 上一个兄弟节点：previousSibling 下一个兄弟节点: nextSibling --> function getNodeByLevel() { var tabNode
    第三章 JavaScript操作和DOM对象
    SHIYIYE_的博客
    08-30 1709
    1.简述DOM的分类和节点之间的关系？ 2.简述如何按层次关系访问节点？ 3.用什么方法获取节点的属性值 4.style属性和className在给便样式上有什么区别？ 如何改变浏览器地址栏中的网址？ 使用getElementBy~~()系列的方法可以获取带ID的页面元素？ 答：使用getElementByID; 使用setTimeout和setInterval方法实现时钟的特效区别...
    DOM（一）-15-(通过节点层次关系获取节点)
    wy_0928的博客
    08-20 742
    【通过节点层次关系获取节点】 、、三者关系中，称为和公共的父节点，而和都称为的子节点， 和称为兄弟节点，其中前者是后者的上一个兄弟节点，后者是前者的后一个兄弟节点 【注意】一个节点的父节点只有一个，一个节点的子节点可以有多个 所以只要拿到任一个节点，都可以通过其层次关系获取到任意节点对象。 【总结】 节点间关系：以下标记的属性都以div节点对象中的属性为
    BOM__Document对象简介-三种获取节点方式，通过节点层次关系获取节点，以及对象中的属性操作
    知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
    10-06 2494
    无标题文档 用户名： 性别：男 aaaaaaaaaaaaaaaaaaaaa 百度1 百度2 百度3 百度4 百度5 百度6 百度7 span区域 单元格1 单元格2 单元格3 单元格4 单元格1 单元格2 单元格3 单元格4 单元格1 单元格2 单元格3 单元
    按层次顺序访问结点个数
    nodeathphoenix的专栏
    07-18 946
    struct Queue { Node* map[200]; int front; int rear; Queue() {front = 0; rear = 0;} }; int BreadthSearchNumber(Node*root) { if (NULL == root) return 0; Queue queue; queue.rear++; queue.map[que
    JavaScript总结(二) Dom
    carly_ssj的博客
    08-29 193
    Dom Html Dom能够通过Js进行访问，在dom中所有的元素都被定义为对象. 方法和基本使用 增删改 //增 document.createElement(element) //添加 //删 document.removeChild(element) //删除 //改 document.repalceChild(element) //替换 //添加 document.appendChild(element) 查 //根据id 查找元素 document.getElementBy
    js中【Worker】相关知识点详细解读
    最新发布
    2301_79858914的博客
    09-11 863
    JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
    JavaScript操作HTML DOM完全指南
    DOM提供了多种接口供JavaScript或其他编程语言使用，包括一系列的属性和方法来操作这些节点。 - 属性： - `nodeName`：节点的名称。 - `nodeValue`：节点的值。 - `parentNode`：节点的父节点。 - `...
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值