javascript 快速入门之第四章 DOM编程的节点操作

最新推荐文章于 2022-07-01 18:34:12 发布

渊婉

最新推荐文章于 2022-07-01 18:34:12 发布

阅读量784

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_61313896/article/details/123593995

版权

这篇博客介绍了JavaScript中的DOM编程，重点讲解了DOM的概念、节点分类以及基本的节点操作。DOM作为HTML和XML文档的编程接口，将文档转换为树形结构。文章详细阐述了元素节点、属性节点和文本节点的特性，并提供了多个案例演示，包括全选、全不选、节点创建和层级式元素获取等实际操作。

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

一：DOM的概念：

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。也就是说把文档编译成了一个对象模型，例如我们写的html文件实际上是一个文档文件，通过我们的浏览器把它编译成了一个对象模型，这个模型就是document对象。

DOM 以树结构表达 HTML 文档。就好像是一个家族谱，有父级元素也有对应的子级元素，那么document对象就是我们最大的父级元素。

如下图所示，家族谱上面的每一个元素都是一个节点，通过对这些节点的操作，我们可以对这个页面为所欲为。

二：节点的分类

元素节点

属性节点 nodeName，nodeValue，nodeType

文本节点

三：DOM编程对象的属性方法：

四：DOM的基本节点操作：

完整操作方法如图所示：

五：案例演示

案例：全选与全不选

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		//封装ID
		function $(id){
			return document.getElementById(id);
		}
		//编写myAll点击事件函数
		function myAll(){
			//拿到全选框按钮的checked值即可
			//拿到全选框
			var alls =$('alls' );
			// console.log(alls.checked);
			//获取其他三个复选框
			var cks = document.getElementsByName("cks");
			//遍历结果集
			for(var i = 0;i<cks.length;i++){
				// cks[i]  每一个复选框对象
				cks[i].checked = alls.checked;
			}
		}

		//优化全选
		//单独为每一个子复选框设置点击事件，当触发任意一个时，都要全盘判断是否没有选中 
          的，但凡有一个没有选中，全选就取消
		window.onload = function(){
			//获取所有name为cks的复选框
			var cks = document.getElementsByName("cks");
			//遍历
			for(var i = 0;i<cks.length;i++){
				//为每一个子复选框设置对应的点击事件
				cks[i].onclick = function(){
					//alert(this.value);
					//判断当前的子复选框是否选中了并且一并判断后面的是否选中
					var flag = true;//假设全部选中
					for(var j = 0;j<cks.length;j++){
						//判断只要有一个没有选中，全选就干掉。
						if(cks[j].checked == false){
							flag = false;
							break;
						}
					}
					$("alls").checked = flag;
				};
			}

		};

	</script>
</head>
<body>
	<h3>全选案例</h3>
	<table border="1" width="40%">
		<tr>
			<td>全选|全不选<input id="alls" onclick="myAll();" type="checkbox"></td>
			<td>编号</td>
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
		</tr>
		<tr&

最低0.47元/天解锁文章

渊婉

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 快速入门之第四章 DOM编程的节点操作

一：DOM的概念： DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。也就是说把文档编译成了一个对象模型，例如我们写的html文件实际上是一个文档文件，通过我们的浏览器把它编译成了一个对象模型，这个模型就是document对象。 DOM 以树结构表达 HTML 文档。就好像是一个家族谱，有父级元素也有对应的子级元素，那么document对象就是我们最大的父级元素。如下图所示，家族谱上面的每一个元素都是一个节点，通
复制链接

扫一扫