【原生JavaScript】常见的DOM操作及方法

在这我们就来把原生JavaScript中一些常用的技术，来与小伙伴们一起学习、一起复习一下那些基础知识。注意收藏!!!

常见DOM操作

获取查找DOM元素

document.getElementById(idName)

通过id查找元素。返回的是元素DOM，如果页面上有多个相同ID的元素，则只会返回第一个元素，不会返回多个，原则上ID唯一的不可重复的，但是......（知道的都懂）

const dom = document.getElementById('xxx')

document.getElementsByClassName(className)

通过class查找。返回的是数组结构的DOM列表，想要使用可以用for循环，但是要想用forEach/map等遍历，需要先转化为数组结构

• const doms = document.getElementsByClassName('xxx')for(let i = 0; i < doms.length; i++){ console.log(doms[i]);}// 若使用forEachArray.from(doms).forEach(ele => console.log(ele));

document.getElementsByTagName(tagName)

通过标签名获取元素。返回的结果跟getElementByClassName一样，使用方式也是相同的。document.querySelector(selectors) | document.querySelectorAll(selectors)

使用选择器来查找元素。见名知意querySelector获取的是单个的，不管这个选择器可以找到几个元素，只取第一个返回的是找到的DOM元素；querySelectorAll获取的是能找到的全部，返回的是DOM的数组，这个返回的数组和上边用class和tag标签返回的数组更方便点，可以直接用forEach这些。

const simple = document.querySelector('xxx');
const doms = document.querySelectorAll('xxx');// 可直接forEach循环doms.forEach(e => console.log(e));

然后再对比下区别吧，用class名和选择器的对比:

<div class="warp">    <p>name<p>    <p>age<p><div><p>...</p>
<script>// 目标 获取到warp下面的p元素
// 1. 不使用querySelectorAllconst warp = document.getElementsByClassName("warp")[0];const allp =  warp.getElementsByTagName(p)
// 2. 使用querySelectorAllconst allp = document.querySelectorAll(".warp p")</script>

这样看querySelectorAll使用起来方便许多，但是跟getElementsByClassName比起来是有一些坑点的，曾经遇到过忘记了，但愿道友遇不那个坑，有心可百度看下，这里不过多解释啦

给DOM增加样式

下边代码例子中的domeEle为用上边获取DOM方式获取到的元素，为对单个元素的操作，数组的需要循环进行操作，代码片段均为js片段。

给元素增加样式

• domeEle.style = 'width: 100px;height: 100px;'; // 或 domeEle.style.width = '100px';domeEle.style.height = '100px';

上边这两种方式均增加元素的行间样式，第一种方式比较霸道会重制元素行间所有的style样式。

给元素增加class

// 增加单个class, 增加class元素没有当前class会新增，有则覆盖domeEle.className = 'aaa';domeEle.classList.add('aaa');domeEle.className += 'aaa';// 增加多个class方式domeE