原生JS 操做 DOM

时间 2019-11-16

标签原生 dom 栏目 JavaScript 繁體版

原文原文链接

前端开发始终绕不过的就是操做DOM，在之前，咱们使用Jquery，zepto等库来操做DOM，以后在vue，Angular，React等框架出现后，咱们经过操做数据来控制DOM（绝大多数时候），愈来愈少的去直接操做DOM，更不用说用原生的JS来操做DOM了。css

可是并非全部时候都必定要引入这些库，对于基础的JS操做DOM的一些方法，仍是要有些了解的。这里就算是回顾一下JS那些熟悉却也陌生的DOM操做函数。前端

查询

按照ID查询

document.getElementById(id) // 兼容最好vue

// demo
// HTMl
<body>
  <div id="main">
    <div id="content"></div>
  </div>
</body>

// Script
const mainDom = document.getElementById('main');

const contentDom = document.getElementById('content');
复制代码

按照class查询

element.getElementsByClassName // ie9+
element.querySelectorAll // ie8
遍历 // ie7-node

// demo
// HTMl
<body>
  <div id="main">
    <div id="content">
      <p class="info test">info1</p>
      <p class="info">info2</p>
      <p class="info">info3</p>
    </div>
  </div>
</body>

// Script
const mainDom = document.getElementById('main');
const infoDomList1 = mainDom.querySelectorAll('.info.test');
const infoDomList2 = mainDom.getElementsByClassName('info test');
复制代码

按照Tag查询

element.getElementsByTagName // ie6+jquery

// demo
// HTMl
<body>
  <div id="main">
    <div id="content">
      <p class="info test">info1</p>
      <p class="info">info2</p>
      <p class="info">info3</p>
    </div>
  </div>
</body>

// Script
const divDom = document.getElementsByTagName('div');
const pDom = divDom[0].getElementsByTagName('p');
复制代码

按照属性查询

element.querySelector //ie8+
element.querySelectorAll() //ie8+
querySelector返回返回的是单个DOM元素，querySelectorAll返回NodeList浏览器

querySelector的语法很相似jquery里面的选择器，querySelector和querySelectorAll的使用方法是同样，因此下面的一些说法都是适用于两个。bash

// demo
// HTMl
<body>
  <div id="main">
    <div id="content">
      <p class="info test">info1</p>
      <p class="info">info2</p>
      <p class="info">info3</p>
    </div>
  </div>
</body>

// Script
const infoDom = document.querySelectorAll('.info');
const infoDom2 = document.querySelectorAll('.info:not(.test)');
复制代码

querySelectorAll 和 querySelector 在子查询下和jquery不是同样的，详见DOM元素querySelectorAll可能让你意外的特性表现简单的说就是document.querySelector("#my-id").querySelectorAll("div div");，直接感受是查询#my-id的子元素下符合div div的dom，其实不是，而是#my-id的子元素中，同时也符合在全局范围内的div div的dom。app

获取父元素

element.parentNode // 基本都兼容框架

获取子元素

element.childNodes // 基本都兼容dom

element.childNodes不止会获取到DOM，也会获取到文字等，只有当nodeType === 1时才表示DOM。

获取兄弟节点

获取前面的兄弟节点

element.previousSibling //基本都兼容

获取全部前面的兄弟节点就是遍历previousSibling, 直到null。

Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中.所以,使用诸如 Node.firstChild 和 Node.previousSibling 之类的方法可能会引用到一个空白符文本节点, 而不是使用者所预期获得的节点.

获取后面的兄弟节点

element.nextSibling //基本都兼容

获取全部和注意点都和previousSibling同样

DOM操做

建立DOM

document.createElement(tagName)

新增DOM

添加到节点的子节点的最后 append

paranetElement.appendChild(child);

添加到节点的前面

paranetElement.insertBefore(newElement, Element)

经过insertBefore方法能够将newElement插入到Element前面，若是Element是null则将newElement插入到paranetElement的尾部。

若是newElement是一个已经存在在文档中的DOM, insertBefore则会表现为移动该DOM(将会保留全部的事件)。

添加到节点的后面

没有这个函数 😶 可使用 insertBefore 方法和 nextSibling 来模拟它。

parentDiv.insertBefore(sp1, sp2.nextSibling);
复制代码

若是sp2没有下一个节点，则它确定是最后一个节点，则sp2.nextSibling返回null，且sp1被插入到子节点列表的最后面（即sp2后面）

详见Node.insertBefore()

修改DOM

修改DOM的文案

Element.innerHTML // 获取标签内的全部内容 Element.innerText // 只获取标签内的文字内容，不包括标签

修改css

element.style.cssAttribute

修改属性

element.setAttribute()
element.removeAttribute()
element.className

删除DOM

paranetElement.removeChild(element)

清空子节点

没有专门的函数，能够遍历removeChild来实现

var element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}
复制代码

结尾

关于DOM的操做，经常使用的暂时只想到这么多，之后想到了，再慢慢补充