如何使用 VANILLA JS 向嵌套的 Dom 元素添加类

Question

这是我的简单代码，我希望当用户点击第一个单元格时它会变成蓝色背景（只有点击的单元格）。 我认为唯一的问题是我不知道如何选择/引用特定单元格，因为它是一个嵌套元素。

** 如果您可以使用“按标签名称”来完成，那就太好了。

谢谢你的帮助！

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <td>Aviliable</td>
            <td>Aviliable</td>
            <td>Aviliable</td>
        </tr>
        <tr>
                <td>Aviliable</td>
                <td>Aviliable</td>
                <td>Aviliable</td>
        </tr>
        <tr>
                <td>Aviliable</td>
                <td>Aviliable</td>
                <td>Aviliable</td>
        </tr>
    </table>
   <script src="script.js"></script>
</body>
</html>

CSS：

td {
    border: 5px solid black;
    width: 200px;
    height: 200px;
}

.blue {
    background-color: blue;
}

JS：

var td = document.getElementsByTagName("tr")[0].document.getElementByTagName("td")[0];

td.onclick = function () {
  td += "blue";
}

Answer 1

通过标签名称获取元素工作正常。 您首先从文档中获取第一行（因此您使用 document.getElementsByTagName()）现在您有了第一行，从那里您只需要使用 getElementsByTagName（您不想搜索文档，只是您想要搜索的行）已经拿到了）。

 var td = document.getElementsByTagName("tr")[0].getElementsByTagName("td")[0] td.onclick = function () { td.classList.add("blue"); }

 td { border: 5px solid black; width: 200px; height: 200px; } .blue { background-color: blue; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <table> <tr> <td>Aviliable</td> <td>Aviliable</td> <td>Aviliable</td> </tr> <tr> <td>Aviliable</td> <td>Aviliable</td> <td>Aviliable</td> </tr> <tr> <td>Aviliable</td> <td>Aviliable</td> <td>Aviliable</td> </tr> </table> <script src="script.js"></script> </body> </html>

Answer 2

使用event.target选择要添加样式的单元格，

var firstTableRow = document.getElementsByTagName("tr")[0];
firstTableRow.addEventListener('click', function(event){
    event.target.classList.add('blue');
})

菲德尔链接

Answer 3

我认为这对你有用

 function changeColor(cell){ var elems = document.querySelectorAll("th"); [].forEach.call(elems, function(el) { // alert("hello"); el.classList.remove("blue"); }); cell.classList.add("blue"); }

 .blue{ background-color:blue }

 <table border="1px" width="100%"> <tr> <th onclick="changeColor(this)">1</th> <th onclick="changeColor(this)">1</th> <th onclick="changeColor(this)">1</th> <th onclick="changeColor(this)">1</th> </tr> <tr> <th onclick="changeColor(this)">1</th> <th onclick="changeColor(this)">1</th> <th onclick="changeColor(this)">1</th> <th onclick="changeColor(this)">1</th> </tr> <tr> <th onclick="changeColor(this)">1</th> <th onclick="changeColor(this)">1</th> <th onclick="changeColor(this)">1</th> <th onclick="changeColor(this)">1</th> </tr> </table>

如何使用 VANILLA JS 向嵌套的 Dom 元素添加类

问题描述

3 个解决方案

解决方案1
1 已采纳 2019-12-07 17:50:31

解决方案2
0 2019-12-07 17:48:34

解决方案3
0 2019-12-07 17:52:55

如何使用 VANILLA JS 向嵌套的 Dom 元素添加类

问题描述

3 个解决方案

解决方案1 1 已采纳 2019-12-07 17:50:31

解决方案2 0 2019-12-07 17:48:34

解决方案3 0 2019-12-07 17:52:55

解决方案1
1 已采纳 2019-12-07 17:50:31

解决方案2
0 2019-12-07 17:48:34

解决方案3
0 2019-12-07 17:52:55