JavaScript DOM编程

最新推荐文章于 2022-10-11 15:17:37 发布
最新推荐文章于 2022-10-11 15:17:37 发布
阅读量221 收藏
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39298385/article/details/81543921
版权

DOM

DOM：Document Objective Model（文本对象模型）

  •  D: 文档  html文档或 xml文档
  •  O: 对象 document对象的属性和方法
  •  M: 模型
  • DOM 是针对xml(html)的基于树的API。
  • DOM 树：节点（node）的层次。
  • DOM 把一个文档表示为一颗家谱树（父，子，兄弟）
  • DOM 定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

节点及类型

  • 元素节点
  • 属性节点：元素的属性，可以直接通过属性的方式来操作。
  • 文本节点：是元素节点的子节点

 

例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//当整个HTML文档完全加载成功后触发window.onload事件。
	window.onload = function () {
		//获取所有的button节点，并获得第一个元素
		var btn = document.getElementsByTagName("button")[0];
		//为btn的onclick事件赋值:当点击button时，执行函数体
		btn.onclick = function(){
			//弹出helloworld
			alert("hello world");
		}
	}
</script>
</head>
<body>
	<button>ClickMe</button>
</body>
</html>

获取元素节点

  • document.getElementById: 根据id属性获取对应的单个节点（该方法为document对象的方法）

  • document.getElementsByTagName: 根据标签名获取指定节点集合（该方法为Node接口的方法，即任何一个节点都有这个方法）

  • document.getElementsByName: 根据节点的name属性获取符合的节点集合（若HTML元素自身没有定义name属性，则用该方法对有些浏览器无效，所以使用时需谨慎）

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//获取指定元素的节点.
			window.onload = function(){
				//1.获取id为bj的那个节点.
				var bjNode = document.getElementById("bj");
				alert(bjNode);
				
				//2.获取所有li节点.
				//使用标签名获取指定节点集合
				var liNodes = document.getElementsByTagName("li");
				alert(liNodes.length);
				
				var cityNode = document.getElementById("city");
				var cityLiNodes = cityNode.getElementsByTagName("li");
				alert(cityLiNodes.length);
				
				//3.根据HTML 文档元素的 name属性名来过去指定的节点的集合.
				var genderNodes = document.getElementsByName("gender");
				alert(genderNodes.length);
				
			}
		</script>
	</head>
	<body>
		<head>
			<p>你喜欢那个城市？</p>
			<ul id="city">
				<li id="bj" name="BeiJing">北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li>
			</ul>
			
			<br><br>
			<p>你喜欢哪款单击游戏？</p>
			<ul id="game">
				<li id="rl">红警</li>
				<li>实况</li>
				<li>极品飞车</li>
				<li>魔兽</li>
			</ul>
			
			<br><br>
			gender:
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
		</head>
	</body>
</html>

读写属性节点

  1. 先获取某一指定的元素节点
  2. 再读指定元素节点的属性
  3. 设置指定元素节点的属性的值

例子 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//读写属性节点：通过元素节点.的方式来获取属性值和设置属性值
			window.onload = function(){
				//属性节点为某元素节点的属性。
				//1.先获取指定的那个元素节点
				var nameNode = document.getElementById("name");
				
				//2.获取指定元素节点的属性的值
				alert(nameNode.value);
				
				//3.设置指定的属性的值
				
				nameNode.value = "James";
			}
		</script>
	</head>
	<body>
			<p>你喜欢那个城市？</p>
			<ul id="city">
				<li id="bj" name="BeiJing">北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li>
			</ul>
			
			<br><br>
			<p>你喜欢哪款单击游戏？</p>
			<ul id="game">
				<li id="rl">红警</li>
				<li>实况</li>
				<li>极品飞车</li>
				<li>魔兽</li>
			</ul>
			
			<br><br>
			name: <input type="text" name="username" id="name" value="David"/>
	</body>
</html>

