JavaScript DOM 属性
什么是 DOM 属性?
DOM(Document Object Model)属性是网页元素的特性,通过 JavaScript 可以获取和修改这些属性,从而动态改变网页内容、样式和行为。DOM 属性允许我们访问和操作 HTML 元素的各种特征,如文本内容、CSS 样式、元素尺寸等。
DOM 属性是 JavaScript 访问 HTML 元素各种特性的接口,通过属性我们可以"读取"和"修改"元素的状态。
常用 DOM 属性
1. 内容操作属性
这些属性允许我们获取和设置元素的文本内容或 HTML 内容:
innerHTML
innerHTML
属性获取或设置元素内部的 HTML 内容。
// 获取内容
const content = document.getElementById("myDiv").innerHTML;
// 设置内容
document.getElementById("myDiv").innerHTML = "<b>新的HTML内容</b>";
textContent
textContent
属性获取或设置元素的文本内容(不包含 HTML 标签)。
// 获取文本
const text = document.getElementById("myDiv").textContent;
// 设置文本
document.getElementById("myDiv").textContent = "这是纯文本内容";
innerText
innerText
类似于 textContent
,但它会考虑 CSS 样式,只返回可见文本。
document.getElementById("myDiv").innerText = "这是通过innerText设置的文本";
使用 innerHTML
设置内容时可能存在安全风险(XSS攻击),处理用户输入时应优先考虑使用 textContent
。
2. 属性操作方法
使用 getAttribute() 和 setAttribute()
这些方法用于获取和设置元素的 HTML 属性:
// 获取属性
const href = document.getElementById("myLink").getAttribute("href");
// 设置属性
document.getElementById("myLink").setAttribute("href", "https://example.com");
document.getElementById("myImage").setAttribute("alt", "一张示例图片");
直接访问属性
很多常见属性可以直接通过点符号访问:
// 获取和设置元素的id
const elementId = document.getElementById("myElement").id;
document.getElementById("myElement").id = "newId";
// 获取和设置元素的类名
const className = document.getElementById("myElement").className;
document.getElementById("myElement").className = "new-class";
3. 样式操作属性
style 属性
style
属性用于直接设置内联样式:
const element = document.getElementById("myElement");
// 设置样式
element.style.color = "blue";
element.style.backgroundColor = "yellow";
element.style.fontSize = "20px";
element.style.display = "none"; // 隐藏元素
classList
classList
提供了操作元素类名的方法:
const element = document.getElementById("myElement");
// 添加类
element.classList.add("highlight");
// 删除类
element.classList.remove("old-class");
// 切换类(有则删除,无则添加)
element.classList.toggle("active");
// 检查是否包含某个类
if (element.classList.contains("important")) {
console.log("这是一个重要元素!");
}
4. 元素尺寸和位置属性
尺寸属性
const element = document.getElementById("myElement");
// 获取元素高度和宽度(包含内边距和边框)
const offsetWidth = element.offsetWidth;
const offsetHeight = element.offsetHeight;
// 获取元素内容区域的高度和宽度(不包括内边距和边框)
const clientWidth = element.clientWidth;
const clientHeight = element.clientHeight;
位置属性
const element = document.getElementById("myElement");
// 获取元素相对于父元素的位置
const offsetLeft = element.offsetLeft;
const offsetTop = element.offsetTop;
// 获取元素相对于视口的位置
const rect = element.getBoundingClientRect();
console.log(`距离视口顶部: ${rect.top}px`);
console.log(`距离视口左边: ${rect.left}px`);
5. 表单元素特有属性
表单元素拥有一些特殊的属性:
const inputElement = document.getElementById("myInput");
const selectElement = document.getElementById("mySelect");
// 获取或设置输入框的值
console.log(inputElement.value);
inputElement.value = "新的输入值";
// 检查复选框或单选按钮是否被选中
const isChecked = document.getElementById("myCheckbox").checked;
document.getElementById("myRadio").checked = true; // 选中单选按钮
// 获取下拉菜单选中的值
const selectedValue = selectElement.value;
// 设置下拉菜单选中项
selectElement.value = "option2";
实际应用案例
案例1:动态切换样式
下面是一个通过按钮切换元素样式的示例:
<div id="targetBox" class="box">这是一个可以改变样式的盒子</div>
<button id="toggleBtn">切换样式</button>
<script>
document.getElementById("toggleBtn").addEventListener("click", function() {
const box = document.getElementById("targetBox");
// 切换高亮类名
box.classList.toggle("highlight");
// 变更文本
if (box.classList.contains("highlight")) {
box.textContent = "样式已激活!";
} else {
box.textContent = "这是一个可以改变样式的盒子";
}
});
</script>
案例2:表单验证
使用 DOM 属性实现简单的表单验证:
<form id="myForm">
<input type="text" id="username" placeholder="用户名 (至少5个字符)">
<span id="usernameError" style="color: red; display: none;">用户名太短</span>
<br />
<button type="submit">提交</button>
</form>
<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
const username = document.getElementById("username");
const errorSpan = document.getElementById("usernameError");
// 验证用户名长度
if (username.value.length < 5) {
// 阻止表单提交
event.preventDefault();
// 显示错误信息
errorSpan.style.display = "inline";
// 给输入框添加错误样式
username.classList.add("error-input");
} else {
errorSpan.style.display = "none";
username.classList.remove("error-input");
}
});
</script>
案例3:实时内容更新
使用 DOM 属性实现实时内容预览:
<div>
<textarea id="markdownInput" placeholder="在此输入内容..."></textarea>
<div id="preview">预览区域</div>
</div>
<script>
const textarea = document.getElementById("markdownInput");
const preview = document.getElementById("preview");
// 监听输入事件
textarea.addEventListener("input", function() {
// 更新预览内容
preview.textContent = textarea.value;
});
</script>
属性和特性的区别
在 DOM 编程中,有两个相似但不同的概念:
- HTML 特性(Attributes):在 HTML 中定义的特性,如
<div id="myDiv" data-custom="value">
- DOM 属性(Properties):对象的属性,如
element.id
或element.style
通常,HTML 特性会自动映射为 DOM 属性,但有一些区别:
// HTML: <input id="myInput" value="原始值">
const input = document.getElementById("myInput");
// 用户在输入框中输入"新值"
console.log(input.getAttribute("value")); // 输出:原始值 (HTML特性不变)
console.log(input.value); // 输出:新值 (DOM属性反映当前状态)
DOM 属性操作的最佳实践
- 避免频繁操作 DOM:DOM 操作开销较大,应尽量减少
- 批量修改:如果需要多次修改,考虑使用文档片段或一次性更新
- 使用适当的属性:
- 文本内容使用
textContent
- HTML 内容使用
innerHTML
(注意安全风险) - 表单值使用
.value
- 文本内容使用
- 优先使用 classList 操作类名:比直接操作
className
更安全和方便
总结
DOM 属性是 JavaScript 操作网页的重要工具,通过它们我们可以:
- 读取和修改元素内容
- 获取和设置元素属性
- 操作元素样式
- 获取元素尺寸和位置信息
- 处理表单数据
掌握 DOM 属性的用法是构建交互式网页应用不可或缺的基础,通过合理使用这些属性,我们可以创建动态、响应式的用户界面。
练习任务
- 创建一个页面,包含一个按钮和一个 div,点击按钮时切换 div 的背景颜色。
- 创建一个简单的待办事项列表,用户可以添加新项目、标记完成和删除项目。
- 实现一个表单,包含用户名、密码和确认密码字段,在用户输入时实时验证密码是否匹配。
进一步学习资源
- MDN Web Docs: HTML DOM 参考手册
- JavaScript.info: DOM 操作
- W3Schools: HTML DOM 属性
通过掌握 DOM 属性,你已经迈出了成为前端开发者的重要一步,继续练习和实践将帮助你更深入地理解这些概念。