javascript-dom-文档对象模型

最新推荐文章于 2022-07-15 12:04:52 发布
最新推荐文章于 2022-07-15 12:04:52 发布
阅读量382 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ifubing/article/details/99337482
版权

dom

文档对象模型

html文档树模型

在这里插入图片描述
在这里插入图片描述
通过对dom的处理可以实现

在这里插入图片描述

查找标签对象-直接查找

当前代码

在这里插入图片描述

效果

在这里插入图片描述

  • 通过ID，类名，标签来找
    在这里插入图片描述

通过div来找，找到两个
在这里插入图片描述

查找标签对象-间接查找

parentElement，查找父标签

找到了一组标签，要得到他们的父标签，报错

在这里插入图片描述
寻找父级标签，应该先找到一个标签对象

然后再找

在这里插入图片描述

课堂练习

在这里插入图片描述

同理，其它的一些关系的属性名称可记录一下

children，所有的子标签。 [标签1，标签2]

firstElementChild， 所有子标签中第一个。 标签

lastElementChild， 所有子标签中最后一个

nextElementSibling， 下一个兄弟标签

previousElementSibling， 上一个兄弟标签

创建标签

练习源码

在这里插入图片描述
演示步骤

在这里插入图片描述
给a标签添加文本内容

标签对象.text属性= 赋与的值
在这里插入图片描述

我是div 我是新来的超链接

在这里插入图片描述

给a标签添加href属性

a标签对象.属性 = 值

在这里插入图片描述

我是div 我是新来的超链接
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190812212611924.png)

标签对象的增删改操作

  • appendChild，添加子标签

