常用的dom操作
常用的dom操作
- 查找元素：可以使用
getElementById、querySelector、querySelectorAll等方法来查找元素。 - 创建元素：可以使用
createElement方法创建新的元素节点。 - 插入元素：可以使用
appendChild、insertBefore等方法将元素插入到指定位置。 - 删除元素：可以使用
removeChild方法从父节点中移除指定的子节点。 - 修改元素属性：可以使用
setAttribute、getAttribute方法来修改或获取元素的属性。 - 修改元素内容：可以使用
innerHTML属性来修改元素的 HTML 内容，或使用textContent修改文本内容。 - 修改样式：可以使用
style属性来修改元素的样式，例如修改背景色、字体颜色等。 - 绑定事件：可以使用
addEventListener方法来绑定元素的事件，例如点击事件、鼠标事件等。 - 修改类名：可以使用
classList属性来添加、移除或切换元素的类名。
createElement的用法和示例
createElement 是用于创建 HTML 元素节点的 DOM 方法。它接收一个参数作为要创建的元素的标签名，并返回一个新创建的元素节点。
下面是一个示例，演示如何使用 createElement 方法创建一个 <div> 元素，并将其添加到页面中：
// 创建一个 <div> 元素
const divElement = document.createElement('div');// 设置元素的内容和样式
divElement.textContent = '这是一个新创建的<div>元素';
divElement.style.backgroundColor = 'yellow';
divElement.style.padding = '10px';
divElement.style.marginTop = '10px';// 将元素添加到页面的<body>元素中
document.body.appendChild(divElement);
上述代码首先通过 createElement('div') 创建了一个新的 <div> 元素节点，并赋值给 divElement 变量。然后，我们可以使用 textContent 修改元素的文本内容，使用 style 属性来改变元素的样式。
最后，使用 appendChild 方法将新创建的 <div> 元素添加到页面的 <body> 元素中。这样，页面就会动态地添加一个带有指定内容和样式的 <div> 元素。
createElement可以创建哪些元素
document.createElement() 是 JavaScript 中的一个 DOM 操作方法，可以用来创建一个新的 HTML 元素节点，该节点尚未被插入到文档树中。
对于 document.createElement() 方法可以创建任何的 HTML元素，只需传入相应的标签名称即可。例如：
// 创建一个 h1 元素
const h1 = document.createElement('h1');// 创建一个 p 元素
const p = document.createElement('p');// 创建一个 div 元素
const div = document.createElement('div');// 创建一个 a 元素
const a = document.createElement('a');
当然，以上仅是一些常见的元素，你可以在需要的地方传入对应的HTML标签名称来创建任何你需要的元素。另外需要注意的是，使用 document.createElement() 创建的元素，需要通过其他 DOM 操作方法（如 appendChild()）将它们插入到文档树中才能生效。
如何用appendchild把元素添加到指定id中
使用 appendChild() 方法将元素添加到指定的 HTML 元素中，需要先获取目标元素，即具有指定 id 的元素。
下面是一个示例，展示如何使用 appendChild() 将一个新创建的 <p> 元素添加到具有指定 id 的元素中：
// 创建一个新的 <p> 元素
const newParagraph = document.createElement('p');
newParagraph.textContent = '新段落文本';// 获取具有指定 id 的目标元素
const targetElement = document.getElementById('目标元素的id');// 将新创建的 <p> 元素添加到目标元素中
targetElement.appendChild(newParagraph);
在上述示例中，我们首先使用 document.createElement() 创建一个新的 <p> 元素，并设置其 textContent 属性为 '新段落文本'。然后，通过 document.getElementById() 方法获取具有指定 id 的目标元素。最后，使用 appendChild() 方法将新创建的 <p> 元素追加到目标元素中。
请注意，将元素添加到指定的目标元素中时，需要确保在 DOM 树完全加载和解析之后才执行，或者在执行之前确保目标元素已存在于文档中。否则，可能无法找到目标元素并进行操作。
如何通过dom操作给div内部的span添加值
要通过 DOM 操作给一个 <div> 元素内部的 <span> 添加值，可以按照以下步骤进行：
- 首先，使用
document.getElementById()方法找到目标<div>元素，并将其保存在变量中：
const myDiv = document.getElementById('myDiv');
请确保将 “myDiv” 替换为你实际使用的 <div> 元素的 ID。
- 然后，使用
querySelector()方法在<div>元素内部找到目标<span>元素，并将其保存在变量中：
const mySpan = myDiv.querySelector('span');
在上述代码中，我们使用了 CSS 选择器 span 来选择第一个 <span> 元素。如果你有多个 <span> 元素，并且想要选择特定的 <span>，你可以使用相应的选择器。
- 最后，使用
textContent属性设置目标<span>元素的文本内容：
mySpan.textContent = '这是要添加的值';
上述代码将为目标 <span> 元素设置文本内容为 “这是要添加的值”。你可以根据需要修改文本内容。
完整的示例代码如下：
const myDiv = document.getElementById('myDiv');
const mySpan = myDiv.querySelector('span');
mySpan.textContent = '这是要添加的值';
请确保在操作之前确保文档中已经存在了相关的 <div> 和 <span> 元素。