从零开始JavaScript第14笔记：实际的网站的应用

一.节点的增删改查

可以使用 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 = '修改后的内容';