JavaScript中怎么操作DOM

JavaScript中怎么操作 DOM，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都做网站、成都网站设计、京山网络推广、小程序定制开发、京山网络营销、京山企业策划、京山品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供京山建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

document.querySelector & document.querySelectorAll

document.querySelector方法返回文档中与指定选择器或选择器组匹配的第一个 html 元素。 如果找不到匹配项，则返回null。

document.querySelectorAll 方法返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是  NodeList 。

// 返回第一个 ul 元素 const list = document.querySelector('ul') // 返回所有类名为 info 或者 warning 的 div 元素 const elements = document.querySelectorAll('div.info, div.warning');

document.createElement

在一个 HTML 文档中， Document.createElement(tagName) 方法创建由 tagName 指定的 HTML  元素，或一个HTMLUnknownElement，如果tagName不被识别。

Node.appendChild

Node.appendChild()方法将节点添加到给定父节点的子节点列表的末尾。  请注意，如果给定的子代是文档中现有节点的引用，则它将移动到新位置。看看示例：

let list = document.createElement('ul'); ['北京', '上海', '深圳'].forEach(city => {   let listItem = document.createElement('li')   listItem.innerText = city   list.appendChild(listItem) }) document.body.appendChild(list)

Node.insertBefore

此方法在给定的父节点内的子引用节点之前插入给定节点(并返回插入的节点)

伪代码如下所示：

• 北京

• 上海

• 深圳

• ↓

Node.insertBefore('厦门','北京')

• ↓

• 厦门

• 北京

• 上海

• 深圳

let list = document.querySelector('ul'); let firstCity = list.querySelector('ul > li'); let newCity = document.createElement('li'); newCity.textContent = 'San Francisco'; list.insertBefore(newCity, firstCity);

Node.removeChild

Node.removeChild方法从DOM中删除一个子节点并返回删除的节点。 请注意，返回的节点不再是DOM的一部分，而是仍存在于内存中。  如果处理不当，可能会导致内存泄漏。

let list = document.querySelector('ul'); let firstItem = list.querySelector('li'); let removedItem = list.removeChild(firstItem);

Node.replaceChild

此方法替换父节点中的子节点(并返回替换后的旧子节点)。请注意，如果处理不当，此方法可能导致与Node.removeChild类似的内存泄漏问题。

let list = document.querySelector('ul'); let oldItem = list.querySelector('li'); let newItem = document.createElement('li'); newItem.innerHTML = '前端小智'; let replacedItem = list.replaceChild(newItem, oldItem);

Node.cloneNode

Node.cloneNode(deep)  方法返回调用该方法的节点的一个副本，deep(可选)表示是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.

let list = document.querySelector('ul'); let clone = list.cloneNode();

Element.getAttribute方法返回元素上给定属性的值，反之亦然，Element.setAttribute设置给定元素上属性的值。

let list = document.querySelector('ul'); let clone = list.cloneNode();

Element.hasAttribute / Element.removeAttribute

Element.hasAttribute方法检查给定元素是否具有指定的属性，返回值为boolean。  通过调用Element.removeAttribute方法，我们可以从元素中删除具有给定名称的属性。

let list = document.querySelector('ul'); if (list.hasAttribute('id')) {     console.log('list has an id');     list.removeAttribute('id'); };

Element.insertAdjacentHTML

element.insertAdjacentHTML(position, text)  将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。

position是相对于元素的位置，并且必须是以下字符串之一：

beforebegin：元素自身的前面。

afterbegin：插入元素内部的第一个子节点之前。

beforeend：插入元素内部的最后一个子节点之后。

afterend：元素自身的后面。

text是要被解析为HTML或XML,并插入到DOM树中的字符串。

 
 
   
  
Hello World