Проверьте, содержит ли getElementsByTagName () атрибут класса | Ванильный JavaScript - PullRequest
Новая
       0

Проверьте, содержит ли getElementsByTagName () атрибут класса | Ванильный JavaScript

0 голосов
/ 11 мая 2018

Я пытался выяснить, как определить, содержит ли элемент, найденный по имени тега, определенный класс.

Я пробовал следующее, но оно не работает, и я не вижу, почему нет: 

<!DOCTYPE html>
<html>
<head>
<style>
    .mystyle {
        width: 300px;
        height: 50px;
        background-color: coral;
        color: white;
        font-size: 25px;
    }
</style>
</head>
<body>

  <p>Click the button to add the "mystyle" class to DIV.</p>

  <button onclick="myFunction()">Try it</button>

  <p><strong>Note:</strong> The classList property is not supported in Internet Explorer 9 and earlier versions.</p>

  <div id="myDIV">I am a DIV element</div>

  <table>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
  </table>

  <p id="demo"><p>

<script>
    function myFunction() {
      var x = document.getElementsByTagName("tr").classList.contains("mystyle");
      document.getElementById("demo").innerHTML = x;
    }
</script>

</body>
</html>

Приведенный выше код должен печатать false в элементе <p id="demo"><p>, но этого не происходит, и выдает следующую ошибку:

TypeError: undefined не является объектом (оценка 'document.getElementsByTagName ("tr"). ClassList.contains')

Кто-нибудь знает, как определить, содержит ли элемент, найденный по имени тега, определенный класс?

Ответы [ 2 ]

0 голосов
/ 11 мая 2018

Я бы изменил на: 

!!document.querySelectorAll('tr.mystyle').length

Проблема в том, что getElementsByTagName("tr") возвращает NodeList, а NodeList не имеет атрибута .classList. Однако вместо того, чтобы перебирать этот список или проверять только один элемент, вы можете просто проверить наличие элемента, имеющего этот класс, а затем, если его нет, !!0 станет false, и !!1 или больше станет правдой.

0 голосов
/ 11 мая 2018

getElementsByTagName() возвращает коллекцию. Вы должны пройти через все элементы. Попробуйте с querySelectorAll() следующим образом: 

function myFunction() {
  var x = document.querySelectorAll("tr");
  x.forEach(function(el){
   var y = el.classList.contains("mystyle");
    document.getElementById("demo").innerHTML += ' ' + y;
  })  
}
<p>Click the button to add the "mystyle" class to DIV.</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> The classList property is not supported in Internet Explorer 9 and earlier versions.</p>

<div id="myDIV">I am a DIV element</div>

<table>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr class="mystyle"><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
</table>

<p id="demo"><p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...