4202年了，前端都要死了！你还不知道怎么操作浏览器的Dom元素？？？——关于对dom的“创增删改查“

疯不皮
96 阅读6分钟

全文须知：未特别说明的的方法兼容性均没问题。阅读本文大概需要15分钟

关于对dom的“创增删改查”，首先我们就需要知道什么是dom？
JavaScipt由三部分构成 ECMAScript、DOM和BOM

  • ECMAScript:基本语法，提供了最基本的各种语法内容
  • BOM:浏览器对象模型，提供了与浏览器的交互方法和接口；
  • DOM:文档对象模型，提供了处理网页内容、结构 、样式的方法和接口；

而关于对dom的“创增删改查”是由浏览器提供的一套Web API，用于操作浏览器功能和页面元素的API

DOM(Document object model)文档对象模型

它又称为DOM树，并且由文档(document)、元素(element)、节点(node) 三者组成

关于它我们需要知道三个最重要的概念：

  • 一个页面(page)就是一个文档(document)
  • 文档中的所有标签都称为元素(element)
  • 文档中的所有内容，在文档中都是节点(node),而节点包括元素、注释、文本等

注意了！！！**元素(element)这个玩意是属于节点(node)**中的一个子集的！！！

现在开始我们正题：关于对Dom的“创增删改查”

创建元素

document.createElement('元素名');

万事第一步，创建一个元素

div = document.createElement('div');

增加元素

父节点.appendChild(子节点) 插到父节点最后

把一个子节点添加到父节点里面的最后位置，如果是一个已有节点将会删除原先位置的节点，然后再添加到指定地方

let parent = document.getElementById('parentElement');//找到要被插入的节点
let newNode = document.createElement('div');//创建要插入到父节点的节点
parent.appendChild(newNode);

A节点.insertBefore(B节点) 在A前插一个B节点

在A节点之前插入一个B节点。

let 被插入节点 = 新插入节点.insertBefore(用于插入的节点, 哪节点前加节点);

节点.cloneNode(deep:bool)

deep是一个可选参数。如果省略的话，参数的默认值为 **true**，也就是说默认是深度克隆。如果想使用浅克隆，你需要将该参数设置为 **false**。
深克隆就把这个节点包括它本身的所有子节点一起复杂下来
浅克隆就只会复制这个节点本身

let dupNode = node.cloneNode(deep:bool);

克隆节点包括其中的所有行内属性，行内样式，行内方法。但是，不包括所有使用js，绑定在元素上的方法。如：addEventListener()监听方法

元素.insertAdjacentElement(位置, 元素)

传入位置和元素，相对于指定元素。生成元素

元素.insertAdjacentElement(位置, 元素)

位置参数示意图：

<!-- beforebegin <= 选这个位置就生成元素在这个位置 -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

元素.insertAdjacentHTML(位置, 元素)

将指定的文本解析为 Element 元素，并将结果节点插入到 DOM 树中的指定位置

元素.insertAdjacentHTML(位置, 元素文本)
例如：
//之前的样子
<div id="one">one</div>

let d1 = document.getElementById("one");
d1.insertAdjacentHTML("afterend", '<div id="two">two</div>');

//使用后的样子
<div id="one">one</div>
<div id="two">two</div>

位置参数同上

删除元素

元素.remove()

删除自己和所有的子元素

div.remove()

父元素.removeChild(子元素)

删除指定的子元素，只能删除儿子，不能删除孙子

div = document.createElement('div');
div1 = document.createElement('div');
div.removeChild(div1)

父元素.innerHTML = ''

删除父元素内部所有的元素,并且innerHTML本身就代表了父元素内部的所有元素

div.innerHTML = ''

修改元素

修改元素又称替换元素

父元素.replaceChild(新元素 , 旧元素)

替换父元素中的某一个或多个旧子元素，变成一个或多个相同的新子元素,父元素不变

