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

本文详细介绍了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元素内点击文本,就会出发此控件。
也就是说,用户选择此标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

案例源码下载地址: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常用属性

  • backgroundColor
  • backgroundImage
  • color
  • width
  • height
  • border
  • opacity (IE8以前filter: alpha(opacity=xx))

注意:DOM对象style的属性和标签中style内的值不一样,因为在JS中-不能作为标识符

在 DOM中 写法: backgroundColor

在 CSS中 写法: background-color
这里写图片描述

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值