js学习之操作元素的文档结构(一)

最新推荐文章于 2022-08-14 14:13:13 发布
最新推荐文章于 2022-08-14 14:13:13 发布
阅读量235 收藏
点赞数
分类专栏： # JavaScript教程 文章标签： javascript css vue.js html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44853669/article/details/106962212
版权 
<html>
	<head>
		<title>js操作元素的文档结构</title>
		<meta charset="UTF-8"/>
		<!--
			js操作HTML文档结构:
				增加节点
				删除节点
				第一种方式：使用innerHTML
					div.innerHTML=div.innerHTML+"内容"//增加节点
					div.innerHTML=""//删除所有子节点
					父节点.removeChild(子节点对象)//删除指定的子节点。
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			function testAdd(){
				//获取元素对象
				var showdiv=document.getElementById("showdiv");
				//给div追加上传按钮
		showdiv.innerHTML=showdiv.innerHTML+
		"<div><input type='file' value='' /><input type='button' value='删除' 
		οnclick='delInp(this)'/></div>";					
			}
			function delInp(btn){
				//获取父级div
				var showdiv=document.getElementById("showdiv");
				//获取要删除的子div
				var cdiv=btn.parentNode;
				//父div删除子div
				showdiv.removeChild(cdiv);
			}
		</script>
	</head>
	<body>
		<h3>js操作元素的文档结构</h3>
		<input type="button" name="" id="" value="继续上传" onclick="testAdd()"/>
		<hr />
		<div id="showdiv">
		</div>
	</body>
</html>

在这里插入图片描述

