<!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 = "myclass";

					break;

				}

			}

			listNodeList(attrList);//假设查看改动的属性值,打开凝视

			*/

		}

		//删除指定属性

		function deleteAttr(){

			var divNode = $("attr");

			divNode.removeAttribute("id");

		}

		//添加新的属性

		function addAttr(){

			var divNode = $("attr");

			var attrList = divNode.attributes;

			divNode.setAttribute("title","mytitle");

			listNodeList(attrList);

		}

	</script>

</body>

</html>

利用js_API 运行对html文档元素的属性的CRUD操作的更多相关文章

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

    转自:http://my.oschina.net/felay/blog/303470 <!DOCTYPE html> <html> <head> <meta ...

  2. 利用Qt Assistant 定制帮助文档

    为了将Qt Assistant定制为自己应用程序的帮助文档浏览器.需要完成以下几步: 一.导入HTML格式的帮助文档 (1)首先,针对自己的应用程序创建HTML格式的帮助文档,请参见<Doxyg ...

  3. VS2010/MFC编程入门之二（利用MFC向导生成单文档应用程序框架）

    VS2010/MFC编程入门之二(利用MFC向导生成单文档应用程序框架)-软件开发-鸡啄米 http://www.jizhuomi.com/software/141.html   上一讲中讲了VS20 ...

  4. springboot项目利用Swagger2生成在线接口文档

    Swagger简介. Swagger2是一款restful接口文档在线生成和在线调试工具.很多项目团队利用Swagger自动生成接口文档,保证接口文档和代码同步更新.在线调试.简单地说,你可以利用这个 ...

  5. JavaScript中的window对象的属性和方法；JavaScript中如何选取文档元素

    一.window对象的属性和方法 ①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行. ②setIn ...

  6. DOM--选取文档元素

    大多数的客户端JavaScript程序在运行时都是在操作一个或者多个文档元素,而为了操作文档中的元素我们就必须要通过某种途径或者方法获得或者选取这些引用文档元素的Element对象.DOM定义了许多种 ...

  7. 利用Java动态生成 PDF 文档

    利用Java动态生成 PDF 文档,则需要开源的API.首先我们先想象需求,在企业应用中,客户会提出一些复杂的需求,比如会针对具体的业务,构建比较典型的具备文档性质的内容,一般会导出PDF进行存档.那 ...

  8. JavaScipt选取文档元素的方法

    摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 选 ...

  9. WORD中引用活动文档元素

    要引用活动的段落.表格.域或其他文档元素,可使用 Selection 属性返回一个 Selection 对象.通过 Selection 对象,可访问选定内容中的所有段落或第一段.下列示例将边框应用于选 ...

随机推荐

  1. Linux 备份工具

     Linux 备份工具 GNU 的传统备份工具  GNU tar — http://www.gnu.org/software/tar/ GNU cpio — http://www.gnu.org/so ...

  2. 解决的方法：warning: Clock skew detected. Your build may be incomplete.

    因为时钟同步问题.出现 warning:  Clock skew detected.  Your build may be incomplete.这种警告, 解决的方法: find . -type f ...

  3. Endian.BIG_ENDIAN和Endian.LITTLE_ENDIAN(http://smartblack.iteye.com/blog/1129097)

    Endian.BIG_ENDIAN和Endian.LITTLE_ENDIAN 在ByteArray和Socket中,能看到一个属性endain. endian : String 更改或读取数据的字节顺 ...

  4. CSS3 过渡

    通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 请把鼠标移动到右侧的元素上: 浏览器支持 Internet E ...

  5. C# VS 面向对象基础（一）

    面向对象(Object Oriented,OO)的相关知识学习了很多了,这篇博客我从C#实现面向对象的理论来做个初步的总结. 在这篇博客中,我通过一个例子讲述了,面向对象中,类,类的实例化,构造方法, ...

  6. MongoDB 操作

    通过CMD命令操作数据 确保MongoDB的服务已经正常安装,记下安装目录(D:\MongoDB\Service) 然后打开cmd 先转到D盘 cd D: 然后转到服务的安装目录下 cd D:\Mon ...

  7. 百度地图SDk 使用

    第一步: 获取密钥 应用名称可以随便填写 发布版SHA1  的获取要在 keytool -v -list -keystore: C:\Users\admin\.android\debug.keysto ...

  8. 使用springMVC时无法加载CSS和JS文件

    解决办法:在spring配置文件里加上  <mvc:default-servlet-handler/>

  9. Node.js服务的重启与监控

    开始:Node +服务文件名 停止:直接快捷键Ctrl+C 监控:1.安装 npm install supervisor -g, 2.supervisor app.js 参考:http://blog. ...

  10. Ubuntu package offline install

    apt-get Use apt-get with the "--print-uris" option to do it. I also add "-qq" so ...