Как получить значение тега h2 для div внутри другого div с идентификатором с помощью JavaScript

Question

У меня есть div с id, у которого есть другие div без id.

Что-то вроде:

<div class="mainDivClass" id="mainDiv">
    <div class="subDivClass">
        <h2>one</h2>
              Hello One!!
    </div>

    <div class="subDivClass">
        <h2>two</h2>
              Hello Two!!
    </div>

    <div class="subDivClass">
         <h2>three</h2>
              Hello Three!!
    </div>
</div>

В моем javascript я перебираю вышеупомянутый div как:

var divLists = document.getElementById('mainDiv').firstChild.childNodes; 

for (var i = 0; i < tabLists.length; i++) { 
  var anchor = divLists[i].firstChild; 
  var iconFile;

  if(i==0)
  {
    iconFile = 'details.png';                     
  }

  else
  {
    iconFile = 'search1.png';
   }
  anchor.style.backgroundImage = 'url(' + iconFile + ')'; 
  anchor.style.backgroundRepeat = 'no-repeat';        
  anchor.style.backgroundPosition = '1px 2px';        
  anchor.className = 'toplevel-tab';
} 

Как показано, я устанавливаю переменную iconFile на значение i. Таким образом, для i = 0 это будет details.png, в то время как для всех остальных это будет search1.png.

Теперь я хочу определить значение переменной iconFile на основе значения h2 элемента. То есть, если h2 - банан, banana.png перейдет в iconFile, но если h2 - оранжевый, будет выбран orange.png.

Как получить значение h2 внутри javascript?

Спасибо за чтение !!

Nik

Answer 1

Не используйте innerHTML, это ненадежный запатентованный метод Microsoft; если вы привыкнете использовать его, у вас сразу же начнутся проблемы, если вы начнете кодировать на уровне приложения и не сможете понять, почему. Вместо этого придерживайтесь спецификации DOM.

Пример, который вы, очевидно, можете добавить в цикл ...

document.getElementById('subDivClass').getElementsByTagName('h2').firstChild.nodeValue

.parentNode - Родительский элемент элемента, на который имеется ссылка.

.parentNode.parentNode.parentNode - Вы можете использовать это столько, сколько хотите, чтобы подняться или обойти DOM.

.childNodes [0] - Индекс дочерних элементов, НЕ содержит ссылки на текстовые узлы ПОСЛЕ элемента (для этого используйте treewalker).

.nodeValue - текстовое значение узла, НЕ используйте innerHTML.

.textContent - Получает или задает текст элемента (но не дочерних элементов); немного проще, чем nodeValue, хотя все еще имеет разумные ограничения.

.previousSibling - Элемент ДО элемента ссылки, а не дочерний элемент / родитель.

.nextSibling - Элемент ПОСЛЕ ссылочного элемента, а не дочерний / родительский.

Вы можете раскрыть все объекты (например, методы, свойства и другие объекты) для любого объекта, используя оператор in, чтобы узнать, что еще доступно для вас ...

 for (i in document.getElementById('mainDiv')) {alert('i = '+i);}

Следует отметить, что если вы застряли с использованием синтаксического анализатора HTML, .nodeName будет все в верхнем регистре (например, старый способ Internet Explorer) по сравнению с использованием синтаксического анализатора XML (application / xhtml + xml), .nodeName будет работать правильно вернуть имя элемента в нижнем регистре (если вы действительно не в стиле 90-х или что-то в этом роде).

Следует также отметить, что когда вы используете previousSibling и nextSibling, одни только разрывы строк создадут textNode, и эти разрывы строк будут мешать CSS (установка font-size в 5px обычно устраняет это) .

Answer 2

var answer = function () {
    var parent = document.getElementById("mainDiv"),
        h2 = parent.getElementsByTagName("h2"),
        a = h2.length,
        b;
    for (b = 0; b < a; b += 1) {
        switch (h2[b].innerHTML) {
        case "one":
            //do something
            break;
        case "two":
            //do something
            break;
        default:
            //do something else
            break; 
        }
    }
};

Answer 3

Значение h2 будет использоваться, как показано ниже:

 for (var i = 0; i < tabLists.length; i++) { 
      var anchor = tabLists[i].firstChild; 
      var iconFile;


      if(tabLists[i].firstChild.innerHTML == "Tab 0")
      {
        iconFile = 'one.png';                     
      }

      else if(tabLists[i].firstChild.innerHTML == "apple")
      {
        iconFile = 'apple.png';
       }

      else if(tabLists[i].firstChild.innerHTML == "orange")
             {
                iconFile = 'banana.png';
       }

      else if(tabLists[i].firstChild.innerHTML == "banana")
             {
                iconFile = 'orange.png';
       }

      anchor.style.backgroundImage = 'url(' + iconFile + ')'; 
      anchor.style.backgroundRepeat = 'no-repeat';        
      anchor.style.backgroundPosition = '1px 2px';        
      anchor.className = 'toplevel-tab';

    } 

Answer 4

Если вам нужны все элементы H2 внутри mainDivClass, вы можете использовать метод getElementsByTagName:

var outerDiv = document.getElementById("mainDiv");
var h2s = outerDiv.getElementsByTagName("h2");

Возвращает все элементы H2 в виде массива элементов.