使用DOM提供的增删查改等函数,以及DOM提供的一些常见属性
时间: 2023-06-12 18:07:48 浏览: 123
DOM提供了一些常见的操作函数和属性,可以用来增删查改HTML文档中的元素和属性。以下是一些常用的函数和属性:
1. getElementById():根据元素的id属性获取元素节点。
2. getElementsByTagName():根据标签名获取元素节点列表。
3. createElement():创建一个新的元素节点。
4. appendChild():将一个元素节点添加到另一个元素节点的末尾。
5. removeChild():从一个元素节点中删除一个子节点。
6. setAttribute():设置元素节点的属性。
7. getAttribute():获取元素节点的属性。
8. innerHTML:设置或获取元素的HTML内容。
9. style:设置或获取元素的CSS样式。
10. parentNode:获取元素的父节点。
11. childNodes:获取元素的所有子节点。
12. firstChild:获取元素的第一个子节点。
13. lastChild:获取元素的最后一个子节点。
14. nextSibling:获取元素的下一个兄弟节点。
15. previousSibling:获取元素的前一个兄弟节点。
这些函数和属性可以帮助我们方便地操作HTML文档中的元素和属性。
相关问题
使用DOM提供的增删查改等函数写个HTML
以下是一个简单的HTML代码,使用DOM提供的函数动态操作页面元素。
```html
<!DOCTYPE html>
<html>
<head>
<title>DOM操作HTML</title>
</head>
<body>
<h1 id="title">Hello World!</h1>
<div id="content">这是一个div元素</div>
<button id="btn-add">添加元素</button>
<button id="btn-remove">删除元素</button>
<button id="btn-update">更新内容</button>
<script>
// 获取元素
var title = document.getElementById('title');
var content = document.getElementById('content');
var btnAdd = document.getElementById('btn-add');
var btnRemove = document.getElementById('btn-remove');
var btnUpdate = document.getElementById('btn-update');
// 添加元素
btnAdd.onclick = function() {
var newElement = document.createElement('p');
newElement.innerHTML = '这是一个新的p元素';
document.body.appendChild(newElement);
};
// 删除元素
btnRemove.onclick = function() {
document.body.removeChild(content);
};
// 更新内容
btnUpdate.onclick = function() {
title.innerHTML = 'Hello JavaScript!';
};
</script>
</body>
</html>
```
这个HTML页面包含一个标题、一个文本、三个按钮,通过DOM操作可以动态添加、删除、更新页面元素。
阅读全文