03 JS-DOM之--节点属性操作方法（2种）附案例源码

最新推荐文章于 2024-07-18 00:39:55 发布

喝着绿茶的猫

最新推荐文章于 2024-07-18 00:39:55 发布

阅读量1.3k

点赞数

分类专栏： JavaScript-DOM 文章标签： dom

本文链接：https://blog.csdn.net/luyu13141314/article/details/53396787

版权

本文详细介绍了JavaScript操作DOM节点的属性方法，包括通过dom对象.属性和dom对象.get/set/removeAttribute()方式，以及不同类型的属性操作，如常规属性、表单属性和style属性，并提供了相关案例源码链接。

摘要由CSDN通过智能技术生成

属性操作两种方法：

1、 dom对象.属性 == dom对象[属性] ;

2、 dom对象.get/set/removeAttribute()

获取属性：dom对象.getAttribute(名称)

设置属性：dom对象.setAttribute(名称, 值)

删除属性：dom对象.removeAttribute(名称)

  //案例-body代码
 <body>
 <a href="#" class="show" title="a标签">我是a链接</a>
 </body>

1、dom对象.属性 == dom对象[属性] ;

【这两种方法的区别：

如果我们需要一个变量来绑定属性。那么使用[]方法比较好,变量方便随时修改或者替换其他的属性名。

第一种.属性无法识别变量，无法修改。】

        //1.可以设置标签原有的属性
        var a = document.getElementsByTagName("a")[0];
        console.log(a.title);//a标签
        a.title = "我是b标签"；
        console.log(a.title);//我是b标签



        //2.也可以设置标签没有的属性.如果设置标签没有的属性，将以对象的自定义属性形式存在。不出现在标签上.
        a.className = "hide";
        console.log(a.className);
        a.aaa = "我是aaa";
        console.log(a.aaa)