zoukankan      html  css  js  c++  java
  • getAttribute() 与 attr() 的区别

     getAttribute() 和 attr() 都是获取元素属性的方法,只是一种是 JS 写法,一种是 JQ 写法,但其实它们是有区别的。

    主要区别

    调用 getAttribute() 的主体必须是元素(Element) 

    getAttribute():返回属性值,是一个文本字符串
    getAttributeNode("属性名"):返回属性节点,是一个对象
    调用 attr() 的主体必须是对象(Object)

    JS写法:getAttribute()

    getAttribute() 是元素(Element)下的一种方法,因此想调用这个方法,必须确保它的调用主体是元素,否则会报错。

    正确使用方式:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
        </head>
        <body>
            <div id="test" custom="hello"></div>
            <script type="text/javascript">
                var div = document.getElementById('test');
                //获取的div是[object HTMLDivElement]
                alert(div.getAttribute('custom'));
            </script>
        </body>
    </html>
    • 错误使用方式:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
        </head>
        <body>
            <div id="test" custom="hello"></div>
            <script type="text/javascript">
                var div = $('#test');
                //获取的div是[object Object]
                alert(div.getAttribute('custom'));
            </script>
        </body>
    </html>
    • 通过 JQ 选择器获取 div,此时的 div 是对象(Object)也就无法调用 getAttribute() 方法,浏览器(Safari)会报错如下:

    TypeError: div.getAttribute is not a function. (In ‘div.getAttribute(‘custom’)’, ‘div.getAttribute’ is undefined)

    JQ写法:attr()

    Get the value of an attribute for the first element in the set of matched elements.

    jQuery API Documentation 中对 attr() 方法——准确说是 attr( attributeName ) 方法的描述是“获取一组相匹配元素中首个元素的属性值”。 
    描述中的“一组元素”应该指的是对象(Object),而不是多个元素组成的集合(HTMLCollection),因为如果方法的执行主体是集合,浏览器同样会报错:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        </head>
        <body>
            <div class="test" custom="hello"></div>
            <div class="test" custom="hi"></div>
            <script type="text/javascript">
                var div = document.getElementsByClassName('test');
                //获取的div是[object HTMLCollection]
                alert(div.attr('custom'));
            </script>
        </body>
    </html>
    • 正确使用方式:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        </head>
        <body>
            <div class="test" custom="hello"></div>
            <div class="test" custom="hi"></div>
            <script type="text/javascript">
                var div = $('.test');
                //获取的div是[object object]
                alert(div.attr('custom'));
            </script>
        </body>
    </html>

    1. setAttribute(attributename,attributename) 方法添加指定的属性,并为其赋指定的值。

    属性可以是自定义的属性,如果这个指定的属性已存在,则仅设置/更改值

    2. getArribute(attributename);获取某个属性的值;返回值为string类型

    注:attributename,value都是字符串类型

    3. attributes;返回元素属性的 NamedNodeMap(返回所有属性的集合,如果通过该方法获取属性,obj.attributes['attr'])

    注:Internet Explorer 8 以及更早的版本中,attributes 属性将返回元素所有可能的属性的集合,即会返回所有隐藏的属性

    attributes中的属性可以通过数组的方式来获取对应的属性值

    1.  
      <input type="text" id="txtMsg" myAttr="abc" />
    2.  
      var myAttr = document.getElementById("txtMsg").attributes["myAttr"].value; //通过attributes属性
    3.  
      var myAttr = document.getElementById("txtMsg").getAttribute("myAttr"); //使用getAttribute方法
    4.  
      document.getElementById("txtMsg").setAttribute("myAttr", "newValue"); //通过setAttribute方法设置属性的值
    5.  
      var myAttr = document.getElementById("txtMsg").attributes["myAttr"].value; //通过attributes属性
    6.  
      var myAttr = document.getElementById("txtMsg").getAttribute("myAttr"); //使用getAttribute方法
       

      Python 模块(Module) 有2种导入方法—— import 和 from … import。尽管它们都是能够导入模块,但它们各自导入后的引用、调用方法却不一样。

      下面是一个简单的的模块 support.py,我们通过它来演示2种导入方法的区别:

      def print_func( par ):
          print "Hello : ", par
          return

      使用 import 引入并调用 support 模块的正确方法:

      #!/usr/bin/python
      # -*- coding: UTF-8 -*-
      
      # 导入模块
      import support
      
      # 现在可以调用模块里包含的函数了
      support.print_func("Runoob")
      • 提示:并不能直接使用 print_func() 实现调用,必须将引入的模块名称当作一个对象,调用这个模块对象下的方法 print_func,这时才能实现调用。

      使用 from … import 模块的正确方法:

      #!/usr/bin/python
      # -*- coding: UTF-8 -*-
      
      # 导入模块
      from support import *
      
      # 现在可以调用模块里包含的函数了
      print_func("Runoob")
      • 提示:可以直接使用 print_func() 实现调用。

      笔者建议

      一般来说,推荐使用 import 语句,避免使用 from … import,因为这样会使你的程序更加易读,也可以避免名称冲突。

     
  • 相关阅读:
    每日站立会议(八)
    第八周学习进度
    每日站立会议(七)
    Failed to get convolution algorithm. This is probably because cuDNN failed to initialize
    Ubuntu系统tensorflow-gpu版本配置
    二值图片批量阈值处理
    提取文件中的每一个mask,并将mask命名为文件名字
    python对图片批量命名
    Win10系统下安装labelme,json文件批量转化
    Win10,Anaconda,tensorflow-gpu安装教程
  • 原文地址:https://www.cnblogs.com/klb561/p/9307896.html
Copyright © 2011-2022 走看看