DOM的知识

最新推荐文章于 2024-09-27 00:45:01 发布
最新推荐文章于 2024-09-27 00:45:01 发布
阅读量52 收藏
点赞数
文章标签： java javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76815287/article/details/130412852
版权

DOM

‘D’:

document(文档):这是一个对象,一个容纳你所写的所有内容的对象.(我认为)

‘O’:

对象object: 其中与某个特定对象相关联的变量被称为这个对象的属性；只能通过某个特定对象去调用的函数被称为这个对象的方法。
对象分为三类:
1.用户定义对象（user-defined object）;
2.内建对象（native object）;
3.宿主对象（host object）;
提示:在JS初期有最基础宿主对象(浏览器提供的对象)----window对象.window 对象对应着浏览器窗口本身，这个对象的属性和方法通常统称为BOM（浏览器对象模型.

‘M’:

模型(不太明白是什么).

DOM树:

DOM将文
档表示为一棵家谱树
其中家谱树本身又是一种模型。家谱树的典型用法是表示一个人类家族的谱系，并使用parent（父）、child（子）、sibling（兄弟）等记号来表明家族成员之间的关系。
_ 标签就是树根

<!DOCTYPE html>
<html lang="en">
	<head>/*其标签就是meta标签和title标签的父元素*/
		<meta charset="utf-8" />/*其是title标签的兄弟元素*/
		<title>Shopping list</title>
	</head>
	<body>
		<h1>What to buy</h1>
		<p title="a gentle reminder">Don't forget to buy this stuff.</p>
		<ul id="purchases">
			<li>A tin of beans</li>
			<li class="sale">Cheese</li>
			<li class="sale important">Milk</li>
		</ul>
	</body>
</html>

节点:

文档是由节点构成的集合，只不过此时的节点是文档树上的树枝和树叶而已.(非常赞同)

元素节点:

/例如,

…

/

文本节点:

/例如

元素包含着文本“Don’t forget to buy this stuff.”。它是一个文本节点/

属性节点:

/属性结点用来对元素做出更具体的描述。像

标签的title属性就算属性标签,属性节点总是被包含在元素节点中./

获取元素:

getElementById(id 属性):

这个方法将返回一个与那个有着给定id 属性值的元素节点对应的对象。
提示:只有一个参数：你想获得的那个元素的id 属性的值，这个id 值必须放在单引号或双引号里。

document.getElementById("purchases")
typeof document.getElementById("purchases")/*typeof操作符告诉我哦们其操作数的类型*/

getElementsByTagName(标签的名字)

(注意)方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。

提示:既然是数组就可以采用length属性查看该文档中含有多少的该标签

let items = document.getElementsByTagName("li");
	for (var i=0; i < items.length; i++) {
	alert(typeof items[i]);/*可以输出每个类型,均为object*/
}

拓展:星号字符“* ”可以代表所有元素放在参数位置上,必须加上双引号,就可以文档里总共有多少个(元素节点)

alert(document.getElementsByTagName("*").length);

getElementsByClassName(class 属性)

它的返回值也与getElementsByTagName 类似，都是一个具有相同类名的元素的数组

