JavaScript DOM property和attribute的区别

LBruse
338 阅读2分钟

前言

本文章源自《JavaScript知识小册》专栏，感兴趣的话还请关注点赞收藏.

上一篇文章：《带你玩转JavaScript中的Callback Function、Promise、async/await》

下一篇文章《JavaScript中你所不知道的普通属性和排序属性》

准备

新建简单的HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="static/favicon.ico"/>
    <style type="text/css">
        .red {
            color: red;
        }
    </style>
</head>

<body>
<h1>JavaScript</h1>

    <div id="div1">div1</div>
    <div>div2</div>
    <div>div3</div>

</body>

</html>

页面展示如下

image.png

DOM Property

在使用JavaScript操作DOM对象时，会有一个property的概念。字面意思即属性。其实本质上只是代表了获取一个DOM元素，然后可以通过修改JS属性的方式来操作这个DOM对象的属性，它其实是一种形式。

比如说现在要修改id为div1的这个DOM对象的fontSize属性调整字体大小，那么只需要获取DOM对象，然后通过DOM对象.style.fontSize=xxx的形式来修改，这个时候其实就是通过JavaScript修改DOM对象的property(属性)来达到想要的效果。

const div1 = document.getElementById('div1')
console.log(div1.style.fontSize) // 输出原先的fontSize，因为没有人为设置，所以输出空字符
div1.style.fontSize = '60px' // 修改div1 DOM对象的fontSize属性(property)为60px
console.log(div1.style.fontSize) // 输出60px

fontSize property修改完毕后，前端相应的字体大小也发生变化

image.png

除了修改fontSize这种CSS属性外，还可以修改DOM对象的CSS类名

加上CSS代码

<style type="text/css">
    .red {
        color: red;
    }
</style>

const div1 = document.getElementById('div1')
console.log(div1.style)

console.log(div1.style.fontSize)
div1.style.fontSize = '60px'
console.log(div1.style.fontSize)

div1.className = 'red' // 设置DOM对象的className属性

页面相应发生变化

image.png

image.png

可以看到property其实不是什么特别的API，只是一种形式，比如获取DOM对象后修改style.width、style.fontSize、style.height、className等等，这些都是在操作DOM对象的property，以修改页面元素的显示效果。

如果操作的是DOM对象原本不存在的property，那么不会有任何变化，HTML结构不会受影响。

div1.clazzName = 'ddiv'   // 添加DOM对象原本不存在的property
console.log(div1.clazzName) // 输出ddiv，但实际上网页渲染不会有任何变化

attribute

attribute跟property一样有属性的意思。只不过对attribute的操作，会真正作用到DOM结构树中，是可以被看到的。

比如设置style="font-size:100px;"(行内样式)，用设置attribute的形式如下

const div1 = document.getElementById('div1')
div1.setAttribute('fontSize', "100px")

image.png

并且可以看到DOM树的div1节点，是有style这个属性的

image.png

再设置一个自定义的node-name属性

div1.setAttribute('node-name', 'div1')

不会像property那样设置自定义属性基本不会实际影响到DOM节点，而是实际地在div1这个标签节点上有node-name这个属性存在。

image.png

总结

property是通过JS修改DOM对象的属性，不会体现到HTML结构中，而修改attribute则是会实际对DOM元素的HTML属性产生影响，会体现在HTML结构中。当然实际上修改两者，都有可能触发DOM的重新渲染。

avatar
文章
阅读
粉丝