zoukankan      html  css  js  c++  java
  • JavaScript学习笔记——DOM基础 2.2

    一、获取元素的属性值

    当你获取到你想要的元素,这并不是你的最终目的,下一步你需要获取这个元素的属性。

    1、getAttribute方法

    它的语法:object.getAttribute(attribute); 它返回的是你当前查找的元素的某一属性值。

    需要注意:它并不属于document对象,不能通过document对象直接调用,只能通过元素节点对象调用,对于这一点应该很好理解,如果可以通过document对象直接调用,那么getAttribute方法就没有什么存在的价值了。

    还有一点,在获取元素属性值的同时,需要注意可能出现的该元素节点下没有属性的特殊情况,可以通过判断是否为null来解决。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>筱雨生 - 博客园</title>
    </head>
    <body>
    <h1>筱雨生</h1>
    <p>時光飛逝,莫讓網絡蹉跎了歲月</p>
    <div id="myBlog">
    <ul>
    <li title="JavaScript">JavaScript</li>
    <li title="HTML">HTML</li>
    <li title="CSS">CSS</li>
    <li title="我的随笔">我的随笔</li>
    <li>其他</li>
    </ul>
    </div>
    <script>
    var myLabel = document.getElementsByTagName('li');
    for(var i=0; i<myLabel.length; i++){
        var myLabelAttribute = myLabel[i].getAttribute('title');
        if(myLabelAttribute != null){
        alert('title的内容是:' +myLabelAttribute);
        }
    }
    </script>
    </body>
    </html>

    2、获取任意元素中任意属性值的方法

    有了上面的代码,我们可以轻松的自定义一个方法来实现获取任意元素中任意属性值。 

    function getMyLabelAttribute(labelName,labelAttribute){
        var myLabel = document.getElementsByTagName(labelName);    
        for(var i = 0; i<myLabel.length; i++){
            var myLabelAttribute = myLabel[i].getAttribute(labelAttribute);
            if(myLabelAttribute){
                alert(labelName + '中' + labelAttribute + '的内容是' + myLabelAttribute);
            }
    }
    }
    getMyLabelAttribute('li','title');

    需要注意的是,自定义函数中,if的condition去掉了原来的!= null,两者是等价的关系,意思都是不为空。

    二、设置元素的属性值

    setAttribute方法

    语法:object.setAttribute( attribute, value);

    用来更改目标元素的属性值,与getAttribute相同,setAttribute也是作用于元素节点。

    var myLabel = document.getElementsByTagName('li');
    alert(myLabel[4].getAttribute('title'));
    var newAttribute = myLabel[4].setAttribute('title', 'JavaScript是一种若类型的编程语言');
    alert(myLabel[4].getAttribute('title'));

    通过上面这段代码可以看出,setAttribute方法可以为元素节点创建原本没有属性,并且可以设置它的值,正因如此,当我需要为一堆元素设置属性值的时候,我不需要知道它原来有没有这个属性和属性值。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>筱雨生 - 博客园</title>
    </head>
    <body>
    <h1>筱雨生</h1>
    <p>時光飛逝,莫讓網絡蹉跎了歲月</p>
    <div id="myBlog">
    <ul>
    <li title="JavaScript">JavaScript</li>
    <li title="HTML">HTML</li>
    <li title="CSS">CSS</li>
    <li title="我的随笔">我的随笔</li>
    <li>其他</li>
    </ul>
    </div>
    <script>
    var myLabel = document.getElementsByTagName('li');
    for(var i=0; i<myLabel.length; i++){
        var newLabelAttribute = [0,1,2,3,4];
        myLabel[i].setAttribute('title',newLabelAttribute[i]);
        alert(myLabel[i].getAttribute('title'));
    }
    </script>
    </body>
    </html>

    三、题外话

    只有基本功扎实,才可能发挥出你的潜质来。

  • 相关阅读:
    python argparse sys.argv
    python __all__
    一些方便系统诊断的bash函数
    yarn集群客户端gateway常用限制
    xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun
    Hadoop fs -put bandwidth 暴力版
    PYTHON SOCKET编程简介
    java实现点选汉字验证码(转)
    springboot配置log4j
    vue文字跑马灯效果
  • 原文地址:https://www.cnblogs.com/yushengxiao/p/4721516.html
Copyright © 2011-2022 走看看