Pages Menu Stijit.com
Twitter
Categories Menu
Как получить доступ к элементу на странице в javascript getElementBy

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

    Привязка по id, class, tag, name, query

  • Привязка по id:
    document.getElementById("idname");
    
  • Привязка по class:
    document.getElementsByClassName("classname");
    

    Проверить поддержку в разных браузерах. Для использования getElementsByClassName в IE 6,7,8 нужно использовать 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:
    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"
    

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

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 //Используется для всех элементов

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

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

Один комментарий

  1. Спасибо. Полезная шпаргалка)

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *