JavaScript DOM 文档对象模型

简介: JavaScript DOM 文档对象模型

JavaScript 的 DOM (Document Object Model) 是一个 API,它允许你通过 JavaScript 访问和操作 HTML 文档。以下是一些基本的 JavaScript DOM 代码示例:

1. 获取元素

javascriptvar element = document.getElementById('myElement');

这将获取 ID 为 'myElement' 的 HTML 元素。

2. 改变元素内容

javascriptvar element = document.getElementById('myElement');
element.innerHTML = '新的内容';

这将改变 ID 为 'myElement' 的 HTML 元素的内容。

3. 改变元素样式

javascriptvar element = document.getElementById('myElement');
element.style.color = 'red';

这将改变 ID 为 'myElement' 的 HTML 元素的文本颜色。

4. 添加新元素

javascriptvar newElement = document.createElement('div'); // 创建一个新的 div 元素
newElement.innerHTML = '我是新元素'; // 设置新元素的文本内容
document.body.appendChild(newElement); // 将新元素添加到文档的 body 中

这将创建一个新的 div 元素,设置其文本内容,并将其添加到文档的 body 中。

5. 事件处理

javascriptvar button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('按钮被点击了!');
});

这将为 ID 为 'myButton' 的 HTML 按钮添加一个点击事件监听器。当按钮被点击时,会弹出一个警告框,显示 "按钮被点击了!"。

相关文章
|
4天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
4天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
4天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)
|
4天前
|
缓存 编解码 自然语言处理
前端javascript的BOM对象知识精讲
前端javascript的BOM对象知识精讲
|
4天前
|
JavaScript 前端开发 索引
【Web 前端】JQ对象和DOM元素之间如何转换?
【4月更文挑战第22天】【Web 前端】JQ对象和DOM元素之间如何转换?
|
4天前
|
JavaScript 前端开发
JavaScript 日期对象
JavaScript 日期对象
|
JavaScript
js基础笔记学习247event对象3
js基础笔记学习247event对象3
46 0
js基础笔记学习247event对象3
|
JavaScript
js基础笔记学习309筛选jquery对象1
js基础笔记学习309筛选jquery对象1
42 0
js基础笔记学习309筛选jquery对象1
|
JavaScript
js基础笔记学习245event对象1
js基础笔记学习245event对象1
30 0
js基础笔记学习245event对象1
|
JavaScript
js基础笔记学习246event对象2
js基础笔记学习246event对象2
40 0
js基础笔记学习246event对象2