转自：http://my.oschina.net/felay/blog/303470

<!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操作

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. ready是先执行的，load后执行，DOM文档的加载步骤

    在jq中在文档载入完毕后有这几种方式去执行指定函数: $(document).ready(function() { // ...代码... }); //document ready 简写 $(func ...

  3. 利用Qt Assistant 定制帮助文档

    为了将Qt Assistant定制为自己应用程序的帮助文档浏览器.需要完成以下几步: 一.导入HTML格式的帮助文档 (1)首先,针对自己的应用程序创建HTML格式的帮助文档,请参见<Doxyg ...

  4. JavaScript中的window对象的属性和方法；JavaScript中如何选取文档元素

    一.window对象的属性和方法 ①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行. ②setIn ...

  5. 利用Java动态生成 PDF 文档

    利用Java动态生成 PDF 文档,则需要开源的API.首先我们先想象需求,在企业应用中,客户会提出一些复杂的需求,比如会针对具体的业务,构建比较典型的具备文档性质的内容,一般会导出PDF进行存档.那 ...

  6. JavaScipt选取文档元素的方法

    摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 选 ...

  7. VS2010/MFC编程入门之二（利用MFC向导生成单文档应用程序框架）

    VS2010/MFC编程入门之二(利用MFC向导生成单文档应用程序框架)-软件开发-鸡啄米 http://www.jizhuomi.com/software/141.html   上一讲中讲了VS20 ...

  8. springboot项目利用Swagger2生成在线接口文档

    Swagger简介. Swagger2是一款restful接口文档在线生成和在线调试工具.很多项目团队利用Swagger自动生成接口文档,保证接口文档和代码同步更新.在线调试.简单地说,你可以利用这个 ...

  9. WORD中引用活动文档元素

    要引用活动的段落.表格.域或其他文档元素,可使用 Selection 属性返回一个 Selection 对象.通过 Selection 对象,可访问选定内容中的所有段落或第一段.下列示例将边框应用于选 ...

随机推荐

  1. bzoj 3473 后缀自动机多字符串的子串处理方法

    后缀自动机处理多字符串字串相关问题. 首先,和后缀数组一样,用分割符连接各字符串,然后建一个后缀自动机. 我们定义一个节点代表的字符串为它原本代表的所有串去除包含分割符后的串.每个节点代表的字符串的数 ...

  2. git零基础【慢慢补充】

    git branch dev   //创建新分支 git checkout dev   //切换到新分支 git add .  //把当前修改加到暂存区 git commit -m "代码描 ...

  3. tsinsen A1067. Fibonacci数列整除问题 dp

    A1067. Fibonacci数列整除问题 时间限制:1.0s   内存限制:512.0MB   总提交次数:2796   AC次数:496   平均分:51.83 将本题分享到:     查看未格 ...

  4. WIKIOI 1026 逃跑的拉尔夫 深度优先搜索

    /* 1026 逃跑的拉尔夫 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold       题目描述 Description 年轻的拉尔夫开玩笑地从一个小镇上偷走了一辆 ...

  5. java 程序消耗 cpu 100% 查找方法

    问题原因:由于HashMap是非线程安全的,在多线程访问时,造成死循环. 查找问题方法: 1. top 找出最耗费cpu的进程号 如:27377 2. top -p 27377 -H 找出此进程下的所 ...

  6. 2013Esri全球用户大会之ArcGIS for Server&Portal for ArcGIS

    Q1:ArcGIS 10.2 for Server有哪些新特性? ArcGIS 10.2对于ArcGIS for Server来说是一个引人注目的版本.它建立在ArcGIS 10.1扎实雄厚的基础上, ...

  7. How to check Ubuntu version

    Below you can find some tips on how to check Ubuntu version you are currently running. The first pla ...

  8. authentication not supported Connect to TFS Git from Xamarin Studio (non-hosted, locally installed TFS 2013)

    There are several instructions on how to connect to TFS Git from Xamarin Studio if you're using the ...

  9. App Store常用推广方法

    转:http://www.cocoachina.com/bbs/read.php?tid-5000.html 天天潜水,在这里获益不少.不贡献一点似乎过意不去,所以在这里根据自己的经验谈谈基本的推广方 ...

  10. C语言函数库

    C语言函数库 分类函数目录函数进程函数诊断函数接口子程序输入输出 str字符串操作函数mem操作存贮数组 数学函数 时间日期函数 转换函数 分类函数,所在函数库为ctype.h[top] int is ...