JavaScript基础篇：获取dom元素及增删查改

JavaScript获取dom元素及增删查改

引自JavaScript学习0406课程

一、获取dom元素

获取dom元素的三种方式

1.遍历所有元素：NodeList的forEach接口
2.遍历所有元素：NodeList的for迭代器
3.遍历所有元素：转化为数组遍历

HTML代码示例

<ul class="list">
	<li class="item">item1</li>
	<li class="item">item2</li>
	<li class="item">item3</li>
	<li class="item">item4</li>
	<li class="item">item5</li>
</ul>

获取 ul 和 li

const ul = document.querySelector(".list");
const li = document.querySelectorAll(".item");

1. 遍历所有元素：NodeList的forEach接口

//   1.遍历所有元素：NodeList的forEach接口
let items = li.forEach((item) => console.log(item));

2.遍历所有元素：NodeList的for迭代器

//2.遍历所有元素：NodeList的for迭代器
for (let item of li) {
	console.log(item);
}

3.遍历所有元素：将li元素转化为数组遍历

//3.遍历所有元素：转化为数组遍历
console.log([...li]);
[...li].forEach((item) => console.log(item));

这三种方式得到的最终值用console.log(）打印到控制台，都能得到如下输出

---

二、dom元素的增删查改

HTML代码示例

<ul class="list">
	<li class="item">item1</li>
	<li class="item">item2</li>
	<li class="item">item3</li>
	<li class="item">item4</li>
	<li class="item">item5</li>
</ul>

获取 ul 和 li 的值

const ul = document.querySelector(".list");
const li = document.querySelectorAll(".item");

//   1.遍历所有元素：NodeList的forEach接口
let items = li.forEach((item) => console.log(item));

1.在任意位置插入值

这里要做三件事

选取参考点，用伪类选
创建一个li
使用before（前） 和 after（后）方法，在参考点插入数据

//   取参考点在任意位置插入值
let referNode = document.querySelector("li:nth-of-type(2)");
console.log(referNode);

let liBefore = document.createElement("li");
liBefore.textContent = "我在item2前面(before)";
referNode.before(liBefore);

let liAfter = document.createElement("li");
liAfter.textContent = "我在item2后面(after)";
referNode.after(liAfter);

2.在固定位置插入

这里有4个位置，调用的是父元素来实现功能。
4个位置可以看输出值

let liBeforbegin = document.createElement("li");
liBeforbegin.textContent = "我添加在beforbegin的位置";
ul.insertAdjacentElement("beforebegin", liBeforbegin);

let liBeforend = document.createElement("li");
liBeforend.textContent = "我添加在beforeend的位置";
ul.insertAdjacentElement("beforeend", liBeforend);

let liAfterbegin = document.createElement("li");
liAfterbegin.textContent = "我添加在afterbegin的位置";
ul.insertAdjacentElement("afterbegin", liAfterbegin);

let liAfterend = document.createElement("li");
liAfterend.textContent = "我添加在afterend的位置";
ul.insertAdjacentElement("afterend", liAfterend);

！！注意，'beforebegin’和’afterend’仅在元素位于 DOM 树中并且具有父元素时才可用。
innerText 是老版本的用法，这里淘汰不学习，
这里有讲解insertAdjacentElement与insertAdjacentHTML、Text的区别！

简单的讲解下区别，兼容区别请参考如上文章！

• insertAdjacentHTML、Text 这两个方法，第二个参数都必须是字符串;
• 假如已经有dom节点或者已经createElement出来了一个元素，需要插入怎么办？还有一个叫做 insertAdjacentElement ，使用方法相同，第二参数可以是create出来的节点获取其他dom元素。

3.替换和输出元素

这里需要精确找到需要替换或删除的元素

替换：replaceWith（）方法
删除：remove（）方法

//   替换
let lastItem = document.querySelector("li:last-of-type");
let a = document.createElement("li");
a.textContent = "RQ桑(替换了最后一个item)";
lastItem.replaceWith(a);

//   删除
ul.querySelector("li:nth-of-type(5)").remove();

---

本文到此结束啦，如果对您有帮助，记得留下小赞窝！