селекторы javascript - PullRequest
Новая
       19

селекторы javascript

9 голосов
/ 08 сентября 2011

Как выбрать элементы DOM в JavaScript?Как например: 

<div class="des">
    <h1>Test</h1>
        <div class="desleft">
          <p>Lorem Ipsum.</p>
        </div>
        <div class="Right">
           <button>Test</button>
        </div>
</div>

Теперь, как мне выбрать h1?Это просто часть страницы большего размера, поэтому нельзя использовать getElementsByTagName(), так как другие могут быть выбраны.Кроме того, поскольку позже в документе могут быть другие h1, я не могу прикрепить индекс (тело) к вышеуказанному.

Существует ли простой способ выбора, скажем, тега <h1>, который находится подимя класса desleft?Я не могу использовать jQuery или любые другие библиотеки.

Ответы [ 6 ]

8 голосов
/ 09 сентября 2011

Вы можете использовать это, чтобы добраться до вашего H1: 

var des = document.getElementsByClassName('des')
var fc = des[0].getElementsByTagName('h1')
alert(fc[0].innerHTML)
7 голосов
/ 13 июля 2014

Использовать querySelectorAll

Вы можете использовать querySelectorAll: 

// Will return a NodeList even if there is only one element found
var heading = document.querySelectorAll('.des > h1');

heading[1].style.color = 'red'; // NodeList is similar to an array

Это вернет NodeList .

или

Используйте querySelector, чтобы вернуть первый найденный элемент: 

var first_heading = document.querySelector('.des > h1');

first_heading.style.color = 'blue';

Обычно используется с селектором идентификатора #single-header-id.

Вот демоверсия

7 голосов
/ 13 сентября 2012

У w3.org теперь есть селекторы (http://www.w3.org/TR/selectors-api/#examples). Вот два разных способа, которые сработали для меня в Chrome. Вы можете использовать функцию querySelectorAll, которая возвращает список. 

<script type="text/javascript">
//looks for <h1> tag under <div> with className "des"
showOff1 = function() {
  var x = document.querySelector(".des h1");
  alert(x.innerHTML);      
}
//looks for <div> tag with className "desleft" and then use previousSibling to traceback <h1> tag
showOff2 = function() {
  var y = document.querySelector("div.desleft");
  var z = y.previousSibling.previousSibling;
  alert(z.innerHTML);      
}
</script>
<body onload="showOff2();">
4 голосов
/ 08 сентября 2011 
getElementsByTag()

Будет функцией, с которой вы можете начать, а затем вы можете отфильтровать элементы DOME, имеющие класс. 

var h1_array = document.getElementsByTag('h1');

var h1_class_array = [];
for (var i=0, len=h1_array.length; i < len; i++) {
    if (h1_array[i].className.indexOf('classname') !== -1) {
        h1_class_array.push(h1_array[i]);
    }
}

Функция .indexOf возвращает -1, если стрелкане найден в стоге сена.

Теперь перечитайте ваш вопрос, почему бы просто не дать идентификаторы вашего h1?

Обход DOM - одна из явных проблем javascript (введите jQuery).

простой getElementById() избавил бы вас от головной боли, и идентификаторы на всех ваших h1 в конечном итоге были бы намного чище, чем пытаться сформулировать алгоритм их выбора другими способами.

1 голос
/ 08 сентября 2011

Если вы хотите выбрать h1, то есть до первый элемент класса desleft, вы всегда можете сделать это: 

document.getElementsByClassName("desleft")[0].previousSibling.previousSibling

Пример: http://jsfiddle.net/Xeon06/ZMJJk/

previousSibling нужно вызывать дважды из-за пустого текстового узла между ними. Вот почему использование библиотек для этого действительно лучший способ.

0 голосов
/ 31 октября 2014 
var h1 = document.querySelector('.desleft').previousElementSibling;
  1. Найти элемент с className = 'desleft' с помощью селектора '.desleft'
  2. Просто вернитесь к предыдущему элементу (не к предыдущему узлу!)
...