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 按钮添加一个点击事件监听器。当按钮被点击时,会弹出一个警告框,显示 "按钮被点击了!"。

相关文章
|
2天前
|
JSON JavaScript 前端开发
js如何格式化一个JSON对象?
js如何格式化一个JSON对象?
10 3
|
6天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
12 5
|
6天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
8 4
|
7天前
|
JavaScript 前端开发 索引
你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList
该文章详细解释了JavaScript中HTMLCollection和NodeList这两种DOM集合类型的特性、使用方法及其区别,并通过实例代码展示了如何操作这两种集合来选取和遍历DOM元素。
|
8天前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
14 5
|
6天前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
13 2
|
8天前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
16 4
|
8天前
|
JavaScript 前端开发
JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener
13 2
|
8天前
|
XML 移动开发 JavaScript
js中BOM和DOM总结(基础篇)
文章总结了JavaScript的BOM和DOM知识点,包括window、screen、location、history、navigator对象,以及消息框、计时器和cookie。同时,介绍了DOM的概念、节点获取和修改方法,以及事件处理。
js中BOM和DOM总结(基础篇)
|
9天前
|
JavaScript 前端开发 Swift
js之删除dom | 12-3
js之删除dom | 12-3