利用js_API 运行对html文档元素的属性的CRUD操作
<!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操作的更多相关文章
- 利用js_API 执行对html文档元素的属性的CRUD操作
转自:http://my.oschina.net/felay/blog/303470 <!DOCTYPE html> <html> <head> <meta ...
- 利用Qt Assistant 定制帮助文档
为了将Qt Assistant定制为自己应用程序的帮助文档浏览器.需要完成以下几步: 一.导入HTML格式的帮助文档 (1)首先,针对自己的应用程序创建HTML格式的帮助文档,请参见<Doxyg ...
- VS2010/MFC编程入门之二（利用MFC向导生成单文档应用程序框架）
VS2010/MFC编程入门之二(利用MFC向导生成单文档应用程序框架)-软件开发-鸡啄米 http://www.jizhuomi.com/software/141.html 上一讲中讲了VS20 ...
- springboot项目利用Swagger2生成在线接口文档
Swagger简介. Swagger2是一款restful接口文档在线生成和在线调试工具.很多项目团队利用Swagger自动生成接口文档,保证接口文档和代码同步更新.在线调试.简单地说,你可以利用这个 ...
- JavaScript中的window对象的属性和方法；JavaScript中如何选取文档元素
一.window对象的属性和方法 ①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行. ②setIn ...
- DOM--选取文档元素
大多数的客户端JavaScript程序在运行时都是在操作一个或者多个文档元素,而为了操作文档中的元素我们就必须要通过某种途径或者方法获得或者选取这些引用文档元素的Element对象.DOM定义了许多种 ...
- 利用Java动态生成 PDF 文档
利用Java动态生成 PDF 文档,则需要开源的API.首先我们先想象需求,在企业应用中,客户会提出一些复杂的需求,比如会针对具体的业务,构建比较典型的具备文档性质的内容,一般会导出PDF进行存档.那 ...
- JavaScipt选取文档元素的方法
摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 选 ...
- WORD中引用活动文档元素
要引用活动的段落.表格.域或其他文档元素,可使用 Selection 属性返回一个 Selection 对象.通过 Selection 对象,可访问选定内容中的所有段落或第一段.下列示例将边框应用于选 ...
随机推荐
- Binary Tree Level Order Traversal - leetcode - java
Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...
- leetcode Permutation
Given a collection of numbers, return all possible permutations. For example,[1,2,3] have the follow ...
- PHP转码函数
解决中文乱码问题,数据库使用sql server ,是gbk编码,所以在存储和前台显示时都要转码. function cn_convert2web($str){ return iconv('gbk', ...
- eclipse下的web开发问题总结[struts2文件上传]
最近需要做一个web方面的文件上传的Demo.开发工具是eclipse[具体名称:Eclipse IDE for Java EE Developers 版本:2.0.0.20130613-0530]. ...
- 打印 上一主题 下一主题 利用cURL实现单个文件分多段同时下载，支持断点续传(修订版)
利用cURL实现单个文件分多段同时下载,支持断点续传(修订版) [复制链接] 摘自 http://bbs.chinaunix.net/thread-917952-1-1.html 在ubuntu下 ...
- hdu 5620 KK's Steel（推理）
Problem Description Our lovely KK has a difficult mathematical problem:he has a N(1≤N≤1018) meters s ...
- STL map+vector+struct的使用示例
个人编写的小例子,没有注释,刚毕业时作为技术调研随手编写,仅供参考: #include<iostream> #include<map> #include<vector&g ...
- BPM7.5.1升级细节，万事开头难
背景:Linux5.9,BPM 7.5.0集群环境,内置WAS ND7.0.0.17 详情见上图 故障现象:升级BPM 7.5.1集群环境 1,按照 IBM 信息中心步骤,升级BPM需下载相应补丁 包 ...
- 张冬：OpenPOWER CAPI为什么这么快？(二）
张冬:OpenPOWER CAPI为什么这么快?(二) PMC公司数据中心存储架构师张冬 有了CAPI的FPGA是怎么做的? 首先认识一下这个体系里的三个角色: AFU(Acceleration ...
- 【MFC初学】
void CMy322Dlg::OnButton1() { UpdateData(TRUE); m_crypt=m_plaintxt; for(int i=0;i<m_plaintxt.GetL ...