<!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. poj 1276 Cash Machine_多重背包

    题意:略 多重背包 #include <iostream> #include<cstring> #include<cstdio> using namespace s ...

  2. 【LeetCode练习题】Candy

    分糖果 There are N children standing in a line. Each child is assigned a rating value. You are giving c ...

  3. 安装oracle客户端（navicat for oracle）

    本文使用Navicat for Oracle工具连接oracle 安装的过程我就不在此赘述,跟一般软件的安装过程类似.下面主要讲解Navicat的配置. 1.启动该工具,出现如下的开始界面,单击“连接 ...

  4. 采用dlopen、dlsym、dlclose加载动态链接库【总结】

    摘自http://www.cnblogs.com/Anker/p/3746802.html 采用dlopen.dlsym.dlclose加载动态链接库[总结]   1.前言 为了使程序方便扩展,具备通 ...

  5. 《Java解惑》书摘

    例子1:关于char数组的输出 System.out.println("H" + "a");//输出:Ha System.out.println('H' + ' ...

  6. SQLite.dll混合模式程序集是针对“v2.0.50727”版的运行时生成的，在没有配置其他信息的情况下，无法在 4.0 运行时中加载该程序集。

    其他信息: V5.7.4.4 Can't find the System.Data.SQLite.dll more info : 混合模式程序集是针对"v2.0.50727"版的运 ...

  7. 【枚举+贪心】【TOJ3981】【ICPC Balloons】

    给你N种不同颜色气球,每种气球有个数目 count[i],给的同种颜色气球可能是L尺寸,或M尺寸. M个问题,每个问题有个解决人数ac[i]. 每个问题 要分配一种颜色的气球,尺寸要一样 现在 这些气 ...

  8. ImageButton与Button

    1.Button控件 Butotn控件,主要用来实现一些命令操作,通过注册监听事件来实现.首先需要在xml文档中放入一个button按钮. <Button android:id="@+ ...

  9. Java生成PDF报表

    一.前言 前几天,做ASN条码收货模块,需要实现打印下载收货报表,经一番查找,选定iText--用于生成PDF文档的一个Java类库.废话不多说,进入正题. 二.iText简介 iText是著名的开放 ...

  10. 移动端h5摇一摇事件

    // 摇一摇动作 //获取加速度信息 //通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,进行设备是否有进行晃动的判断. //而为了防止正常移动的误判,需要给该变化率设置一个合适的临 ...