div = document.createElement('div');
div1 = document.createElement('div');
div2 = document.createElement('div');
div.replaceChild(div2,div1);

查找元素

根据选择器查找元素

document.getElementById(id)

返回一个表示与指定** ID 相匹配的 DOM 元素的 Element 对象**。若在当前文档中没有找到匹配的元素，则返回 null。

<div id="box"></div>
let divbox:Element|null = document.getElementById('box');

document.getElementsByClassName(classname)

返回一个包含了所有指定类名的子元素的类数组对象。

  1. 当在 document 对象上调用时，会搜索整个 DOM 文档，包含根节点。
let elements:elementList|null = document.getElementsByClassName(classname:String);
  1. 你也可以在任意元素上调用getElementsByClassName() 方法，它将返回的是以当前元素为根节点，所有指定类名的子元素。
let elements:elementList|null = rootElement.getElementsByClassName(classname:String);

document.querySelector(selectors)

方法返回文档中与指定选择器或选择器组匹配的**第一个 **Element对象。如果找不到匹配项，则返回null。

let element:element|null = document.querySelector(selectors:String);

包含一个或多个要匹配的选择器的 DOM 字符串DOMString。
selectors必须是有效的 CSS 选择器字符串；如果不是，则引发SYNTAX_ERR异常

使用实列:

<div class="user-panel main">
  <input name="login"/>
</div>
// 获取到input元素
let el = document.querySelector("div.user-panel.main input[name='login']");

document.querySelectorAll(selectors)

包含一个或多个匹配的选择器的字符串。其必须是一个有效的 CSS 选择器字符串，如果不是，会抛出 SyntaxError 异常。可以通过使用逗号分隔多个选择器来指定它们。返回一个静态 NodeList，包含一个与至少一个指定选择器匹配的元素的Element对象，或者在没有匹配的情况下为空NodeList

let element:nodeList = document.querySelectorAll(selectors:String);

返回元素element的查找方法

节点.parentElement

返回对应元素的父元素(element)，如果该元素没有父节点，或者父节点不是一个 DOM元素，则返回 null

const element:HTMLElement|null = node.parentElement;

节点.children

只读属性，返回元素的集合(HTMLCollection)

const element:HTMLCollection|null = node.children;

返回节点node的查找方法

子节点.parentNode

返回指定的节点在 DOM 树中的父节点，该属性只读

parentNode = node.parentNode

父节点.childNodes

返回包含指定节点的子节点的集合,该集合并且是即时更新的集合，该属性只读

const ndList:NodeList|null = div.childNodes;

NodeList 不是一个数组，是一个类似数组的对象 (Like Array Object)。虽然 NodeList 不是一个数组，但是可以使用 forEach() 来迭代。你还可以使用 Array.from() 将其转换为数组。 不过，有些浏览器较为过时，没有实现 NodeList.forEach() 和 Array.from()。你可以用 Array.prototype.forEach() 来规避这一问题。请查看该例。

---------MDN

父节点.firstChild

只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null

const ndList:Node|null = div.firstChild;

父节点.lastChild

只读属性，返回当前节点的最后一个子节点。如果父节点为一个元素节点，则子节点通常为一个元素节点，或一个文本节点，或一个注释节点。如果没有子节点，则返回 null。

const ndList:Node|null = div.lastChild;

看完了疑惑有点多？

DOM节点和元素之间的区别

简而言之就是，用标签括起来的都是元素，没用标签括起来的都是其他类型的节点
DOM节点和元素之间有什么区别？ - 掘金

参考：

MDN Web Docs
JS之DOM的操作、DOM新增、DOM删除、DOM替换、查找元素、克隆节点、回流和重绘、文档碎片 fragment - 掘金
DOM节点和元素之间有什么区别？ - 掘金
原生js 之 (DOM操作） - 掘金
JavaScript之DOM增删改查(重点)-CSDN博客

avatar
文章
阅读
粉丝