一.节点的增删改查
可以使用 DOM 操作来实现增删改查的操作对页面元素进行操作。
首先是查
1.查询元素
查询元素还是老件套,像getElementById,querySelectorAll,getElementsByTagName等都是在js中获取对应网页中的数据。
// 获取指定的元素
var element = document.getElementById('elementId');
// 获取符合指定选择器的所有元素
var elements = document.querySelectorAll('.className');
// 根据标签名获取所有元素
var elementsByTag = document.getElementsByTagName('div');
2.增加元素
createElement相当于创建了一个div的标签,然后其textContent中写入文本语言,appendChild再将其添加至指定的父标签中。
// 创建新的元素
var newElement = document.createElement('div');
newElement.textContent = '新增的元素';
// 将新元素添加到指定的父元素中
var parentElement = document.getElementById('parent');
parentElement.appendChild(newElement);
3.删除元素
删除目前学了有两种方法,一种是removeChild来删除传入的子元素,还是则是直接使用remove()来删除调用者本身。
let box1 = document.querySelector(".box1")
box1.removeChild(p1)//必须传入它的子元素
p1.remove()//从文档树种删除调用者
box2.remove()
let box = document.querySelector(".box2")
box.remove()
Array.from(box.children).forEach(element => {
element.remove()
4.修改元素
修改元素大致就是获取到数据后,然后就可以根据数据的属性来修改方法
// 获取要修改的元素
var elementToModify = document.getElementById('elementToModify');
// 修改元素的属性和内容
elementToModify.setAttribute('class', 'newClass');
elementToModify.textContent = '修改后的内容';