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的智能提示来做。

 

 

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • es6set和map区别_list和map的区别面试

    es6set和map区别_list和map的区别面试转自https://blog.csdn.net/terence1212/article/details/52487656set是一种关联式容器,其特性如下:set以RBTree作为底层容器所得元素的只有key没有value,value就是key不允许出现键值重复所有的元素都会被自动排序不能通过迭代器来改变set的值,因为set的值就是键map和set一样是关联式容器,它们的底层容器都是红黑树,区别…

    2025年9月30日
    3
  • 自动化测试平台(八):列表组件公共化封装和用例项目管理功能开发

    自动化测试平台(八):列表组件公共化封装和用例项目管理功能开发上一章我们完成了整个用户管理模块的功能,能够正确的增、删、改、查用户。但其中有很多判断实际上是其他类似的模块也会有的,例如:1.创建用户后回到首页刷新列表;2.删除次页最后一条数据,回到前一页刷新列表;3.查询条件的格式化;—难道我们每写一个类似的模块,都要去写一遍这些重复的逻辑代码吗?显然是没必要的,所以我们需要将其抽离成公共列表组件提供给其他模块使用,避免大量的做重复的事情,并让代码更容易维护。本章还将完成用例项目管理功能,它主要用于管理不同类型(API、UI),不同项目

    2022年6月25日
    22
  • wifi 频段表_史上最全无线通信频率分配表,转走收藏!

    wifi 频段表_史上最全无线通信频率分配表,转走收藏!5GNR3GPP已指定5GNR支持的频段列表(可查看TS381045.2章节),5GNR频谱范围可达100GHz,指定了两大频率范围:①Frequencyrange1(FR1):就是我们通常讲的6GHz以下频段•频率范围:450MHz-6.0GHz•最大信道带宽100MHz②Frequencyrange2(FR2):就是毫米波频段•频率范围:24.25GHz-52.6…

    2022年10月20日
    5
  • vue的$on方法_vue基本指令

    vue的$on方法_vue基本指令v-on监听事件可以用v-on指令监听DOM事件,并在触发时运行一些JavaScript代码。事件代码可以直接放到v-on后面,也可以写成一个函数。示例代码如下:<divid

    2022年8月7日
    8
  • BitBlt介绍

    BitBlt介绍

    2021年12月7日
    48
  • 简单图文解释冯诺依曼体系结构(通俗易懂版)

    简单图文解释冯诺依曼体系结构(通俗易懂版)冯诺依曼式计算机主要由输入设备,输出设备,控制器,运算器,存储器该五个组成部分构成。我们可以将该体系结构的运作通过人类接收信息,处理信息,并输出信息这个过程来加以类比理解。人类:当眼睛看到某些信息,这些信息被存储到记忆装置,大脑从记忆装置取出信息,并加以思考运算,再放回记忆装置,大脑控制记忆装置将信息传输给嘴巴,将信息表达出来。(这个过程大脑的指令占领导地位)冯诺依曼计算机:当输入设备接收到数据,数据将被存储到存储器,控制器发出取数据和运算的指令,数据被取出方去放入运算器中加以运算,运算结束后,控制器

    2025年6月11日
    7

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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