playboy-jordan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript实现文档结构图
03-30
JavaScript实现文档结构图! 值得下载看看!资源免费,大家分享!!
js学习之操作元素的文档结构(二)
独狼的博客
06-25 216
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js操作文档结构2</title> <!-- js操作文档结构2： 获取元素对象 var obj=document.createElement("标签名"); 元素对象名.appendChild(obj); --> <!--声明js代码域--&g
JavaScript中，文档结构遍历
王龙楷
04-05 253
js中，文档结构遍历有两套很相似的API分别只是是否包括文本节点和注释节点：1.作为节点树遍历：(包括文本节点和注释节点)Document对象、Element对象和文档中表示文本的Text对象都是Node对象。Node定义了以下重要属性：parentNode：该节点的父节点。没有父节点就是null。childNodes：只读的类数组对象（NodeList），它是该节点的子节点的实时表示。first...
js操作元素的文档结构
bingmo_的博客
10-10 193
<html> <head> <title>js操作元素的文档结构</title> <meta charset="UTF-8"/> <!-- js操作HTML文档结构: 增加节点 删除节点 第一种方式：...
前端学习——js操作元素的文档结构方法一
x1037490413的博客
04-01 317
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js操作元素的文档结构</title> <!-- js操作HTML文档结构 增加节点 删除节点 第一种方式：使用innerHTNL ...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十三：HTML DOM-文档元素的操作（一）
01-20
接着，会讲解如何操作元素的属性。你可以使用`.getAttribute`来读取属性值，用`.setAttribute`设置属性值，而`.removeAttribute`则用于删除属性。此外，对于类名的操作也很重要，`.classList`属性提供了添加、移除和...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四：HTML DOM-文档元素的操作（二）
最新发布
01-20
这篇教程——"JavaScript学习手册十四：HTML DOM-文档元素的操作（二）"深入探讨了如何使用JavaScript来操纵HTML文档中的元素，进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示，它将网页内容...
javascript学习基础笔记之DOM对象操作
01-19
DOM（文档对象模型）是Web开发中的核心概念，它为HTML和XML文档提供了一种结构化的表示方式。这个API允许开发者通过编程的方式访问和修改页面的结构、...因此，深入学习DOM对象和操作是每个前端开发者必备的技能之一。
JavaScript学习笔记之DOM基础操作实例小结
12-08
这个属性可以用于遍历文档结构，或者在需要操作父元素时使用。 2. 父节点应用 在实例05中，展示了如何通过点击链接隐藏对应的父节点。这通常涉及事件监听和父节点查找。当用户点击“隐藏”链接时，JavaScript会找到...
理解(X)HTML的文档结构
09-27
文档结构的清晰性不仅影响CSS的效率和可维护性，还直接影响JavaScript对页面元素的操作。通过DOM（Document Object Model）接口，JavaScript可以查找、修改或添加文档结构中的元素。例如，我们可以通过元素的父子或...
前端学习——js操作元素的文档结构 方法二
x1037490413的博客
04-01 235
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js操作元素文档结构2</title> <!-- js操作文档结构2： 获取元素对象 var obj=document.createElement("标签名...
Js操作元素的文档结构
you些话的博客
12-09 195
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js操作元素的文档结构</title> <script type="text/javascript"> function testAdd(){ //获取元素对象 var showdiv=document.getElementById("showdiv"); //给
javascript dom-文档结构和遍历
wang19yan89的博客
03-14 452
1 作为节点树的文档 Node属性：     parentNode、childNodes、firstChild、lastChild、nextSibling、previoursSibling
JavaScript程序结构
fakerking的博客
08-14 275
JavaScript分支结构，循环结构，流程控制和异常处理
JavaScript基本结构
a1234556667的博客
09-20 2447
轮播图 常位于首页，用作活动推广的大图，其可以自动播放，点击左右切换按钮播放，也可以点击图片上的小圆点播放 Tab切换 用于点击不同的标签或标题，显示不同的内容 表单验证 常位于注册和登录页面，其用来在数据被送往服务器前对HTML表单中的输入数据进行验证。若输入的数据不正确，则会提示错误 什么是JavaScript JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言 其常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果 Ja...
JS工程文件结构
AiCoding_D的博客
04-05 5027
创建好一个工程后，整体架构目录如下所示： 1.index文件 第7-11行代码是设置网页的meta信息，meta信息是网页基本信息，这些设置能够使index.html网页很好地在移动设备上显示。 第24行代码放置了一个canvas标签，canvas标签是HTML5提供的，通过JavaScript可以在Canvas上绘制图形2D图形，Cocos2d-JS在网页上运行的游戏场景都是通
jQuery 之修改文档结构-(DOM操作)
愤怒的菜鸟
10-13 481
插入和替换元素 第一组: (target).method(content),content可以是Node，jQuery对象，或纯文本内容，HTML字符数append()prepend()after()before()replaceWith();第二组：(target).method(content) , content 可以是Node ， jQuery对象 ，或 纯文本内容 ， HTML...
一张图看懂js中元素、属性和文本节点的关系
庄AC的博客
09-07 5967
文本节点和元素节点为父子关系，但是属性节点和元素节点是兄弟关系吗？如果是兄弟关系， 那么通过“元素对象.属性名”的方式访问属性怎么解释？究竟元素节点和属性节点什么关系呢？ 元素节点和文本节点之间存在父子关系，元素节点和属性节点之间不存在父子关系
javaScript DOM的体系结构及思维导图的整理
weixin_46816740的博客
08-19 766
javaScript DOM的体系结构文档整理 DOM （浏览器环境进行开发测试） 文档对象模型，浏览器提供了一套api(构造函数，原型，实例对象-【html元素->js对象】),通过这套api进行dom操作（追加节点，删除节点，动态改变属性…） 体系结构整体概述： 最高级别 Object 下一级别: Node 下一级别： Element Document Text Comment
JavaScript学习笔记：元素交互与基本语法详解
逗号操作符在一行代码中执行多个表达式的值，`if`语句用于条件控制，`do-while`和`while`循环至少执行一次，直到条件不满足，`for`循环则用于控制次数，`for-in`语句用于枚举对象的属性。 - `label`语句允许在代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

playboy-jordan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值