常用的dom操作

发布时间:2024年01月14日

常用的dom操作

  1. 查找元素:可以使用?getElementByIdquerySelectorquerySelectorAll?等方法来查找元素。
  2. 创建元素:可以使用?createElement?方法创建新的元素节点。
  3. 插入元素:可以使用?appendChildinsertBefore?等方法将元素插入到指定位置。
  4. 删除元素:可以使用?removeChild?方法从父节点中移除指定的子节点。
  5. 修改元素属性:可以使用?setAttributegetAttribute?方法来修改或获取元素的属性。
  6. 修改元素内容:可以使用?innerHTML?属性来修改元素的 HTML 内容,或使用?textContent?修改文本内容。
  7. 修改样式:可以使用?style?属性来修改元素的样式,例如修改背景色、字体颜色等。
  8. 绑定事件:可以使用?addEventListener?方法来绑定元素的事件,例如点击事件、鼠标事件等。
  9. 修改类名:可以使用?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 树完全加载和解析之后才执行,或者在执行之前确保目标元素已存在于文档中。否则,可能无法找到目标元素并进行操作。

文章来源:https://blog.csdn.net/weixin_45342302/article/details/135588553
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。