获取元素节点的子节点

  1. 先获取某节点。
  2. 用childNodes方法获取指定元素节点的所有子节点。
  3. 获取指定节点的指定子节点
  4. 获取指定节点的第一个子节点或者最后一个子节点

例子 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//获取元素节点的子节点
			window.onload = function(){
				//1.获取city 节点
				var cityNode = document.getElementById("city");
				
				//2.用childNodes方法获取指定元素节点的所有子节点。
				//一共有9个（包括文本节点也是元素节点的子节点）
				//该方法不实用。
				alert(cityNode.childNodes.length);
				//3.获取city节点的所有li子节点。
				var cityNodes = cityNode.getElementsByTagName("li");
				alert(cityNodes.length);
				
				//4.获取指定节点的第一个子节点或者最后一个子节点
				alert(cityNode.firstChild);
				alert(cityNode.lastChild);
			}
		</script>
	</head>
	<body>
			<p>你喜欢那个城市？</p>
			<ul id="city">
				<li id="bj" name="BeiJing">北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li></ul>
			
			<br><br>
			<p>你喜欢哪款单击游戏？</p>
			<ul id="game">
				<li id="rl">红警</li>
				<li>实况</li>
				<li>极品飞车</li>
				<li>魔兽</li>
			</ul>
			
			<br><br>
			name: <input type="text" name="username" id="name" value="David"/>
	</body>
</html>

获取文本节点

  1. 获取文本节点所在的元素节点。

  2. 通过firstChild找到文本节点。

  3. 通过操作文本节点的nodeValue属性来读写文本节点的值。 

 例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//获取文本节点
			window.onload = function(){
				//文本节点一定是元素节点的子节点。
				//1. 获取文本节点所在的元素节点。
				var bjNode = document.getElementById("bj");
				
				//2. 通过firstChild找到文本节点。
				var bjTextNode = bjNode.firstChild;
				
				//3. 通过操作文本节点的nodeValue属性来读写文本节点的值。
				alert(bjTextNode.nodeValue);
				
				bjTextNode.nodeValue = "沈阳";
				
				//alert(bjTextNode)
				
			}
		</script>
	</head>
	<body>
			<p>你喜欢那个城市？</p>
			<ul id="city">
				<li id="bj" name="BeiJing">北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li></ul>
			
			<br><br>
			<p>你喜欢哪款单击游戏？</p>
			<ul id="game">
				<li id="rl">红警</li>
				<li>实况</li>
				<li>极品飞车</li>
				<li>魔兽</li>
			</ul>
			
			<br><br>
			name: <input type="text" name="username" id="name" value="David"/>
	</body>
</html>

 