document.getElementsByClassName("important sale").length;
/*表示带有important sale属性的元素个数.

##获取和设置属性:

getAttribute(查询的属性)

对象.getAttribute(attribute)

它不属于document 对象,它只能通过元素节点对象调用.
返回属性值,若没有该属性,返回null;

setAttribute(属性,值)

__把这个元素的你想设置的属性值设置为你想设置的值 __如不存在则创建该属性,在赋值.

大一的小伙子
关注
JavaScript：Dom知识点总结
果冻
07-21 1391
目录 一、DOM简介 二、HTML DOM 树形结构: 三、DOM 节点 节点类型 节点父、子和同胞 （1） 父级节点 （2）子节点childNodes （3）子节点children （4）子节点first和last （5）兄弟节点 四、DOM对象 1、查找 HTML 元素常用方法 （1）get方法 （2）querySelector 和 querySelectorAll （3）获取特殊元素（body，html） 2、事件基础 （1）事件概述 （2）事件三要素 ​（.
DOM知识图谱整理
一条鱼
09-16 644
DOM基础知识
Mozarty的博客
04-22 1318
何为DOMDOM，即Document Object Model（文档对象模型），是一种Web API，它将HTML或XML文档表示为一个树形结构，每个节点都是一个对象，从而使开发者可以使用脚本语言（例如JavaScript）动态地访问和修改文档内容、结构和样式。何为Web APIWeb API是一种由Web浏览器提供的编程接口，它允许开发者通过JavaScript等脚本语言与浏览器进行交互，从而实现动态网页和丰富的Web应用程序。
DOM知识点
weixin_42499908的博客
09-07 567
其实就是一句话，DOM是一个接口，我们可以通过DOM这个接口来对文档（即HTML或XML）进行修改。 DOM存在着不同类型的节点： 1.元素节点：DOM的原子是元素节点。事实上，文档的每一个元素都是一个对象。（后面会详细讲） 2.文本节点：元素节点构成文档的结构，则文本节点构成文本的内容。文本节点总是被包含在元素节点的内部，但并不是所有元素节点都包含文本节点。 3.属性节点：元素或多或少都具有一些属性。 (除外，还有一些其它类型的节点，如注释) DOM操作的四种基本方法 DOM操作的四种基本方法
DOM知识总结
wk843620202的专栏
10-09 1229
DOM DOM ：DOM是DocumentObject Model文档对象模型的缩写。根据W3CDOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件  D：文档 – html 文档 或 xml 文档  O：对象– document 对象的属性和方法  M：模型       DOM 是针对xml(html)的基于树的API。  DOM树:节点（nod
DOM的基础知识
GJW966288的博客
10-30 6138
DOM的基础知识和基本概念
javascript DOM知识脑图
qq_20382175的博客
03-12 334
javascript原生DOM知识总结
Buddha_ITXiong的博客
03-16 646
DOM是什么？dom是Document Object Model的缩写，也就是文档对象模型的意思，它是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。上面对dom的解释比较官方不易理解，用我自己的话来解释的话：网页是由一系列的html组成，如果把每一个页面当成一棵树的话，那页面里面的html就是数的分支。同样把dom也当成一棵树的话，那么d...
一文吃透JavaScript中的DOM知识及用法
不迁怒，不贰过。小知识，大智慧。
11-12 4208
一文带你吃透DOM的知识和用法，绝对实用。 DOM是网页的核心结构，无论是HTML、CSS还是JavaScript，都和DOM 密切相关。HTML的作用是构建DOM结构，CSS的作用是设定样式，JavaScript的作用是读取以及控制、修改DOM。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
JavaScript——DOM知识点
wjfckx的博客
10-23 417
DOM知识点 DOM知识点DOM知识点==DOM介绍==DOM树 ：数据结构DOM获取元素节点创建+添加+删除 节点 DOM介绍 DOM，全称Document Object Model文档对象模型 1.JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。 2.文档– 文档表示的就是整个的HTML网页文档 3.对象– 对象表示将网页中的每一个部分都转换为了一个对象。 4.模型– 使用模型来表示对象之间的关系，这样方便我们获取对象 DOM树 ：数据结构 HTML文件 —
DOM 知识点汇总
01-18
以下是一些关键的DOM知识点： 1. **DOM元素选择**： - `getElementById()`：根据ID选取唯一的元素。 - `getElementsByClassName()`：根据类名选取所有元素。 - `getElementsByTagName()`：根据标签名选取所有...
DOM知识结构Xmind思维导图
05-31
DOM知识结构 Xmind思维导图 帮助各位更好的学习DOM知识点。
Dom知识结构-xmind思维导图.xmind
11-19
Dom知识结构-xmind思维导图.xmind
DOM知识点汇总
01-18
javascript DOM知识点汇总，（需要使用xmind打开），xmind软件下载地址:
工厂模式的介绍及实现
户伟伟的博客
09-25 117
工厂模式（Factory Pattern）是一种创建型设计模式，提供了一种创建对象的接口，而无需显式指定对象的具体类。在这种模式中，我们通过定义一个工厂类，专门负责生产各种类型的对象，这样我们可以避免直接在代码中实例化具体类，使代码更具扩展性、灵活性和维护性。解耦：客户端代码与具体的类解耦，避免了对象创建逻辑的重复。简化对象创建：通过工厂统一管理对象的创建逻辑，使代码更清晰易懂。扩展性强：新增类时，只需在工厂中增加创建逻辑，而不必修改现有的业务代码。
Spring Boot 学习和使用
cesske的博客
09-24 1091
Spring Boot是一款开源的Java Web应用框架，旨在简化Spring应用的初始搭建以及开发过程。Spring Boot通过整合Spring技术栈中的诸多关键组件，为开发者提供了一种快速、简便的Spring应用开发方式。它遵循“约定优于配置”的原则，通过自动配置、起步依赖和内置的Servlet容器，极大地简化了传统Spring应用的配置和部署过程。Spring Boot通过其自动化配置、起步依赖、内嵌服务器等特性，极大地简化了Spring应用的开发和部署过程。
基于Hive和Hadoop的哔哩哔哩网站分析系统
最新发布
图南的博客
09-27 442
本项目是一个基于大数据技术的哔哩哔哩平台分析系统，旨在为用户提供全面的哔哩哔哩视频数据和深入的用户行为分析。系统采用 Hadoop 平台进行大规模数据存储和处理，利用 MapReduce 进行数据分析和处理，通过 Sqoop 实现数据的导入导出，以 Spark 为核心进行高效的数据处理。整个系统结合了大数据处理技术，为用户提供精准的内容推荐和深入的用户兴趣分析，帮助平台更好地了解视频趋势和用户需求。
智能BI平台项目
2302_79400545的博客
09-22 238
BI商业智能：数据可视化、报表可视化系统。
JavaScript DOM知识精要：Element, Text, Attr与Document
"这篇文档是作者对JavaScript中DOM操作相关知识点的个人总结，主要涵盖了Element、Text、Attr、Comment和Document等基本类型的特性及其在HTML文档中的应用。" JavaScript是Web开发中的重要脚本语言，尤其在处理动态...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值