Как получить доступ к элементу на странице в javascript getElementBy

Получение html элемента по id, class, tag, name, query

Получить элемент по id:
```
document.getElementById("idname");
```

Получить элемент по class:

document.getElementsByClassName("classname");

Проверить поддержку в разных браузерах. Для использования getElementsByClassName в IE 6,7,8 нужно использовать getElementsByClassName polyfill для IE:

// Add a getElementsByClassName function if the browser doesn't have one
// Limitation: only works with one class name
// Copyright: Eike Send http://eike.se/nd
// License: MIT License

if (!document.getElementsByClassName) {
    document.getElementsByClassName = function(search) {
        var d = document, elements, pattern, i, results = [];
        if (d.querySelectorAll) { // IE8
            return d.querySelectorAll("." + search);
        }
        if (d.evaluate) { // IE6, IE7
            pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
            elements = d.evaluate(pattern, d, null, 0, null);
            while ((i = elements.iterateNext())) {
                results.push(i);
            }
        } else {
            elements = d.getElementsByTagName("*");
            pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
            for (i = 0; i < elements.length; i++) {
                if ( pattern.test(elements[i].className) ) {
                    results.push(elements[i]);
                }
            }
        }
        return results;
    }
}

Получить элемент по tag:
```
document.getElementsByTagName("div");
```
Получить элемент по name:
```
document.getElementsByName("name");
```

Получить элемент по query (CSS запросу):

document.querySelector("div#main>p"); // Вернет <p></p> который находится внутри <div id="main">
document.querySelector("div#main+p"); // Вернет <p></p> который идет после <div id="main">

Получить элемент по query с вытягиванием нескольких элементов:
```
document.querySelectorAll("p.message"); // Вернет все p у которых class="message"
```

Доступ к дочерним и родительским элементам в js

document.body.firstChild // Вернет первый дочерний элемент
document.body.lastChild // Вернет последний дочерний элемент
document.body.parentNode // Доступ к родительскому элементу (для body это html)
document.body.nextSibling // Доступ к следующему соседнему элементу - head
document.head.previousSibling // Доступ к предыдущему соседнему элементу - если после html есть разрыв строки, то вернет его, если нет - то вернет null

Правильный доступ к элементам (без учета разрывов строк, комментариев, текста не взятого в html теги), но не поддерживаемый старыми версиями IE

document.body.firstElementChild // Вернет первый дочерний html элемент
document.body.lastElementChild // Вернет последний дочерний html элемент
document.body.parentElementNode // Вернет родительский html элемент
document.body.nextElementSibling // Вернет следующий соседний html элемент
document.head.previousElementSibling // Вернет предыдущий соседний html элемент

Получение доступа ко всем элементам страницы и получение типа элемента в javascript

document.body.childNodes // Возвращает все дочерние ноды вне зависимости от их типа
document.body.children // Возвращает массив со всеми дочерними html нодами
document.body.nodeType // Возвращает 1 - если нода html элементная, 3 - если нода текстовая или пробельная или разрыв строки, 8 - нода комментария

Получение имени тега и имени ноды

.tagName // Используется только для тегов
.nodeName // Используется для всех элементов

Получение и перезапись содержимого тегов на странице с помощью js

div.innerHTML // Вернет строку со всеми элементами содержащимися в ноде (в данном случае в div)
div.innerHTML = "<p>Hello!</p>" // Также можно их перезаписать, что изменит контент страницы
input.value = "blabla" // То же самое, но для формы ввода