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

最新推荐文章于 2022-08-13 22:39:14 发布

原创最新推荐文章于 2022-08-13 22:39:14 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#dom

JavaScript-DOM 专栏收录该内容

9 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

属性操作两种方法：

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);



        //3.可以赋值获取但是无法删除属性，只能将属性设置为""
        a.title = "";

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

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

     //2.如果设置标签没有的属性，将以对象的自定义属性形式存在。出现在标签上.
      a.setAttribute("class","hide");
      a.setAttribute("bbb","bbb");


     //3.可以删除属性。removeAttrbute()方法连带属性一起删除。
     a.removeAttribute("href");
     a.removeAttribute("title");

注意：

两种方法自定义的属性(非标签自带)，不能相互交叉设置获取。谁设置的谁用。

设置类：class。不能用className

属性类型：

（在这里为了方便学习记忆，我分为三类。）

1、常规属性

2、表单属性

3、style属性

1、常规属性操作：

普通属性数据类型一般都是string

title、src（src属性不能直接获取）

href、innerHTML、className(class属性比较特殊。因为class是关键字，所以class属性在js中为className;)

之所以把href放在第二排，是因为href的值有点特殊：

1. href=""——刷新页面
2. href="#"——跳转到当前页面的最顶端
3. href="javaScript：； " ——禁用a链接点击
4. href="javascript:void(0)；"

这里写图片描述

切换图片（技术点：需要解决a链接页面跳转的问题。解决办法：return false; a链接默认的跳转被关闭。）

案例源码下载地址：https://github.com/luyu1314/03-DOM-case

2、表单属性操作

- type、value

- checked、selected、disabled————表单属性的数据类型很多是布尔类型值

（注：checkbox选中checked、option选中selected、文本框input禁用disabled）

这里写图片描述

注：
案例12– 淘宝/京东获取焦点:
标签为input元素定义标记。label元素不会向用户呈现任何特殊效果，不过，它为鼠标用户增进了可用性。如果您在label元素内点击文本，就会出发此控件。
也就是说，用户选择此标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。

案例源码下载地址：https://github.com/luyu1314/03-DOM-case

3、style属性操作

style属性的数据类型是对象object ！

      //body案例

     <style>
        div {
            border: 10px solid #000;
        }
    </style>

     <body>

    <div id="box" title="我是div" style="width: 100px;height: 100px;background-color: pink;">我是div的内容</div>

    </body>

1.className和style都可以设置样式。

样式少的时候使用style。样式多的时候用class.

div.className——样式多的时候放进一个class里
div.style.属性——既可以获取值，又可以赋值

2.style是对象(方便获取样式中的每一个属性和对应的值)

    console.log(typeof div.title);//string（第一种普通属性）
    console.log(typeof div.id);//string
    console.log(typeof div.innerHTML);//string

    console.log(typeof div.style);//object

    console.log( div.style.height);//获取属性相应值
    console.log(div.style.backgroundColor);//获取属性相应值

3.style属性值是字符串，没有设置值是空字符串”“；

    console.log(typeof div.style.width);//string
    console.log(div.style.top);//空字符串
    console.log(11+div.style.top+22);//1122

4.命名规则，驼峰命名。和css不一样（CSS书写样式是background-color，CSS都是用-连接）

console.log(div.style.backgroundColor);

5.无论是设置还是获取只能操作行内式。（只和行内式交互，和内嵌和外链无关）

console.log(div.style.border);//空字符串，因为是内嵌样式
console.log(div.style.border);//100px

6.box.style.cssText = “字符串形式样式”；

让盒子的行内样式以字符串形式存在。（可赋值，可获取值）

console.log(div.style.cssText);//width: 100px; height: 100px; background-color: pink;

//赋值
div.style.cssText = "width: 300px; height: 300px; background-color: red;";

7.style常用属性