如何在没有像jQuery这样的库的情况下操作DOM？

Question

我习惯使用jQuery来操作DOM,例如:

var mything = $("#mything");
mything.on("click", function() {
    mything.addClass("red");
    mything.html("I have sinned.");
});

但现在我想用Vanilla JavaScript做同样的事情.这可能吗？我该怎么做？

注意:此问题旨在成为有关Vanilla JavaScript DOM操作的综合资源.

Answer 1

使用Vanilla JS操作文档对象模型时,您将直接访问Document和Nodes.一个文件包含Elements,特别是HTMLElements和SVGElements,它们都是Nodes.一个Element可能含有Text过多.

寻找元素

您可以获得与CSS选择器匹配的第一个元素mynode.querySelector(),以及与选择器匹配的所有元素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)返回a NodeList,它本质上是一个节点数组,但它没有标准的数组方法.

另请参阅:在JavaScript中循环使用一组元素的最佳方法是什么？

每个元素也可能有:

• parentNode
• previousSibling
• previousElementSibling (不包括文本节点)
• nextSibling
• nextElementSibling (不包括文本节点)
• firstChild
• firstElementChild (不包括文本节点)
• lastChild
• lastElementChild (不包括文本节点)
• childElementCount(同children.length)

以下NodeList是:

• childNodes
• children (不包括文本节点)

通过这种方式,我们可以遍历DOM.

例如,要获取#clickme此处父级中第一个段落元素的最后一个子元素:

document.getElementById('clickme').addEventListener('click', function() {
  console.log(this.parentNode.getElementsByTagName('p')[0].lastChild);
});

<div>
  <blockquote>This is a really great quote.</blockquote>
  <p>This is a <em>really</em> interesting paragraph. <span>this will be selected</span></p>
  <p>In fact, here's another!</p>
  <button id="clickme">Click me!</button>
</div>

...你发现它parentNode,使用getElementsByTagName它只能得到段落后代,取第一个,然后得到它lastChild.

要获取其中包含的文本,您可以使用其文本节点(其第一个子节点)text.wholeText.

创建和删除

您可以使用document.createElement('aTagName')或创建另一个元素或克隆另一个元素newElement = myElement.cloneNode().传递,因为它的第一个参数也复制其后代.不要使用ID克隆元素,因为它会导致具有相同ID的2个元素出现在同一文档中.cloneNode true

然后,您可以将新元素(或现有元素)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添加类的元素.¹

在HTML元素有一个classList属性,该属性是一个DOMTokenList表示一个空格分开的属性,在这种情况下class.你可以.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.

活动

事件稍微复杂一些.绑定一个(像jQuery('selector').on)很容易:

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

(其他对象也有此方法 - 例如,window)

事件也可以删除:

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

看到: removeEventListener

可以在此处找到事件列表.

传递给它的函数addEventListener将传递事件发生的参数,并具有this事件监听器绑定的元素.

然而,事件并非如此简单:像点击按钮一样微不足道的东西可能会激活不同元素和不同事件的许多事件监听器.

- 浏览器输入事件:我们能比点击更好吗？通过Smashing Magazine

另请参阅:什么是事件冒泡和捕获？

_{¹如果确实需要使用JS修改样式,请使用myElement.style.styleProperty = 'value'更改内联样式属性.}