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

在网页开发中，操作 DOM（文档对象模型）元素的 Property 属性是一项基础且重要的技能。了解如何读取和修改这些属性，能够让开发者根据用户交互和业务逻辑动态地更新网页内容，提供更流畅的用户体验。

首先来看看如何读取 DOM 元素的 Property 属性。在 JavaScript 中，可以通过多种方式获取 DOM 元素，比如使用 document.getElementById()、document.getElementsByTagName() 或 document.querySelectorAll() 等方法。获取到元素后，直接访问其属性即可读取。例如，对于一个 <input> 元素，要读取其 value 属性，可以这样做：

const inputElement = document.getElementById('myInput');
const inputValue = inputElement.value;
console.log(inputValue); 

上述代码中，先通过 getElementById 获取了指定 id 的输入框元素，然后访问其 value 属性，将输入框的值存储在 inputValue 变量中，并打印到控制台。

除了基本的属性，一些特殊的属性也可以通过类似方式读取。比如 checked 属性用于判断复选框或单选框是否被选中：

const checkboxElement = document.getElementById('myCheckbox');
const isChecked = checkboxElement.checked;
console.log(isChecked); 

接下来谈谈修改 DOM 元素的 Property 属性。同样是获取元素后，对其属性进行赋值操作。若要修改上述输入框的值，可以这样写：

const inputElement = document.getElementById('myInput');
inputElement.value = '新的输入值';

对于 checked 属性，也能轻松修改状态：

const checkboxElement = document.getElementById('myCheckbox');
checkboxElement.checked = true; 

对于一些自定义属性，也可以按照相同的原理操作。例如，给一个 <div> 元素添加了自定义属性 data - info，读取和修改的方法如下：

const divElement = document.getElementById('myDiv');
// 读取
const customInfo = divElement.dataset.info;
console.log(customInfo); 
// 修改
divElement.dataset.info = '新的自定义信息';

掌握读取和修改 DOM 元素 Property 属性的方法，是前端开发者构建动态网页的必备技能。无论是简单的表单交互，还是复杂的页面逻辑实现，这些方法都发挥着重要作用，能让网页根据不同的场景灵活展示和更新内容。