13个需要掌握的Js操作DOM方法

更新日期: 2019-12-09阅读: 2.7k标签: dom

dom 或文档对象模型是 web 页面上所有对象的根。它表示文档的结构,并将页面连接到编程语言。它的结构是一个逻辑树。每个分支结束于一个节点,每个节点包含子节点、对象。DOM api非常庞大,在本文中,咱们只讨论比较常用有有用的那些API。  


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

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

let list = document.querySelector('ul');
list.setAttribute('id', 'my-list');
let id = list.getAttribute('id');
console.log(id); // outputs my-list


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树中的字符串。

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  <p>Hello World</p>
  <!-- beforeend -->
</div>
<!-- afterend -->

示例:

var list = document.querySelector('ul');
list.insertAdjacentHTML('afterbegin', '<li id="first-item">First</li>');


总结

希望本文对你有所帮助,并且有助于你理解DOM。正确处理DOM树非常重要,如果操作不正确,可能会导致严重后果。


链接: https://www.fly63.com/article/detial/6800

全面理解虚拟DOM,实现虚拟DOM

DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的。虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。

HTML文档解析和DOM树的构建

浏览器解析HTML文档生成DOM树的过程,以下是一段HTML代码,以此为例来分析解析HTML文档的原理.解析HTML文档构建DOM树的理解过程可分为两个主要模块构成,即标签解析、DOM树构建

原生js获取DOM对象的几种方法

javascript获取DOM对象的多种方法:通过id获取 、通过class获取、通过标签名获取、通过name属性获取、通过querySelector获取、通过querySelectorAll获取等

js实现DOM遍历_遍历dom树节点方法

遍历DOM节点常用一般用节点的 childNodes, firstChild, lastChild, nodeType, nodeName, nodeValue属性。在获取节点nodeValue时要注意,元素节点的子文本节点的nodeValue才是元素节点中文本的内容。

如何编写自己的虚拟DOM

要构建自己的虚拟DOM,需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂——但实际上,虚拟DOM的主要部分只需不到50行代码。

归纳DOM事件中各种阻止方法

事件冒泡: 即事件开始时由最具体的元素(文档中嵌套层数最深的那个点)接收,事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件.与此同时,我们还需要了解dom事件绑定处理的几种方式:

关于DOM操作是异步的还是同步的相关理解

先列出我的理解,然后再从具体的例子中说明:DOM操作本身应该是同步的(当然,我说的是单纯的DOM操作,不考虑ajax请求后渲染等);DOM操作之后导致的渲染等是异步的(在DOM操作简单的情况下,是难以察觉的)

JavaScript DOM事件模型

早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类。

vuejs2.0如何获取dom元素自定义属性值

设置定义属性值 :data-value=.., 2.直接获取 3.通过this.$refs.***获取 1.目标DOM定义ref值: 2.通过 【this.$refs.***.属性名】 获取相关属性的值: this.$refs.*** 获取到对应的元素 ...

整理常见 DOM 操作

框架用多了,你还记得那些操作 DOM 的纯 JS 语法吗?看看这篇文章,来回顾一下~ 操作 className,addClass给元素增加 class,使用 classList 属性

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!