如何使用javascript组合getElementByTagName和getElementByClass

Question

我正在尝试制作我的选择器，因此当它获得带有 p 的标签名称的转换类时，它会在我的情况下执行一些事件鼠标悬停，但我遇到了麻烦。

我知道有jquery解决方案，但我正在使用纯javascript。 这是下面的代码

var hoverEvent = document.getElementsByTagName("p").getElementsByClassName("transform");   
for (let i = 0; i < hoverEvent .length; i++) {
    hoverEvent [i].onmouseover=function() {
        this.style.color = "yellow";
     // changes paragraph with class of transform to yellow during hover
    }
}  // end for  
    for (let i = 0; i < hoverEvent .length; i++) {
    hoverEvent [i].onmouseout=function() {
        this.style.color = "black";
 // changes it back to black 
    }
}                   

Answer 1

您可以使用

CSS 选择器querySelectorAll查找具有该类名的所有段落：

var hoverEvent = document.querySelectorAll("p.transform");   

Answer 2

var transformPs = document.querySelectorAll("p.transform");   
for (let i = 0; i < transformPs .length; i++) {
    // on mouse over
    transformPs[i].onmouseover = function () {
        this.style.color = "yellow";
        // changes paragraph with class of transform to yellow during hover
    };
    // on mouse out
    transformPs[i].onmouseout = function () {
        this.style.color = "black";
        // changes it back to black
    };
}

Answer 3

您可以使用classList来检查元素的类

var p = document.getElementsByTagName("p");
if (p.classList.contains('transform')){ 
// do whatever you want to do 
}

Answer 4

原版 JavaScript 等效项将使用 document.querySelectorAll ：

function turnYellow (e) { e.target.style.color = 'yellow' }
function turnBlack (e) { e.target.style.color = '' }
document.querySelectorAll('p.transform').forEach(function (p) {
  p.addEventListener('mouseover', turnYellow)
  p.addEventListener('mouseout', turnBlack)
})

body { background: #ccc; }

<p class="transform">Example Paragraph</p>

但是，我认为最好的方法是完全放弃JavaScript，而是依靠CSS伪选择器:hover：

body { background: #ccc; }
p.transform:hover {
  color: yellow;
}

<p class="transform">Example Paragraph</p>