Javascript DOM как?

Question

Я нуб-джаваскрипт.

Я бы хотел выбрать второй элемент 'p' в div.box. Как мне это сделать?

Большое спасибо! Том

Answer 1

Чтобы получить второй элемент p в div с блоком класса, вы должны сделать это:

var paragraph = null;
var divs = document.findElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
    var div = divs[i];
    if (div.class == 'box') {
        var paragraphs = div.getElementsByTagName('p');
        if (paragraphs.length > 1)
            paragraph = paragraphs[1];
        break;
    }
}

Тогда абзац будет в переменной paragraph (или ноль, если он не найден).

Однако вы можете сделать это намного проще с помощью такой библиотеки, как jQuery :

var paragraph = $('div.box p:eq(1)');

Answer 2

<script type="text/javascript">
    var boxElem = document.getElementById('box'),
        pElems = boxElem.getElementsByTagName('p'),
        whatYouWant = pElems[1]; // [1] is the second element in the response from getElementsByTagName
</script>

Answer 3

Без использования jQuery основным методом будет прикрепление уникального идентификатора к вашему элементу Dom

<p id="second_p_elmt"> [...] </p>

и последующий доступ к нему через метод getElementById ():

<script ...>
  var second_p_elmt = document.getElementById('second_p_elmt');
</script>

Answer 4

У вас есть несколько вариантов. Как указано выше, вы можете использовать одну из превосходных сред, таких как jQuery или prototype. Или вы даете <p/> идентификатор, который вы можете использовать просто с document.getElementById().

Затем, как указывало reko_t, без вышесказанного вы должны написать длинный код обхода DOM (что предпочтительнее, если вы не используете JS-фреймворки в других местах, а не встраивать их только для этой задачи).

В самых последних браузерах (а именно, IE> = 8, FF> = 3.5, последние Opera и Safari> 3) вы также можете использовать этот простой фрагмент:

var p = document.querySelectorAll("div.box p");