父标签对象.appendChild(节点标签对象）

父标签添加子标签

  • removeChild，移出子标签

父标签.removeChild（子标签）

在这里插入图片描述
父标签对象.removeChild（子标签对象）

  • insertBefore，插入子标签

父标签.insertBefore(要插入的标签x， 子标签）

在哪个父标签的哪个子标签前面插入标签x

例子

在这里插入图片描述
父标签对象.insertBefore（插入的标签，参考标签-明确在哪个标签前面插)

  • replaceChild（新标签，要被替代的标签）
父标签.replaceChild（新来的标签，被替换的标签）

在这里插入图片描述

在这里插入图片描述

效果

替换前

<div id="d2">
	<p></p>

</div>


内存中
<a href="http://www.sogou.com">点我去搜狗</a>

替换后

<div id="d2">
<a href="http://www.sogou.com">点我去搜狗</a>

</div>


内存中

自定义属性

  • setAttribute（属性名，属性值）
  • getAttribute（属性名）
  • removeAttribute（属性名）

演练

前端的代码

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

标签对象.setAttribute（str属性名，属性值）

在这里插入图片描述

getAttribute（str属性名）

在这里插入图片描述

removeAttribute（str属性名）

在这里插入图片描述

获取标签的内容

  • innerText

获取标签内的纯文本内容
在这里插入图片描述

  • innerHTML

获取标签内的html内容
在这里插入图片描述

  • innerText与innerHTML的区别

在这里插入图片描述

innerText，拿到的是标签对象里面包裹的纯的，文本内容

innerHTML，拿到的是标签对象中包裹的带有html标签的内容

  • 用法

可以修改标签包裹的内容

在这里插入图片描述

鲸鱼编程pyhui
关注
DOM 文档对象模型
langmanboy的博客
04-12 795
DOM 文档对象模型 1. Web API 的概念 api：应用程序接口。是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能 Web API：是 Web 的应用程序编程接口，浏览器 API 可以扩展 Web 浏览器的功能，服务器 API 可以扩展 Web 服务器的功能 js 组成：ECMAScript、DOM、BOM ECMAScript：定义了 JavaScript 的语法规范 BOM：浏览器对象模型，提供用于处理文档之外的所有内容的其他对象 DOM：文档对象模型，提供用于处理文档的对象 2
JavaScript高级程序设计 第十四章---DOM 文档对象模型
weixin_40794404的博客
09-03 1160
第十四章 本章内容 理解文档对象模型（DOM）的构成 节点类型 浏览器兼容性 MutationObserver 接口 文档对象模型（DOM，Document Object Model）是HTML 和XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早期的动态HTML（DHTML，Dynamic HTML），DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。 14.1 节点层级 任何HTML 或XML 文档都可以用DOM表示
DOM简介
qq_51088023的博客
07-15 1188
​​​​​DOM全称Document Object Model（文档对象模型）
DOM（文档对象模型）
m0_65025332的博客
06-22 603
目录简单介绍HTML DOM 节点节点树节点间的层级关系HTML DOM 对象、属性、方法JavaScript与HTML DOMJavaScript 代码访问页面上的元素改变 HTML 元素/属性值添加/删除 HTML 元素查找 HTML 元素改变元素的属性值 改变CSS样式JavaScript HTML DOM 事件addEventListener()实例在 HTML DOM 节点树中导航实例节点列表使用节点属性在节点之间导航 遍历 DOM 树 添加/删除 HTML 元素 获取节点的"值"节点的 node
Dom 文档对象模型
nknmn
04-20 342
< DOM > 1.文档：一个页面就是一个文档，DOM中使用document表示 2.元素：页面中的标签都是元素，DOM中使用element表示 3.节点：网页中所有的内容都是节点（标签、属性、文本、注释等），DOM中使用node表示 DOM把以上内容都看做是对象 1.获取页面元素： （1）根据ID获取： document.getElementById() // 1.因为文档页面是从上往下加载的，先得有标签， 所...
javascript-manipulation-of-the-dom-document-object-Model:Dom文档对象模型课程的Java语言操作
03-30
JavaScript DOM（Document Object Model）文档对象模型是Web开发中的核心概念，它允许开发者通过JavaScript来操纵HTML或XML文档的结构、内容和样式。本课程主要关注JavaScript如何与DOM交互，特别是使用Java语言进行...
第三章：javascript-DOM对象模型-补充课件.ppt
最新发布
03-31
JavaScript DOM对象模型是Web开发中不可或缺的一部分，它允许开发者通过编程方式操纵网页的结构、内容和样式。在JavaScript中，DOM被用作一种接口，使我们能够读取、修改、添加或删除HTML、XML文档的各个部分。DOM将...
Javascript-DOM编程艺术研究.docx
11-17
DOM，即文档对象模型（Document Object Model），是网页内容的抽象表示，它允许开发者通过编程方式访问和修改网页的各个部分。 在JavaScript中，DOM主要分为以下几个关键概念： 1. **节点（Nodes）**： - 在DOM中...
DOM文档对象模型
junboyboy的专栏
03-08 1785
1、Node对象         Element、Document对象继承他 属性名/方法名 作用 childNodes 返回的是一个NodeList对象，也可以看成是一个数组，它表示调用该属性的节点对象下的所有子节点，可以用childNodes[]来引用数组中单独的元素 parentNode 返回节点的父节点
JavaScript核心笔记
06-16
JS的核心笔记，写给想打好JS基础的你！
Dom文档对象模型
m0_69674158的博客
05-18 323
一、DOM操作 DOM：文档对象模型，是基于文档编程的一套API接口 1.DOM操作分类 使用JavaScript操作DOM时通常分为三类：DOM Core（核心）、HTML-DOM和CSS-DOM 2.节点和节点关系 DOM是以树状结构的HTML文档，根据DOM概念，HTML文档中的每个标签或元素都是一个节点。 整个文档是一个文档节点 每个HTML标签是一个元素节点 包含在HTML元素中的文本是文本节点 每个HTML属性是一个属性节点 注释属于注释节点 使用父（parent）、子（child）和同胞
DOM-文档对象模型
zheng的博客
11-04 392
DOM的概念 文档对象模型（Document Object Model，简称DOM）。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。 DOM又称文档树模型 文档：一个网页可以称为文档 节点：网页中的所有内容都是节点（标签, 属性, 文本， 注释等） 元素：网页中的标签 属性：标签的属性 DOM经常进行的操作 获取元素 对元素进行操作（设置其属性或调用其方法） 动态创建元素 事件（什么时候做相应的操作） 获取页面元素 根据id获取元素 <scri
文档对象模型---DOM（二）
wurourouzhang的博客
12-30 782
1. Document类型：用来表示文档。在javascript中，① document对象用来表示整个HTML页面。document对象为HTMLDocument（继承自Document类型）的一个实例。② document对象是window对象的一个属性，可以将其作为全局对象来访问。 Document类型可以表示HTML页面或者其他基于XML的页面。最常用的还是document对象 Doc...
JavaScript 文档对象模型 DOM
真香号
05-24 196
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>History和Location使用</title> </head> <body> <input type="button" valu...
DOM（文档对象模型）学习笔记（一）
clh386的博客
11-12 573
DOM可以将任何Html或XML文档描绘成一个由多层节点构成的结构，节点分为多种类型，每个节点都有自己的特点，数据和方法。 **Node类型：** 每个节点都有一个nodeType属性，表明节点的类型，nodeName属性表示元素的标签名，nodeValue属性取决于节点类型。 每个节点都有一个childNodes属性，其中保存着一个NodeList数组对象，有length
DOM（文档对象模型） 概念
Me丿以卿之名
06-06 1626
DOM: Document Object Model 文档对象模型                主要用来将标记型文档(html,xml)封装成对象,并将标记型文档中的所有内容(标签、文本、属性等)都封装成对象                既然都封装成了对象，那么就可以通过这些对象很方便地操作这些文档内容，达到操作页面内容--页面显示。 DOM树中的几个名词：
JavaScript DOM教程：理解文档对象模型
在DOM中，HTML文档被表示为一个树状结构，根节点是`document`对象，代表整个文档。从根节点开始，每个子节点可以是元素（Element）、属性（Attr）、文本（Text）、注释（Comment）或其他类型的节点。例如，HTML元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲸鱼编程pyhui

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值