<!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. 杭电oj 3079 Vowel Counting

    Tips:可以先将输入的字符串全部转化为小写字母,然后再将元音字母变为大写,时间复杂度O(n) #include<stdio.h> #include<string.h> #in ...

  2. Python学习入门基础教程(learning Python)--8.1 字典数据添加与删除

             1. 字典数据添加 这个很简单,像赋值那样一项项赋值即可.语法结构如下 dict_obj[key] = value 添加数据项示例如下 >>> d1 = {'cod ...

  3. paip.navicat form mysql导入文本文件时CPU占用100%的解决

    paip.navicat form  mysql导入文本文件时CPU占用100%的解决 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:h ...

  4. Unity 利用NGUI2.6.3做技能冷却的CD效果

    NGUI非常强大我们今天来学习一下,如何利用NGUI做技能冷却的CD效果.先导入NGUI的插件.没有的话这里有啊NGUI2.6.3下载地址: http://vdisk.weibo.com/s/KLqn ...

  5. JQuery中html()方法的注意事项

    .html方法当不传参数时用来获取元素的html内容, return this[0] && this[0].nodeType === 1 ? this[0].innerHTML.rep ...

  6. mysql的面试试题

    1, mysql的复制原理以及流程. (1)先问基本原理流程,3个线程以及之间的关联. 答:Mysql复制的三个线程:主库线程,从库I/O线程,从库sql线程: 复制流程:(1)I/O线程向主库发出请 ...

  7. H264标准句法表中C的含义理解

    下面一段是H264官方中文版中给出的解释: “类别(在表中以C 表示)规定条带数据可以至多划分为三种条带数据类别.条带数据类别A 包含了类别2的所有语法元素.条带数据类别B 包含了类别3 的所有语法元 ...

  8. Http权威指南笔记(二) Http状态码大全

    100~199—信息状态码 200~299—成功状态码 客户端发请求时,这些请求通常都是成功的. 300~399—重定向状态码 重定向状态码告知客户端使用代替位置来访问他们所感兴趣的资源. 400~4 ...

  9. 标准C++的vector使用

    原文:http://blog.csdn.net/pandy1110/article/details/5963908 C++内置的数组支持容器的机制,但是它不支持容器抽象的语义.要解决此问题我们自己实现 ...

  10. property参数

      1,set方法内存管理相关的参数 *retain:release旧值,retain新值(适用于OC对象类型) *assign:直接赋值(默认,只用于非OC对象类型) *copy: release旧 ...