JavaWeb DOM节点的操作

最新推荐文章于 2023-04-23 17:02:11 发布

是小李同学呀~

最新推荐文章于 2023-04-23 17:02:11 发布

阅读量383

点赞数

分类专栏： JavaWeb基础学习文章标签： HTML html5 html 前端

本文链接：https://blog.csdn.net/qq_38557784/article/details/123629223

版权

JavaWeb基础学习专栏收录该内容

29 篇文章 1 订阅

订阅专栏

这篇博客介绍了DOM节点之间的关系以及如何使用DOM0级事件进行元素操作。内容包括：通过ID获取元素、绑定事件监听器实现全选、全不选和反选功能。此外，还涉及了DOM节点的查找、添加、移动、更改和移除等基本操作。

摘要由CSDN通过智能技术生成

DOM节点与节点之间的关系

节点与节点之间的关系
在这里插入图片描述

常用的查找属性节点的方法
在这里插入图片描述

使用DOM0级事件的步骤:
1）给标签添加id属性
2）通过id获取标签对象
3）把标签对象和事件进行绑定
语法:
标签对象.on事件名称=function(){i
//… .}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
			function $(name){
				console.log(name)
				return document.getElementsByName(name);
			}
			
			window.onload=function(){
				
				//加载对象
				var ch=$("ch");
				var bts=$("bt");
				console.log(bts[0]);
				// bts[0].οnclick=all(ch);
				bts[0].onclick=function(){
					for(var i=0;i<ch.length;i++){
						ch[i].checked=true;
					}
				}
				bts[1].onclick=function(){
					for(var i=0;i<ch.length;i++){
						ch[i].checked=false;
					}
				}
				bts[2].onclick=function(){
					for(var i=0;i<ch.length;i++){
						ch[i].checked=!ch[i].checked;
					}
				}
				
			}
	</script>
	<body>
		<input type="checkbox" name="ch"  />唱
		<input type="checkbox" name="ch"  />跳
		<input type="checkbox" name="ch"  />rap<br>
		<input type="button" name="bt"  value="全选" />
		<input type="button" name="bt" value="全不选" />
		<input type="button" name="bt" value="反选" />
	</body>
	<script type="text/javascript">
		
	</script>
</html>

在这里插入图片描述

获取DOM节点的内容

DOM节点的操作

根据DOM树的分析，我们可以知道节点分为:元素节点，属性节点，文本节点;
DOM节点的操作就是对HTML元素进行查找、添加、移动、改变或移除。
在这里插入图片描述
元素节点操作

属性节点操作

文本节点操作

是小李同学呀~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb DOM节点的操作

DOM节点与节点之间的关系节点与节点之间的关系常用的查找属性节点的方法使用DOM0级事件的步骤:1）给标签添加id属性2）通过id获取标签对象3）把标签对象和事件进行绑定语法:标签对象.on事件名称=function(){i//… .}<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head&gt
复制链接

扫一扫

专栏目录