получить доступ к элементу HTML, используя JavaScript без getElementById - PullRequest
Новая
       5

получить доступ к элементу HTML, используя JavaScript без getElementById

0 голосов
/ 19 июля 2011

Я новичок в JavaScript.Я создал этот div под названием colorme.Я могу успешно покрасить его с помощью JavaScript.Теперь предположим, что я хочу изменить фон <p>...</p>, или <span>, и т. Д. Как мне достичь его через Javascript?(без jquery).

Как document.getElementById () будет работать на div, и я достигаю его.Теперь я не могу давать уникальные идентификаторы всем элементам.Как мне добраться до внутренних элементов, таких как <p> или <span> и т. Д.? 

<div id="colorme">
  <p>Blah Vblah Blah Content</p>
  <span>Blah Vblah Blah Content</span>
</div>

Ответы [ 10 ]

4 голосов
/ 19 июля 2011

Вы можете использовать элемент, который вы нашли в качестве контекста для getElementsByTagName. 

var colorme = document.getElementById('colorme'),
    spans = colorme.getElementsByTagName('span');

Обратите внимание, что spans - это NodeList - похожий на массив - содержащий все span элементов в пределах colorme.Если вам нужен первый (действительно единственный в вашем примере кода), используйте spans[0].

3 голосов
/ 19 июля 2011

Вы должны проверить множество функций обхода DOM, представленных в стандартном javascript.

Учебное пособие: http://www.quirksmode.org/dom/intro.html

Ссылка: http://reference.sitepoint.com/javascript/Node

и http://reference.sitepoint.com/javascript/Element

2 голосов
/ 19 июля 2011

Хотя ответы и дают хорошие способы сделать это для этого конкретного случая ....

Проблема, с которой вы столкнулись, называется DOM-traversal .Как вы знаете, DOM - это дерево, и вы действительно можете пройти по дереву, не зная заранее id элемента / типа / чего-либо еще.

Основы следующие:

  • el.childNodes для доступа к списку дочерних элементов
  • el.parentNode для доступа к родительскому элементу
  • nextSibling и previousSibling для следующих и предыдущих дочерних узлов

Для получения дополнительной информации см. [Страницы DOM MDC] (

2 голосов
/ 19 июля 2011

Вот три способа:

  1. Если вы заботитесь только о приличных браузерах, document.querySelector (возвращает первый соответствующий узел) и document.querySelectorAll (возвращает NodeList) - например, document.querySelector('#colorme p').

  2. HTMLElement.getElementsByTagName() (возвращает NodeList) - например, document.getElementById('colorme').getElementsByTagName('p')[0]

  3. HTMLElement.children и т. Д. - document.getElementById('colorme').children[0] (.firstChild, вероятно, будет текстовым узлом, много интересного из DOM, в которое можно попасть, вступление в DOM quirksmode, с которым связан, - хороший материал).

1 голос
/ 19 июля 2011

Все довольно просто: getElementsByTagName ()?

0 голосов
/ 13 ноября 2012

[после ответа я понял, что это не ответ на ваш полностью объясненный вопрос, но это ответ на вопрос, поднятый в заголовке вашего сообщения!]

Один хороший способ сделать это - объявитьглобальная переменная в верхней части вашего Javascript, которая ссылается на документ, который затем может использоваться везде (в каждой функции): 

<html>
<head>
<script type="text/javascript">

    // set a global var to acces the elements in the HTML document
    var doc = this;

    function testIt()
    {
        doc.blaat.innerHTML = 'It works!!';
    }
</script>
</head>
<body>
    <div id="blaat">Will this ever work..?!</div>
    <button onclick="testIt()">Click me and you'll see!</button>
</body>
</html>

Моим первым впечатлением, когда я получил getElemenyById (), былочто это звучит как функция, которая будет перебирать список элементов DOM, пока не найдет нужный элемент;это должно занять некоторое время.В приведенном выше примере вы просто обращаетесь к элементу напрямую.Я не уверен, действительно ли я сохраняю процессор / добавляю скорость таким образом, но по крайней мере это так:)

0 голосов
/ 19 июля 2011

getElementById - это только один из методов DOM JavaScript. Он возвращает объект DOM HTMLElement, который можно затем запросить, чтобы найти дочерние, родительские и родственные элементы. Вы можете использовать это, чтобы просмотреть ваш HTML и найти нужные вам элементы. Вот справочник для HTMLObject JavaScript DOM .

0 голосов
/ 19 июля 2011

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

var colormeDiv = document.getElementById('colorme');

var e1 = colormeDiv.getElementsByTagName('p');

var e2 = colormeDiv.getElementsByTagName('span');

, чтобы получить два элемента внутри 'colorme' div.

0 голосов
/ 19 июля 2011

Цикл по детям: 

var div = document.getElementById('colorme');

var i, l, elem;

for (i = 0, l = div.childNodes.length; i < l; i++) {
    elem = div.childNodes[i];

    // Check that this node is an element
    if (elem.nodeType === 1) {
        elem.style.color = randomColorGenerator();
    }
}
0 голосов
/ 19 июля 2011

Вы можете использовать getElementsByTagName()

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

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

...