dom下增删改查的方法
时间: 2024-05-26 13:14:11 浏览: 10
DOM(文档对象模型)是一种用于 HTML 和 XML 文档的编程接口,它提供了对文档的结构化表现形式的访问和修改。下面是 DOM 中常用的增删改查方法:
1. 增加元素:
- createElement(tagName):创建一个新的元素节点。
- createTextNode(text):创建一个包含指定文本内容的文本节点。
- appendChild(node):将指定节点添加为当前节点的子节点。
2. 删除元素:
- removeChild(node):从当前节点中删除指定的子节点。
3. 修改元素:
- setAttribute(name, value):设置指定属性名的属性值。
- removeAttribute(name):删除指定属性名的属性值。
- innerHTML:以 HTML 字符串的形式设置或获取节点的内容。
4. 查询元素:
- getElementById(id):根据元素的 id 属性获取指定元素。
- getElementsByTagName(tagName):根据元素的标签名获取指定元素。
- getElementsByClassName(className):根据元素的 class 名称获取指定元素。
- querySelector(selector):根据选择器字符串获取匹配的第一个元素。
- querySelectorAll(selector):根据选择器字符串获取匹配的所有元素。
相关问题
原生dom实现增删改查,全选反选
好的,下面是原生DOM实现增删改查、全选反选的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>DOM增删改查、全选反选</title>
</head>
<body>
<h3>DOM增删改查、全选反选示例</h3>
<!-- 添加元素 -->
<input type="text" id="add-input">
<button id="add-btn">添加</button>
<!-- 显示元素列表 -->
<ul id="list"></ul>
<!-- 删除元素 -->
<button id="delete-btn">删除</button>
<!-- 修改元素 -->
<input type="text" id="edit-input">
<button id="edit-btn">修改</button>
<!-- 全选反选 -->
<input type="checkbox" id="check-all">
<label for="check-all">全选/反选</label>
<script>
// 先获取相关的DOM元素
var addInput = document.getElementById('add-input');
var addBtn = document.getElementById('add-btn');
var list = document.getElementById('list');
var deleteBtn = document.getElementById('delete-btn');
var editInput = document.getElementById('edit-input');
var editBtn = document.getElementById('edit-btn');
var checkAll = document.getElementById('check-all');
// 添加元素
addBtn.onclick = function() {
var text = addInput.value.trim();
if (text) {
var li = document.createElement('li');
li.innerHTML = '<input type="checkbox"> ' + text;
list.appendChild(li);
addInput.value = '';
}
};
// 删除元素
deleteBtn.onclick = function() {
var checkboxes = list.getElementsByTagName('input');
for (var i = checkboxes.length - 1; i >= 0; i--) {
if (checkboxes[i].checked) {
list.removeChild(checkboxes[i].parentNode);
}
}
};
// 修改元素
editBtn.onclick = function() {
var checkboxes = list.getElementsByTagName('input');
for (var i = checkboxes.length - 1; i >= 0; i--) {
if (checkboxes[i].checked) {
var text = editInput.value.trim();
if (text) {
checkboxes[i].parentNode.innerHTML = '<input type="checkbox"> ' + text;
editInput.value = '';
}
}
}
};
// 全选反选
checkAll.onclick = function() {
var checkboxes = list.getElementsByTagName('input');
for (var i = checkboxes.length - 1; i >= 0; i--) {
checkboxes[i].checked = checkAll.checked;
}
};
</script>
</body>
</html>
```
这个示例实现了以下功能:
1. 输入框输入内容后,点击“添加”按钮可以将内容添加到列表中。
2. 点击“删除”按钮可以删除列表中选中的元素。
3. 输入框输入内容后,点击“修改”按钮可以将列表中选中的元素的文本修改为输入框中的内容。
4. 点击“全选/反选”复选框可以全选或反选列表中的所有元素。
dom4j解析xml 增删改查
dom4j是一个用于解析和操作XML的Java库。它提供了一组API和工具,方便我们对XML文档进行增删改查操作。
- 增加操作:使用dom4j可以通过创建解析器、获取document、获取根节点、在根节点下添加元素等步骤进行添加操作。例如,在p1标签末尾添加一个元素,可以使用addElement方法添加元素,并使用setText方法设置元素的文本内容。
- 删除操作:使用dom4j可以通过创建解析器、获取document、获取根节点、选择需要删除的节点等步骤进行删除操作。例如,可以使用remove方法删除指定的节点。
- 修改操作:使用dom4j可以通过创建解析器、获取document、获取根节点、选择需要修改的节点等步骤进行修改操作。例如,可以使用setText方法修改指定节点的文本内容。
- 查询操作:使用dom4j可以通过创建解析器、获取document、获取根节点、选择需要查询的节点等步骤进行查询操作。例如,可以使用elements方法获取指定节点的所有子节点。
以上是使用dom4j进行XML解析的基本操作,你可以根据具体的需求和情况来选择合适的方法和步骤进行操作。