js入门——Dom基础

时间：2022-05-20 12:27:29

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基础

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemM0NzQyMzU5MTg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

对子节点的操作

js入门——Dom基础

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemM0NzQyMzU5MTg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

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

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

js入门——Dom基础的更多相关文章

  1. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  2. js笔记-DOM基础

    DoM 浏览器支持: IE: 10% FF: 99% Chrome: 60% childNotes不兼容 在Chrome和IE9中会将文本节点也算作childNotes,而在IE6-8中childNo ...

  3. JavaScript基础15——js的DOM对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 1&period; web前端开发分享-css&comma;js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  5. React&period;js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  6. web前端开发分享-css&comma;js入门篇（转）

    转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...

  7. DOM基础（一）

    在我们刚刚学JavaScript的时候,就应该听说过,JavaScript是由三部分组成的.分别是ECMAScript,DOM和BOM组成的.ECMAScript是JavaScript的核心,它描述了 ...

  8. React&period;js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...

  9. web前端开发分享-css&comma;js入门篇

    学习没有捷径,但学习是有技巧与方法.   一,css入门篇:   推荐书籍:css哪些事儿,精通css. 理由:css那些事儿,他是一本介绍css基础类的书,是入门的经典读物. 系统的介绍了css的选 ...

随机推荐

  1. mysql日期格式化

    DATE_FORMA T(date, format) 根据格式串format 格式化日期或日期和时间值date,返回结果串. 可用DATE_FORMAT( ) 来格式化DATE 或DATETIME 值 ...

  2. Android中直播视频技术探究之---采集摄像头Camera视频源数据进行推流&lpar;采用金山云SDK&rpar;

    一.前言 在之前已经详细介绍了Android中的一种视频数据源:Camera,不了解的同学可以点击进入:Android中Camera使用详解 ,在这篇文章中我们介绍了如何采集摄像头的每一帧数据,然后进 ...

  3. ThinkPHP中的模型

    ThinkPHP中的模型 1.什么是模型(Model) 模型表示企业数据和业务规则,实际项目开发中,主要实现与数据库进行操作. 2.模型的定义规则 模型类的命名规则是除去表前缀的数据表名称,采用驼峰法 ...

  4. jupyter的交互小工具-----ipyleaflet

    ipyleaflet(一个用于创建简单的交互式地图的平移和缩放的库,ipyleaflet支持诸如多边形,标记和更一般的任何地理编码地理数据结构的注释) from ipyleaflet import M ...

  5. Orchard Core Framework：ASP&period;NET Core 模块化，多租户框架

    Orchard Core Framework:ASP.NET Core 模块化,多租户框架 上一篇编写Orchard Core一分钟搭建ASP.NET Core CMS ,介绍ASP.NET Core ...

  6. 《JUnit实战（第2版）》读书笔记

    第1章 JUnit起步 主要了解JUnit,如何安装.运行JUnit 要点 JUnit4不需要像JUnit3那样extends TestCase类 Junit4基本都是用注解(该书都翻译为注释,但我喜 ...

  7. LoadRunner 11&period;00安装篇&lpar;Win 10&rpar;

    参考博文: https://blog.csdn.net/xianjie0318/article/details/78625980 https://www.cnblogs.com/VseYoung/p/ ...

  8. 非root用户ssh 执行 sudo远程机器免密钥

    非root用户ssh 执行 sudo远程机器免密钥 # 1.登陆192.168.1.10 ssh-keygen -t rsa # 一路回车 # 将公钥添加到认证文件中 cat ~/.ssh/id_rs ...

  9. api-gateway-engine知识点（1）

    1     密钥绑定时,通过Channel 实现监控 后台发送数据 :      redisTemplate.convertAndSend(RedisMessageChannel.API_GATEWA ...

  10. git did not exit cleanly &lpar;exit code 128&rpar;

    github,pull和push的时候出问题,提示git did not exit cleanly (exit code 128) 使用HTTP格式的url,不要使用SSH格式的url,在官网上赋值下 ...

相关文章