读取和修改DOM元素属性的方法

在网页开发中，操作DOM（文档对象模型）元素属性是一项基础且关键的技能。通过读取和修改DOM元素属性，我们能够实现各种交互效果，提升用户体验。

读取DOM元素属性，是获取网页元素相关信息的过程。可以使用getAttribute()方法。例如，有一个<a>标签，其href属性指向某个链接：<a id="myLink" href="https://example.com">点击访问</a>。在JavaScript中，我们可以这样获取它的href属性值：

const myLink = document.getElementById('myLink');
const linkHref = myLink.getAttribute('href');
console.log(linkHref); 

另外，对于HTML原生属性，还能直接通过元素对象的属性来访问。比如，<input>标签的value属性，<input type="text" id="myInput" value="初始值">，可以用document.getElementById('myInput').value来获取输入框的值。

而修改DOM元素属性，则是根据需求改变元素的外观、行为等。使用setAttribute()方法能方便地修改属性值。继续以刚才的<a>标签为例，如果要将链接修改为新的地址：

const myLink = document.getElementById('myLink');
myLink.setAttribute('href', 'https://new-example.com');

对于一些布尔属性，像<input>标签的checked属性，要使其选中，可以直接设置为true。例如：<input type="checkbox" id="myCheckbox">，在JavaScript里document.getElementById('myCheckbox').checked = true;就能让复选框被选中。

修改CSS相关属性来改变元素样式也是常见操作。比如，想让一个元素隐藏，可以修改其style属性：<div id="myDiv">这是一个div</div>，document.getElementById('myDiv').style.display = 'none';就能让该div元素隐藏起来。

掌握读取和修改DOM元素属性的方法，能让开发者灵活地控制网页内容的呈现和交互。无论是简单的页面效果调整，还是复杂的动态功能实现，这些方法都是不可或缺的基础。不断实践和熟练运用，将有助于开发出更加精彩、功能强大的网页应用。