Инструменты пользователя

Инструменты сайта


Боковая панель

Связь

object_elements

Object Elements

Методы:

  • previousSibling – предыдущий элемент
  • nextSibling – следующий элемент
  • childNodes – все дочерние узлы
  • firstChild и lastChild – первый и последний дочерние элементы
  • parentNode – родительский элемент

Получение смежных, дочерних и родительских элементов

IE и DOM-совместимые браузеры по разному трактуют пробелы между элементами. Если между двумя элементами есть пробелы, то Firefox например вернет указатель на текстовый элемент, в то время как IE пропустит пробел и вернет указатель на следующий за ним элемент. Поэтому лучше использовать следующие функции для получения смежных, дочерних и родительских элементов:

  • Пример 1.
// Получение предыдущего смежного элемента в DOM
function prev(elem) {
    do {
        elem = elem.previousSibling;
    } while (elem && elem.nodeType != 3);
    return elem;
}
// Получение следующего смежного элемента в DOM
function next(elem) {
    do {
        elem = elem.nextSibling;
    } while (elem && elem.nodeType != 3);
    return elem;
}

nodeType – тип узла. nodeType = 1 – текстовый узел.

То же самое для получения родительских и дочерних узлов.

  • Пример 2. Отображение дополнительной информации при нажатии кнопки
<span>Some text</span>
    <input type="button" value="Show Info" onclick="ShowHideInfo(this)"/>
    <pre id="codeExample"> 
      Come code example:
      function()
      {
      }
    </pre>

#codeExample
{
       background-color:#00FFFF;
       font-style: italic;
       display: none;
}
function ShowHideInfo(button) {
    var codeExample = next(button);
    if (codeVisible) {
        button.value = "Hide Example";
        codeExample.style.display = "none";
    }
    else {
        button.value = "Show Example";
        codeExample.style.display = "block";
    }
    codeVisible = !codeVisible;
}



object_elements.txt · Последние изменения: 2011/07/13 09:53 (внешнее изменение)