hulunbao
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript的DOM编程
Creabine的博客
12-02 1030
◆DOM编程 1. 为什么要学习DOM编程 通过这种交互操作，可以编写各种网页游戏，乌龟抓鸡，贪吃蛇，推箱子，坦克大战。 2.dom编程，也是学习ajax技术的基础，所以要掌握好dom编程 ◆dom编程简介 DOM=Document Object Model(文档对象模型)【可以理解为把html文档当作对象来进行编程的模型】 关系图：
JavaScript与DOM编程
寻梦&之璐
05-05 6199
文章目录JS简介常量与变量 JS简介 JS是一种在浏览器中运行的解释性脚本语言。JS是由ES（ECMAScript），DOM（文档对象模型），BOM（浏览器对象模型）组成 ECMAScript 6.0（简称 ES6）是JavaScript语言的下一代标准，已经在2015年6月发布。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，称为企业级开发语言 Node.js是一个基于Chrome V8引擎的JavaScript运行环境，是让JS运行在服务端的开发平台，它使得JS成为与PHP，Py
JavaScript基础(DOM编程基础)
最新发布
qq_52215881的博客
10-11 468
JS基础(DOM编程基础)
JavaScript(DOM编程）
weixin_65474399的博客
03-03 684
上期给大家分享了基础的BOM编程 今天这期接着来为大家分享关于JS的DOM编程。 那么DOM编程到底是什么呢？接下来就为大家揭晓。 一，DOM的基本概念 DOM：document object moden 文档对象模型 document 也是一个Element对象，它处于DOM树的最上级 网页中最大的父级元素就是 document ...
javascript Dom 编程艺术
08-11
本 书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践，并全面探讨了HTML5以及jQuery等JavaScript库...
JavaScript DOM编程艺术源代码
10-06
【JavaScript DOM编程艺术】是一本深受开发者欢迎的书籍，它主要介绍了如何使用JavaScript语言来操作和改变网页的Document Object Model（DOM）。DOM是HTML和XML文档的结构化表示，允许我们通过编程方式来访问和修改...
随书光盘+PDF JavaScript DOM编程艺术(第2版)-源代码2.5MB PDF114MB .zip
06-17
JavaScript DOM编程艺术(第2版)是一本深受开发者欢迎的书籍，主要涵盖了JavaScript语言在Web前端开发中的应用，特别是关于DOM（Document Object Model）的深入理解和实践。这本书的随书光盘包含了源代码和PDF电子版...
JavaScriptDOM编程艺术
11-23
《JavaScript DOM编程艺术》是一本深入探讨JavaScript与DOM（Document Object Model）交互的权威书籍。DOM是HTML和XML文档的结构化表示，JavaScript通过DOM API能够对网页内容进行动态操作，实现丰富的交互效果。...
dom编程艺术源码(带素材)
03-20
这是dom编程艺术第二版的素材和源码,学习JavaScript中dom的经典书籍,欢迎参考我之前发的js圣经书籍,即和/
JavaScript之——DOM编程
weixin_65975275的博客
03-02 498
"JavaScript DOM编程"—04
JS编程题（DOM）
weixin_43836308的博客
03-21 524
编写可动态添加新元素的代码 　function addElementDiv(obj) { 　　　　var parent = document.getElementById(obj); 　　　　var div = document.createElement("div"); 　　　　div.setAttribute("id", "newDiv"); 　　　　div.innerHTML = "js 动...
JavaScript（含DOM编程）
七色米的足迹
02-16 1994
1、浏览器的内核和JS引擎 1.1、浏览器内核     网页浏览器的内核就是渲染引擎(renderingEngine)，也被称为排版引擎(Layout Engine)或模板引擎。它负责取得网页的内容和结构（HTML、XML、图像等）、样式信息（CSS等）以及计算网页的显示方式，然后会输出至显示器。也就是说，渲染引擎决定了浏览器如何显示网页的内容以及格式，因为不同的浏览器内核对网页编写语法的解析
Javascript——DOM编程
热门推荐
Switch的博客
12-27 1万+
Javascript——DOM编程 基本概述     文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以
javaScript 之 DOM高级编程
m0_64043477的博客
03-02 437
目录： 一.什么是 DOM树？ 二.如何使用 JS 操作表格？ 三.Element 的常用属性 以及 常用方法（重点） ~~~咱们先一起浅回忆一下上次讲解内容中的几个重要的词汇吧！~~~ 1.文档 2.点击 3.函数 4.元素 5.样式 6.文本框的值 7.纯文本内容 8.是否被选中 答案：1.document 2.onc...
《JavaScript DOM编程艺术》第十章 用javascript实现动画效果
Cziker的博客
11-28 557
实现移动图片效果，当鼠标指针悬停在哪个链接上，我们将这个图片向左或者右移动 HTML 代码块 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UT
js复习之-dom编程[常用代码]
夏华成
08-23 584
刷新 function red() { window.location.reload(); } 跑马灯，定时器 var trmid1; var trmid2; function lf() { if (trmid2) { clearInterval(t
JavaScript DOM编程艺术：创建与操作节点
"《JavaScript DOM 编程艺术》是一本详细介绍JavaScript和DOM开发的书籍，由Web标准倡导者撰写，适合学习JavaScript和DOM编程的读者。书中不仅涵盖了JavaScript和DOM的基础知识，还通过实例展示了专业级别的网页开发...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值