<!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. 2.x ESL第二章习题2.4

    题目 准备 $x_i\sim N(0,1)$,有$\sum_i^n x_i^2 \sim \chi^2(n)$其中$n$称为自由度,卡方分布的均值即其自由度 $x_i\sim N(\mu_i,\sig ...

  2. poj 1083 Moving Tables_dp

    题意:给你n个凳子,接着告诉你一个凳子从a房间到b房间,运输时间为10分钟,走廊很窄能通过一张凳子,当然不堵塞的话能同时扮凳子,问最小花费多少时间 因为数据很小就直接用数组统计了,a,b如果是奇数的话 ...

  3. 【JSP实例】指定用户计数器

    不同的用户访问次数是不一样的,因此对于每一个用户的访问次数都要进行统计,以适应需要. 用户登陆的Login.html的源文件: <html> <head> <title& ...

  4. 命名空间“System.Windows.Forms”中不存在类型或命名空间名称“DataVisualization”。是否缺少程序集引用?

    using System.Windows.Forms.DataVisualization.Charting; 编译时报警:命名空间"System.Windows.Forms"中不存 ...

  5. stage.width/height和stage.stageWidth/stageHeight的区别

    stage.stageWidth和stage.stageHeight就是舞台的宽带和高度 一般默认打开宽带是550,高度是400 那么stage.stageWidth=550,stage.stageH ...

  6. IOS中的几中观察监听模式

    本文介绍Objective C中实现观察者模式(也被称为广播者/监听者.发布/注册或者通知)的五种方法以及每种方法的价值所在. 该文章将包括: 1 手动广播者和监听者(Broadcaster and ...

  7. css 中文字体 unicode 对照表

    css 中文字体可以用 unicode 格式来表示,比如“宋体”可以用 \5B8B\4F53 来表示.具体参考下表: 中文名 英文名 unicode 宋体 SimSun \5B8B\4F53 黑体 S ...

  8. 【dfs or 最短路】【HDU1224】【Free DIY Tour】

    路径只能由小序号到大序号..(起点可以视为最小的序号和最大的序号) 问怎么走 happy值最大.. DFS N=100 且只能小序号到大序号 显然dfs可以过.. 但是存路径的时候sb了.....应该 ...

  9. chrome调试工具常用功能整理（转）

    Elements chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css. windows: ctrl + shift + ...

  10. C#核编之字符串类型介绍与操作

    一.关于字符串操作的方法 System.String类提供了很多工具方法,包括返回字符数据长度,查找当前字符串中的子字符串和转换大小写等方法. 在String类中常用的比较字符串的方法主要有Compa ...