zoukankan      html  css  js  c++  java
  • js,关于为DOM对象添加自定义属性

        DOM对象对于js来说,是个很基础的元素,我们写js一般来说,都一定会对它进行操作。我们可以很方便地给它加上自定义的属性,比如:

    <div id="test" class="hello"></div>

    var test = document.getElementById("test");

    test.adang = "adang";

    alert(test.adang);

    我们会发现,已经给这个id为test的DOM元素添加了一个叫做adang的属性了,然后在js中,可以调用这个属性。我在写js的时候经常用到这种方法,可以很方便地对某个dom对象添加一些特殊的数据,感觉DOM对象就像一个很好用的容器,可以放一堆数据进去。

    进一步想到一个问题,这些属性可以在js中添加,那么是否可以像flex一样,在标签中添加呢?事实上,像id啊,src啊这样的属性,都是可以在js中添加,也可以在标签上添加的,两种方式js都可以获取数据。这里要说一点,class比较特殊,标签中用的是class,在js中调用却要用className才行。

    像id啊,title,src此类html中支持的属性,可以在标签中设置,然后js访问。那么,如果是像我上面例子中的adang这样自定义的属性呢?DOM可以访问吗?做了个实验,如下:

    =======================test===========================

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> new document </title>
    <meta name="generator" content="editplus" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    </head>
    <script type="text/javascript">
    window.onload=function(){
       var test = document.getElementById("test");
       test.adang = "adang";
       alert(test.adang);
    }
    </script>
    <body>
    <div id="test"></div>
    </body>
    </html>
    =====================================================

    用js来扩展自定义属性,结果很正常地输出了我们想要的结果,IE和FF下都正常。

    然后我又写了第二段代码,如下:

    =========================test==========================

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> new document </title>
    <meta name="generator" content="editplus" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    </head>
    <script type="text/javascript">
    window.onload=function(){
       var test = document.getElementById("test");
       alert(test.adang);
    }
    </script>
    <body>
    <div id="test" adang="adang"></div>
    </body>
    </html>
    =====================================================

    这次把扩展的属性写到了html标签上。IE下正常输出adang,FF下输出的是undefined。

    但是很奇怪的,如果使用DOM提供的方法getAttribute(""),无论是在IE下,还是FF下,都可以得到我们写在标签中的自定义属性。

    所以,为了兼容,我们要使用getAttribute("")来获取自定义的标签属性的值。

  • 相关阅读:
    LeetCode First Bad Version (二分查找)
    LeetCode Permutations II (全排列)
    LeetCode Permutations (全排列)
    LeetCode Minimum Path Sum (简单DP)
    LeetCode Binary Tree Postorder Traversal(数据结构)
    LeetCode Sort Colors (技巧)
    邹忌
    参数传递
    父子窗体返回值与互操作
    其他数据库连接
  • 原文地址:https://www.cnblogs.com/cly84920/p/4427125.html
Copyright © 2011-2022 走看看