转自：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. LuoguP5017 摆渡车 $dp$

    题意 戳这里 吐槽 听同学说今年\(pjT3\)很难,于是就去看了下. 一眼斜率优化...为什么\(n,m\)这么小啊... 感觉这题出的还是不错的. Solution 首先我们先转化一波题意:给出数 ...

  2. 【推导】【单调性】Petrozavodsk Winter Training Camp 2018 Day 1: Jagiellonian U Contest, Tuesday, January 30, 2018 Problem B. Tribute

    题意:有n个数,除了空集外,它们会形成2^n-1个子集,给你这些子集的和的结果,让你还原原来的n个数. 假设原数是3 5 16, 那么它们形成3 5 8 16 19 21 24, 那么第一轮取出开头的 ...

  3. hdu 3879 方案选择

    每日一水--- #include <cstdio> #include <cstring> #include <vector> #define oo 0x3f3f3f ...

  4. wikioi 1048 石子归并

    dp[i][j]=min(dp[i][j],dp[i][k],dp[k+1][j]+sum[i][j]); 表示i-j的最小合并代价. #include <iostream> #inclu ...

  5. 理解 JavaScript 中的 Function.prototype.bind

    函数绑定(Function binding)很有可能是你在开始使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其 ...

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

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

  7. ROS知识（10）----smach_viewer的Graph view不能显示状态图

    1.问题 在运行ROS by Example 2--Indigo版本中,运行 smach_viewer,再运行巡逻,命令如下: $ rosrun smach_viewer smach_viewer.p ...

  8. Git_标签管理

    发布一个版本时,我们通常先在版本库中打一个标签,这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取某个标签的版本,就是把那个打标签的时刻的历史版本取出来.所以,标签也是版本库的一个快照. Git ...

  9. SSM框架搭建问题

    环境: 1.eclipse  Kepler Service Release 2 2.jdk 1.8 64 3.maven 3.5 4.tomcat 8 问题:

  10. 点赞和吐糟Adblock Plus~进阶教程

    前言:Adblock Plus后文都简称ABP,这是一篇ABP进阶教程!用ABP实现flashBlock和NoScript.推荐有相当基础的阅读.刚開始学习的人先看懂这里:http://adblock ...