实现HTML页面动态处理

最新推荐文章于 2024-02-23 16:56:19 发布

{[("青椒盖饭")]}

最新推荐文章于 2024-02-23 16:56:19 发布

阅读量1.4w

点赞数 3

分类专栏： javaweb学习笔记

本文链接：https://blog.csdn.net/qq_43386754/article/details/85730711

版权

javaweb学习笔记专栏收录该内容

77 篇文章 0 订阅

订阅专栏

HTML DOM 可以可以对HTML中的元素进行删除,增加的操作,要操作HTML DOM可以使用JavaScript的语言对HTML DOM进行访问.
原html文件

<html>
	<head>
		<title>欢迎页面!</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<span>Hello World!</span>
		<span>Hello World!</span>
		<span>Hello World!</span>
		<span>Hello World!</span>
		<span>Hello World!</span>
		<span>Hello World!</span>
		<span>Hello World!</span>
		<span>Hello World!</span>
		<span>Hello World!</span>
		<span>Hello World!</span>
		<span>Hello World!</span>
		<span>Hello World!</span>
		<div>
			<span id="10">Hello World!</span>
		</div>
	</body>
</html>

使用getElementsByTagName()方法取得所有span元素,

	<script type="text/javascript">
		window.onload = function	(){
			//取得"span元素
			var spanELes = document.getElementsByTagName("span");
			
		}
	</script>

动态设置元素样式,假设有如下样式,将偶数位的span元素设置为init0样式,将奇数位的span设置为init1的样式

<style type="text/css">
	.init0{
		color:green;
		font-size:20px;
		display:block;
	}
	.init1{
		color:red;
		font-size:20px;
		display:block;
	}
</style>

循环得到的span节点集合,设置每个节点的class属性

	<script type="text/javascript">
		window.onload = function(){
			//取得"span元素
			var spanELes = document.getElementsByTagName("span");
			for(var x = 0; x < spanELes.length; x ++){
				spanELes[x].setAttribute("class","init"+(x%2));
			}
			
		}
	</script>

页面运行效果

在这里插入图片描述

删除元素

再删除元素的时候需要注意的是,如果使用getELementsByTagName()方法得到一个节点的集合,如果使用removeChild()方法删除集合中的一个元素,则这个集合的长度会发生改变.
假设现在的html中的内容变为如下, 如果此时要删除所有带有"del"内容的span元素

<html>
	<head>
		<title>欢迎页面!</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<span>Hello World! del</span>
		<span>Hello World! del</span>
		<span>Hello World!</span>
		<span>Hello World!</span>
		<span>Hello World del !</span>
		<span>Hello World!</span>
		<span>Hello del World!</span>
		<span>Hello World!</span>
		<span>Hello World!</span>
		<span>Hello World!</span>
		<span>Hello del World!</span>
		<span>Hello World!</span>
		<div>
			<span id="10">Hello World!</span>
		</div>
	</body>
</html>

先使用getElementsByTagName()取得每一个span属性
然后使用firstChild.nodeValue得到每一个span节点的内容
然后将带有"del" 内容的节点保存到一个数组中.
再使用parentNode得到要删除节点的父节点
再使用removeChild()删除所有子节点


	<script type="text/javascript">
		window.onload = function(){
			//取得"span元素
			var spanEles = document.getElementsByTagName("span");
			//得到原集合的长度
			var len = spanEles.length;
			//保存要删除的子节点数组
			var delList = new Array();
			//操作数组的下标
			var foot = 0;
			for(var x = 0; x < spanEles.length; x ++){
				spanEles[x].setAttribute("class","init1");
				//得到每个节点的内容
				var strValue = spanEles[x].firstChild.nodeValue;
				//判断是是否有"del"字符的节点
				if(strValue.indexOf("del")!=-1){
					//将每一个要删除的内容保存到数组中
					delList[foot ++] = spanEles[x];
				}
			}
			//循环删除数组中的每一个节点
			for(var j = 0; j < delList.length; j++){
				//得到当前节点的父节点,然后删除父节点的子元素
				delList[j].parentNode.removeChild(delList[j]);
			}
			
		}
	</script>

运行结果

在这里插入图片描述

取得属性内容

假设现在的html文件内容为,如果要取得id为:"10"的span元素中的属性内容

<html>
	<head>
		<title>欢迎页面!</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<div><span id="10 class="init0" >Hello World!</span></div>
	</body>
</html>

可以使用document.getElementById()方法取得一个指定id的元素-,正常情况下可以直接使用"元素.属性"取得元素内容

		window.onload = function(){
		//取得span属性
			var spanEle = document.getElementById("10");
			//向控制台输出,属性内容
			console.log("id = "+spanEle.id);
			console.log("class = "+spanEle.className);
		}

控制台输出

在这里插入图片描述

如果直接使用"元素.属性" 的方式取得属性内容,表示这个属性已经被定义过了,而一些我们自定义的属性,是无法使用这样的方式取得属性内容的,但是也可以通过以下的方法取得属性内容

Element.getAttribute("属性名称");

例如html中定义有如下的内容

<div><span id="10" class="init0" obj="spanObj" >Hello World!</span></div>

如果要取得span元素中的obj属性内容,可以通过以下方式

	<script type="text/javascript">
		window.onload = function(){
		//取得span属性
			var spanEle = document.getElementById("10");
			//向控制台输出,属性内容
			console.log("obj = "+ spanEle.getAttribute("obj"));
		}
	</script>