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