怎么使用JavaScript操作DOM元素属性？

31次阅读

操作DOM属性的核心是区分Attribute与Property：Attribute指HTML标签上的原始字符串属性，通过getAttribute</code></code></code>、setAttribute</code></code></code></code>等方法操作；Property是DOM对象的JavaScript属性，可直接访问如class</code>='language-default'>class</code></code>='language-default'>element.class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>id</code></code></code></code></code>、element.class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>value</code></code></code></code></code>。前者适用于自定义属性或需操作HTML结构的场景，后者更高效且能反映实时状态，尤其适合表单元素和常用属性。对于data-*属性，推荐使用class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>dataset</code></code> API；样式操作应通过style</code>.property进行。注意避免混淆两者导致的状态错误，优先使用Property提升性能与可维护性。</blockquote>

class</code>='language-default'>class</code></code>='language-default'>src</code></code>="https://img.php.cn/upload/article/001/253/068/175844610263587.png" alt="怎么使用JavaScript操作DOM元素属性？"></p>

JavaScript操作DOM元素属性的核心，无非就是围绕着获取、设置、移除和检查这几大需求。最直接且常用的方法是利用

style</code>="position:relative; padding:0px; margin:0px;">

class</code>='language-default'>class</code></code>='language-default'>getAttribute</code></code></code>()</code></pre>
</div></div>、
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>setAttribute</code></code></code></code>()</code></pre>
</div></div>、
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>removeAttribute</code>()</code></pre>
</div></div>和
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>hasAttribute()</code></pre>
</div></div>这套API，它们能够让你直接与HTML元素上的那些“原始”属性打交道。当然，对于很多常用属性，JavaScript也提供了更便捷的直接属性访问方式，比如
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>element.class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>id</code></code></code></code></code></pre>
</div></div>、
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>element.class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>Name</code></code></pre>
</div></div>，甚至是
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>element.style</code>.color</code></pre>
</div></div>等等，这些往往更符合我们日常编程的直觉。</p> 
要操作DOM元素的属性，我们主要有以下几种途径，每种都有其适用场景和一些我个人觉得需要注意的细节：</p> 
1. 获取属性值：
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>element.getAttribute</code></code></code>(name)</code></pre>
</div></div></strong> 这个方法非常直接，它会返回指定属性的字符串值。如果属性不存在，则返回
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>null</code></pre>
</div></div>。</p>
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>const myDiv = document.getElementById('myDiv'); const class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>id</code></code></code></code> = myDiv.getAttribute</code></code></code>('class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>id</code></code></code></code>'); // 获取class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>id</code></code></code></code>属性 const dataValue = myDiv.getAttribute</code></code></code>('data-custom'); // 获取自定义data属性 console.log(class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>id</code></code></code></code>, dataValue);</code></pre>
</div></div>
2. 设置属性值：
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>element.setAttribute</code></code></code></code>(name, class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>value</code></code></code></code></code>)</code></pre>
</div></div></strong> 这个方法用于设置指定属性的值。如果该属性已经存在，它的值会被更新；如果属性不存在，则会创建该属性。
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>value</code></code></code></code></code></pre>
</div></div>参数会被自动转换为字符串。</p>
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>const myImg = document.querySelector('img'); myImg.setAttribute</code></code></code></code>('class</code>='language-default'>class</code></code>='language-default'>src</code></code>', 'new-image.jpg'); // 设置图片的class</code>='language-default'>class</code></code>='language-default'>src</code></code> myImg.setAttribute</code></code></code></code>('alt', '一张漂亮的风景图'); // 设置alt文本 myImg.setAttribute</code></code></code></code>('data-class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>id</code></code></code></code>', '12345'); // 设置自定义data属性</code></pre>
</div></div>
3. 移除属性：
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>element.removeAttribute</code>(name)</code></pre>
</div></div></strong> 顾名思义，这个方法就是用来从元素中移除指定属性的。</p>
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>const myButton = document.querySelector('button'); myButton.removeAttribute</code>('class</code>='language-default'>class</code></code>='language-default'>disabled</code></code>'); // 移除按钮的class</code>='language-default'>class</code></code>='language-default'>disabled</code></code>属性，使其可点击 myButton.removeAttribute</code>('data-temp'); // 移除一个临时数据属性</code></pre>
</div></div>
4. 检查属性是否存在：
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>element.hasAttribute(name)</code></pre>
</div></div></strong> 这个方法会返回一个布尔值，指示元素是否拥有指定的属性。</p>
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>const myInput = document.getElementById('myInput'); if (myInput.hasAttribute('required')) { console.log('这个输入框是必填的。'); }</code></pre>
</div></div>
5. 直接访问DOM属性（Property）</strong> 对于很多常见的HTML属性，DOM元素对象上都有对应的JavaScript属性（Property）。这包括
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>id</code></code></code></code></pre>
</div></div>、
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>Name</code></pre>
</div></div>、
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>src</code></code></pre>
</div></div>、
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>href</code></code></pre>
</div></div>、
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>value</code></code></code></code></code></pre>
</div></div>、
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>checked</code></code></code></code></code></code></pre>
</div></div>、
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>disabled</code></code></pre>
</div></div>等等。这些属性通常更方便，而且它们处理的值类型也更灵活（不总是字符串）。</p>
style</code>="position:relative; padding:0px; margin:0px;">
const myHeading = document.querySelector('h1'); myHeading.class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>id</code></code></code></code> = 'mainTitle'; // 设置class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>id</code></code></code></code> myHeading.class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>Name</code> = 'highlight important'; // 设置class</code>='language-default'>class</code></code> myHeading.textContent</code> = '新的标题文本'; // 设置文本内容，这其实不是属性，但很常用 const myCheckbox = document.getElementById('myCheckbox'); myCheckbox.class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>checked</code></code></code></code></code></code> = class</code>='language-default'>class</code></code>='language-default'>true</code>; // 设置复选框为选中状态（布尔值） myCheckbox.class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>value</code></code></code></code></code> = 'optionA'; // 设置输入框的值 const myLink = document.querySelector('a'); myLink.class</code>='language-default'>class</code></code>='language-default'>href</code></code> = 'https://www.example.com'; // 设置链接地址</pre>
</div></div>
值得一提的是，对于CSS样式，我们通常通过
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>element.style</code>.propertyName</code></pre>
</div></div>来操作，而不是
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>setAttribute</code></code></code></code>('style</code>', '...')</code></pre>
</div></div>，后者会覆盖所有原有内联样式。</p>
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>const myParagraph = document.querySelector('p'); myParagraph.style</code>.color = 'blue'; myParagraph.style</code>.fontSize = '18px';</code></pre>
</div></div>
*6. 使用
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>dataset</code></code></pre>
</div></div> API操作`data-</em>
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>自定义属性** HTML5引入了</code></pre>
</div></div>data-*
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>属性，允许我们在HTML元素上存储自定义数据。JavaScript通过</code></pre>
</div></div>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>dataset</code></code>`属性提供了一个非常方便的API来操作这些属性。</p> 
立即学习</span>“class</code>='language-default'>class</code></code>='language-default'>href</code></code>="https://pan.quark.cn/s/c1c2c2ed740f" style</code>="text-decoration: underline !important; color: blue; font-class</code>='language-default'>class</code></code>='language-default'>weight</code>: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>
style</code>="position:relative; padding:0px; margin:0px;">
<div class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>id</code></code></code></code>="userProfile" data-class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>id</code></code></code></code>="101" data-name="Alice" data-status="active"></div></pre>
</div></div>
style</code>="position:relative; padding:0px; margin:0px;">
const userProfile = document.getElementById('userProfile'); console.log(userProfile.class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>dataset</code></code>.class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>id</code></code></code></code>); // "101" console.log(userProfile.class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>dataset</code></code>.name); // "Alice" userProfile.class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>dataset</code></code>.status = 'inactive'; // 设置data-status="inactive" userProfile.class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>dataset</code></code>.lastLogin = Date.now(); // 添加新的data-last-login属性</pre>
</div></div>
我个人觉得，对于自定义数据，
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>class</code>='language-default'>class</code></code>='language-default'>dataset</code></code></pre>
</div></div> API是首选，它比
style</code>="position:relative; padding:0px; margin:0px;">
class</code>='language-default'>class</code></code>='language-default'>getAttribute</code></code></code>/setAttribute</code></code></code></code></code></pre>
</div></div>更语义化，也更安全。</p> 
JavaScript DOM操作中，元素的“属性（Attribute）”和“特性（Property）”有什么本质区别</a>？</h3> 
这其实是个老生常谈但又容易犯错的地方，很多初学者都会混淆。简单来说，属性（Attribute）</strong>是HTML文档中的东西，是你在HTML标签里写出来的那些键值对。而特性（Property）</strong>是JavaScript DOM对象中的东西，是你在JavaScript代码里访问的那些对象成员。它们虽然经常互相映射，但本质上是两回事。</p> 
想象一下：</p>