转自：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. [BZOJ4592][SHOI2015]脑洞治疗仪(线段树)

    线段树基础操作题,唯一需要思考下的是将区间的前k个0覆盖为1. 线段树上二分,先递归到左子树覆盖,回溯时返回还剩多少个0未被覆盖,在根据这个信息递归到右子树.注意特判k=0的情况. 要维护的信息有:区 ...

  2. nginx_lua vs nginx+php 应用场景

    在我的印象中很多人还是选择nginx+php这种组合搭配,你的选择是nginx+lua,那么nginx+lua比和php的组合优势在哪里?清无:首先,Nginx+php之间是要有进程之间通信的,这样以 ...

  3. BZOJ 2743: [HEOI2012]采花 离线树状数组

    2743: [HEOI2012]采花 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=2743 Description 萧芸斓是Z国的公主, ...

  4. 读书笔记_Effective_C++_条款三十四：区分接口继承和实现继承

    这个条款书上内容说的篇幅比较多,但其实思想并不复杂.只要能理解三句话即可,第一句话是:纯虚函数只继承接口:第二句话是:虚函数既继承接口,也提供了一份默认实现:第三句话是:普通函数既继承接口,也强制继承 ...

  5. SMACH（五）----用户数据UserData类和重映射Remapper类的原理和例子

    用户数据UserData类和重映射Remapper类包含在smach中的user_data.py文件中实现,该博文主要介绍其原理和例子 UserData主要用于状态之间的数据传递,包括数据的输入inp ...

  6. Git_时光机穿梭

    我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: Git is a distributed version c ...

  7. AFNetworking 2.0使用(持续更新)

    本人视频教程系列 导入AFNetworking 2.0 文件夹,引入头文件AFNetworking.h --------------- *使用NSURLSessionDownloadTask来下载一张 ...

  8. eclipse在Windows7 64 位下出现Unhandled event loop exception No more handles

    1..如果不影响工程正常发布运行,就不要管他了2.工作空间有毛病.把workspace的.metadata删了3.把eclipse重装下.一般第二步能解决大多数问题.

  9. 在windows上搭建C语言开发环境——借助eclipse和MinGW

    0. 前言     [本文目的]     近期在电脑上又一次安装了MinGW,发现MinGW的安装方法和之前的方法稍有差别,全部再写了一篇博文记录一下具体的安装方法.     [本文主要内容]     ...

  10. 【视频分享】Liger UI实战集智建筑project管理系统配商业代码(打印报表、角色式权限管理）

    QQ 2059055336 课程讲师:集思博智 课程分类:.net 适合人群:中级 课时数量:23课时 用到技术:Liger UI框架.AJAX.JSON数据格式的序列化与反序列化.角色的交叉权限管理 ...