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

Question

This is my simple code, and I want that when the user clicks on the first cell it will become to blue background (only the clicked cell).这是我的简单代码，我希望当用户点击第一个单元格时它会变成蓝色背景（只有点击的单元格）。 I think the only problem I don't know how to select/refer to a specific cell because it's a nested element.我认为唯一的问题是我不知道如何选择/引用特定单元格，因为它是一个嵌套元素。

** If you can do it with "by tag name" it would be nice. ** 如果您可以使用“按标签名称”来完成，那就太好了。

Thanks for your help!谢谢你的帮助！

Html code: 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: CSS：

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

.blue {
    background-color: blue;
}

JS: JS：

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

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

Answer 1

getting elements by tag name works fine.通过标签名称获取元素工作正常。 you first get the first row from the document (hence you use document.getElementsByTagName()) Now that you have the first row, from there you just need to use getElementsByTagName (you don't want to search the document, just the row you already got).您首先从文档中获取第一行（因此您使用 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

Use event.target to pick the cell which you want to add style to,使用event.target选择要添加样式的单元格，

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

Fiidle Link菲德尔链接

Answer 3

I think this will work for you我认为这对你有用

 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