Справочник JavaScript: 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;
}