当使用Vanilla JS操作文档对象模型时，您将直接访问Document和Node。文档包含Element，特别是HTMLElement和SVGElement，它们都是Node。Element也可能包含Text。

查找元素

你可以用mynode.querySelector()得到第一个匹配CSS选择器的元素，用myNode.querySelectorAll()得到所有匹配选择器的元素。大多数情况下，myNode是Document，所以你可以得到文档中匹配选择器的任何东西-但是，当myNode是一个元素时，你只能查看节点的后代。

document.querySelectorAll('p:hover'); // Returns a NodeList of hovered paragraphs

类似于jQuery('p:hover')。
还有更专业的方法，如：

• myNode.getElementById()
• myNode.getElementsByTagName()
• myNode.getElementsByClassName()
• myNode.getElementsByName()

注意，.getElementBy...返回单个元素，而.getElementsBy...（复数元素s）返回NodeList，这本质上是一个节点数组，但它没有标准的数组方法。
标签：What's the best way to loop through a set of elements in JavaScript?
每个元件还可以具有：

• parentNode
• previousSibling
• previousElementSibling（不包括文本节点）
• nextSibling
• nextElementSibling（不包括文本节点）
• firstChild
• firstElementChild（不包括文本节点）
• lastChild
• lastElementChild（不包括文本节点）
• childElementCount（与children.length相同）

和NodeList s：

• childNodes
• children（不包括文本节点）

这样，我们就可以遍历DOM。
例如，要获取#clickme的父元素中第一个段落元素的最后一个子元素，请执行以下操作：
x一个一个一个一个x一个一个二个x
...你找到它的parentNode，使用getElementsByTagName只得到段落后代，取其中的第一个，得到它的lastChild。
要获取其中包含的文本，可以获取其文本节点（第一个子节点），然后使用text.wholeText。

创建删除

你可以用document.createElement('aTagName')创建一个元素，也可以用newElement = myElement.cloneNode()克隆另一个元素。传递cloneNodetrue作为它的第一个参数，以复制它的后代。不要克隆有ID的元素，因为这会导致同一个文档中出现2个具有相同ID的元素。
然后，您可以使用parent.appendChild(newElement)将新元素（或现有元素）追加到父元素，或者使用parent.insertBefore(newElement, referenceElement)将其追加到另一个元素之后。insertAfter方法不存在，但可以创建：

HTMLElement.prototype.insertAfter = function(newEl, refEl) {
  if (refEl.nextSibling) refEl.parentNode.insertBefore(newEl, refEl.nextSibling);
  else refEl.parentNode.appendChild(newEl);
};

可以使用parent.removeChild()删除节点，或者使用parent.replaceChild(newChild)替换节点，或者使用mynode.remove()内联删除节点。

function poof() {
  this.remove();
}
var elements = document.getElementsByClassName('poof');
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', poof);
}

<span class="poof">hi,</span>
<span class="poof">click</span>
<span class="poof">to</span>
<span class="poof">delete</span>
<span class="poof">me;</span>
<span class="poof">it</span>
<span class="poof">was</span>
<span class="poof">fun</span>
<span class="poof">being</span>
<span class="poof">a</span>
<span class="poof">span</span>

类和样式

我说的“和样式”指的是类。**样式是用于CSS的。**您只能将CSS样式应用于使用JavaScript添加了类的元素。1
HTML中的元素有一个classList属性，它是一个DOMTokenList，代表一个空格分隔的属性，在本例中是class。你可以在classList中选择.add()、.remove()和.toggle()类，或者检查它是否是一个.contains()类。

document.getElementById('clickme').addEventListener('click', function() {
  document.getElementById('colors').classList.toggle('green');
});

.green { color: green }

<div id="colors">hello!</div>
<button id="clickme">Click me!</button>

属性

可以使用querySelector和querySelectorAll选择具有某些属性的元素。大多数属性都是您正在使用的元素的属性。例如：

myDiv.hidden = true; // Hides element from view and from screenreaders

但如果它们不是，则可以使用getAttributeNode、setAttributeNode和removeAttributeNode访问任何属性。AttributeNodes具有 ownerElements 和 value。
“data-*”属性可以通过myelement.dataset访问。例如，mydiv.dataset.pie = 'yummy'会将data-pie="yummy"添加到div中。

事件

事件稍微复杂一些。* 绑定 * one（如jQuery('selector').on）非常简单：

myElement.addEventListener('event-name', afunction);

（其他对象也有此方法-例如，window）
也可以删除事件：

myelement.removeEventListener('event-name', afunction);

参见：removeEventListener
事件列表可以在here中找到。
传递给addEventListener的函数将被传递事件发生的参数，并具有事件侦听器 * 绑定 * 到的元素的this。
然而，事情并没有这么简单：像点击按钮这样微不足道的事情可能会在不同的元素上为不同的事件触发许多事件侦听器。

• Browser Input Events: Can We Do Better Than The Click? by Smashing杂志
  标签：What is event bubbling and capturing?
  1如果你真的需要用JS修改样式，使用myElement.style.styleProperty = 'value'修改 *inline style属性 *。