JavaScript中DOM操作标签属性-CFANZ编程社区

JavaScript中DOM操作标签属性

标签支持的可以直接操作的属性

每种标签都支持的可以直接操作的属性
id id属性
className class属性
title title属性

操作语法
设定
标签对象.id = 属性值
标签对象.className = 属性值
标签对象.title = 属性值
获取
var 变量 = 标签对象.id ;
var 变量 = 标签对象.className ;
var 变量 = 标签对象.title ;

<body>
    <div class="box"></div>
    <script>
        const oDiv = document.querySelector("div");
        oDiv.id = "BOX";
        var cla = oDiv.className;
        console.log(cla);
    </script>
</body>

运行代码：

标签支持的布尔属性

默认选中多选只读禁用 ....
设定
标签对象.布尔属性 = 属性值
获取
var 变量 = 标签对象.属性属性
布尔属性操作的结果不管是设定还是获取一定是布尔数值( true / false )
执行是 true
不支持是 false

标签属性的通用操作方法布尔属性除外

所有标签的所有属性都可以使用的通用的操作方法
布尔属性除外
设定
标签对象.setAttribute( '属性' , 属性值 );
获取
var 变量 = 标签对象.getAttribute( '属性' );
删除
标签对象.removeAttribute( '属性' );

<body>
    <div class="box" id = "box"></div>
    <script>
        // 获取标签对象
        const oDiv = document.querySelector("div");
        // 设定
        oDiv.setAttribute('name',456);
        // 获取
        var cla = oDiv.getAttribute('class')
        console.log(cla);
        // 删除
        oDiv.removeAttribute('id');
    </script>
</body>

运行结果：