<!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. logstash grok正则调试

    logstash 正则调试: nginx 配置: log_format main '$remote_addr [$time_local] "$request" '; logstas ...

  2. 2014第7周1Web安全概念学习

    晚上没有加班,回来后尝试几个感觉不错的行动:1.列出当天最有意义的五件事:2.靠墙站,纠正自己的姿势同时锻炼眼睛:这两点以后也要坚持成为每天的习惯.然后我又陷入了知乎的各种信息中,一个多小时的时间悄悄 ...

  3. UVA 400 Unix ls by sixleaves

    题目其实很简单,答题意思就是从管道读取一组文件名,并且按照字典序排列,但是输入的时候按列先输出,再输出行.而且每一行最多60个字符.而每个文件名所占的宽度为最大文件名的长度加2,除了输出在最右边的文件 ...

  4. sigaction函数解析

    http://blog.chinaunix.net/uid-1877180-id-3011232.html sigaction函数解析  sigaction函数的功能是检查或修改与指定信号相关联的处理 ...

  5. subllime text 创建可复用的代码片段

    对于前端工程师来讲,写一个html页面的基本结构是体力活,每次去拷贝一个也麻烦,sublime text 2 提供了一个很好的复用代码片段.下面介绍一下创建一个html5的代码片段的过程. 在菜单上点 ...

  6. 项目总结——SqlParameter的参数设置长度(size属性)

    看到很多朋友在实例化SqlParameter时,通常都没有指定参数的长度就直接给参数赋值了.就像下面的写法: new SqlParameter("@address", SqlDbT ...

  7. InterLockedIncrement and InterLockedDecrement函数原理

    实现数的原子性加减. 什么是原子性的加减呢? 举个样例:假设一个变量 Long value =0; 首先说一下正常情况下的加减操作:value+=1. 1:系统从Value的空间取出值,并动态生成一个 ...

  8. PHP自学4——通过函数将数组数据输出到html的Table标签中（使用函数的例子）

    这一节其实说实话并没有什么干货,不过为了防止PO主的懒癌的复发,还是坚持放一点东西,即使是内容和长度都令人发指.这一节通过一个函数来实现将数组中的内容输出html的Table标签当中显示. 函数文件— ...

  9. js触摸屏案例

    js 手机端触发事事件.javascript手机端/移动端触发事件   处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: 1 2 3 4 touchstart:  ...

  10. 初学.NET小技巧（不断更新）

    1.快速打出Console.WriteLine : 输入cw,然后按两下tab键. 2.创建一个函数快捷键:bool b = IsPrimeNumber();   把光标放到函数名上,Shift+Al ...