首页 > 代码库 > 利用js_API 执行对html文档元素的属性的CRUD操作

利用js_API 执行对html文档元素的属性的CRUD操作

2024-07-12 09:57:21   211人阅读

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>对html元素属性的增删改查操作</title>
<style>
	#attr{text-align:center;font-size:24px;color:white;background:#008000;width:400px;height:30px; }
	.myclass{background:#828555;}
</style>
</head>
<body>
	
	<div id="attr" class = "attrs" lang = "en"  >对html元素属性的增删改查操作</div>
	<hr />
	<button id="getAttr" onclick="getAttr()">访问DIV属性</button>
	<button id="updateAttr" onclick="updateAttr()">修改DIV属性</button>
	<button id="deleteAttr" onclick="deleteAttr()">删除DIV属性</button>
	<button id="addAttr" onclick="addAttr()">增加DIV属性</button>
	<script>
		//简化打印
		function print(str){
			document.write(str+"<br/>");
		}
		//简化获取id
		function $(id){
			return document.getElementById(id);
		}
		//遍历元素属性
		function listNodeList(attrList){
			for (var i = 0; i < attrList.length; i++) {
				print(attrList[i].nodeName+"--->"+attrList[i].nodeValue);
			}
		}
		//访问其属性
		function getAttr(){
			var divNode = $("attr"); 
			var attrList = divNode.attributes;
			print("属性名称--->属性值");
			listNodeList(attrList);
		}
		//修改属性,两种方式,推荐前一种
		function updateAttr(){
			var divNode = $("attr"); 
			//第一种
			divNode.setAttribute("class","myclass"); //推荐这种
			//第二种
			/*
			var attrList = divNode.attributes;
			for (var i = 0; i < attrList.length; i++) {
				if(attrList[i].nodeName == "class"){//如果属性值为class,我们就修改它
					attrList[i].nodeValue = http://www.mamicode.com/"myclass";>


联系
我们