js入门——Dom基础

js入门——Dom基础

大家好,又见面了,我是全栈君。

    DOM=DocumentObject Model,文档对象模型。

Dom有三个不同的部分。

    1、核心DOM 也是最基础的文档结构的标准模型

    2、XMLDOM 针对XML文档的标准模型

    3、HTML DOM 针对HTML文档的标准模型

 

    对于一个新生程序猿来说。HTML是什么,事实上并不重要。可是都知道。html文件,能够用浏览器打开。

    HTML和XML。基本同样。仅仅只是是。HTML中节点 标记,是预先定义好的。

而XML中的节点。由文档的作者定义。所以XML是可扩展的。

 

    HTML: 超文本标记语言。主要功能是能被浏览器解析 显示出来。HTML能够看作是一种特殊的标记语言。

    XML:可扩展标记语言。

 

    而DOM作为以上的标准。当然会对其上面进行规划:

    依据DOM,文档每一个成分都是一个节点。

对于上面的文档。

事实上就是一颗树。

js入门——Dom基础

 

 

    通过一个样例来了解一下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>DOM</title>
		<script  src="base.js"></script>
		<script  src="index.js"></script>
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
		<h1>标题H1</h1>
		<p>p标签</p>
		<ul>
			<li>栏目一</li>
			<li>栏目二</li>
			<li>栏目三</li>
		</ul>
		<div id='box' name='boxs'>測试div</div>
	</body>
</html>

 

 

什么是节点?

    文档中的全部标记,都称之为节点。

    js入门——Dom基础

DOM节点树中的节点分为:

    元素节点、文本节点、属性节点。

 

    元素节点:标记名称 如 html body div等

    文本节点:标记的内容  如  “測试div” “p标签” 等等

    属性节点:用于修饰 标记名称的。也算是 标记的属性。 如 :id=’boxs’

 

对元素元素的查询:

    元素的查询,有好多种方式。

    依据标记名称(getElementsByTagName)、id名(getElementById)、name名(getElementsByName)。

都能够进行查找

    innerHTML:获取元素节点中的文本节点

    元素属性节点的改动。查到元素之后,也能够进行  属性的改动  attribute

 

    查找元素的时候。假设查到的元素  不止一个,那么返回的为一个节点数组。因此在使用的时候一定不能缺少数组标号。通过childNode属性来获取全部子节点

 

    对与节点来说。也是一种树形结构。当查询到一个元素节点后,这个元素节点中 也包含非常多小节点。

    js入门——Dom基础

 

    如上所看到的的节点,由 属性节点 和 文本节点构成。使用childNodes.length  获取元素节点中的全部子节点

使用的时候。与数组类似  childNodes[i]  对第i个子节点进行操作

     js入门——Dom基础

 

对子节点的操作

    js入门——Dom基础

 

    DOM基础非常多,记是肯定记不住的。浏览一遍。了解一下,在下次使用的时候,知道有那么一回事。知道在哪里查资料即可了。

    当然,也能够依据IDE的智能提示来做。

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/116162.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Repository XXX does not have a Realease file「建议收藏」

    问题描述:E:Therepository‘http://ppa.launchpad.net/noobslab/deepin-sc/ubuntubionicRelease’doesnothaveaReleasefile.解决方案:cd/etc/apt/sources.list.dlssudormnoobslab-ubuntu-deepi…

  • 查看sqlite_sqlite数据库手机版

    查看sqlite_sqlite数据库手机版这是什么用于SQLite的数据库浏览器(DB4S)是一种高质量,可视化的开源工具,用于创建,设计和编辑与SQLite兼容的数据库文件。DB4S适用于想要创建,搜索和编辑数据库的用户和开发人员。DB4S使用熟悉的类似电子表格的界面,并且不必学习复杂的SQL命令。控件和向导可供用户使用:创建并压缩数据库文件 创建,定义,修改和删除表 创建,定义和删除索引 浏览,编辑,添加和删除记录 搜索记录 导入和导出记录为文本 从CSV文件导入和导出表格 从/到SQL转储文件导入和导出数据库

  • 视频直播技术详解之推流和传输

    视频直播技术详解之推流和传输声明:本文为CSDN原创投稿文章,未经许可,禁止任何形式的转载。作者:七牛云责编:钱曙光,关注架构和算法领域,寻求报道或者投稿请发邮件qianshg@csdn.net,另有「CSDN高级架构师群」,内有诸多知名互联网公司的大牛架构师,欢迎架构师加微信qshuguang2008申请入群,备注姓名+公司+职位。七牛云于6月底发布了一个针对视频直播的实时流网络LiveNet和完…

  • SpringBoot 使用 @Transactional 注解配置事务[通俗易懂]

    SpringBoot项目中需要配置事务管理,所以在这里系统地整理下关于@Transactional注解相关的知识!1、详细介绍事务管理是应用系统开发中必不可少的一部分。Spring为事务管理提供了丰富的功能支持。Spring事务管理分为编程式和声明式的两种方式。编程式事务指的是通过编码方式实现事务;声明式事务基于AOP,将具体业务逻辑与事务处理解耦。声明式事务管理使业务代…

  • weka怎么安装_we是什么安装方式

    weka怎么安装_we是什么安装方式1什么是看板管理首先我们先两张现实中的看板系统,能够有助于我们理解看板管理系统。大家常见的应该是实体看板,适合布置在团队所有成员都在一个办公室工作的环境。它的优点很明显,方便工作成员展示和查看自

  • 我的世界服务器作弊指令大全_我的世界服务器称号指令

    我的世界服务器作弊指令大全_我的世界服务器称号指令原标题:我的世界指令代码大全一、我的世界指令代码大全单机指令(部分多人也适用)/gamemode0是生存(极限)模式/gamemode1是创造模式/gamemode2是冒险模式(必须用特定的武器才能消除方块)/gamemode3是生存(极限)模式/give你的名字1371能得到命令方块,在里面输死亡不掉落:/gamerulekeepInventorytrue防爆:/game…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号