原生DOM代码
时间: 2023-07-02 22:07:47 浏览: 53
以下是一个简单的原生DOM代码示例,用于创建一个包含文本和按钮的div元素,并在按钮点击时弹出一个提示框:
```html
<!DOCTYPE html>
<html>
<head>
<title>DOM示例</title>
</head>
<body>
<div id="myDiv">
<p>这是一个包含文本和按钮的div元素。</p>
<button id="myButton">点击我</button>
</div>
<script>
// 获取div和按钮元素
var divElement = document.getElementById("myDiv");
var buttonElement = document.getElementById("myButton");
// 添加事件监听器,当按钮被点击时弹出提示框
buttonElement.addEventListener("click", function() {
alert("按钮被点击了!");
});
// 修改div元素的文本内容
divElement.innerHTML = "<p>这是修改后的文本内容。</p>";
</script>
</body>
</html>
```
在这个示例中,我们首先使用 `document.getElementById()` 方法获取了 `myDiv` 和 `myButton` 元素,然后使用 `addEventListener()` 方法为按钮元素添加了一个点击事件监听器。当按钮被点击时,浏览器会弹出一个提示框。最后,我们使用 `innerHTML` 属性修改了 `myDiv` 元素的文本内容。