Нативный JS манипулирует DOM

внешний интерфейс JavaScript Element jQuery

Разработка передней стороны всегда была о манипулировании доме. В прошлом мы использовали библиотеки, такие как jQuery и Zepto, чтобы манипулировать домом. Позже после кадва, таких как Vue, угловые и реагирование, мы контролировали DOM путем манипулирования данными (большую часть времени), менее и меньше, чтобы напрямую манипулировать домом, не говоря уже о том, чтобы использовать родные JS для манипулирования домом.

Однако не обязательно постоянно знакомиться с этими библиотеками, необходимо понимать некоторые базовые JS-методы манипулирования DOM. Вот обзор знакомых, но незнакомых функций манипулирования DOM в JS.

Запрос

Запрос по идентификатору

document.getElementById(id) // лучшая совместимость

// demo
// HTMl
<body>
  <div id="main">
    <div id="content"></div>
  </div>
</body>

// Script
const mainDom = document.getElementById('main');

const contentDom = document.getElementById('content');

Запрос по классу

element.getElementsByClassName // ie9+
element.querySelectorAll // ie8
траверс //ie7-

// demo
// HTMl
<body>
  <div id="main">
    <div id="content">
      <p class="info test">info1</p>
      <p class="info">info2</p>
      <p class="info">info3</p>
    </div>
  </div>
</body>

// Script
const mainDom = document.getElementById('main');
const infoDomList1 = mainDom.querySelectorAll('.info.test');
const infoDomList2 = mainDom.getElementsByClassName('info test');

Поиск по тегу

element.getElementsByTagName // ie6+

// demo
// HTMl
<body>
  <div id="main">
    <div id="content">
      <p class="info test">info1</p>
      <p class="info">info2</p>
      <p class="info">info3</p>
    </div>
  </div>
</body>

// Script
const divDom = document.getElementsByTagName('div');
const pDom = divDom[0].getElementsByTagName('p');

Запрос по атрибуту

element.querySelector //ie8+
element.querySelectorAll() //ie8+
querySelector возвращает один элемент DOM, querySelectorAll возвращает NodeList

querySelectorСинтаксис очень похож на селектор в jquery,querySelectorа такжеquerySelectorAllИспользование одинаково, поэтому некоторые из следующих утверждений применимы к обоим.

// demo
// HTMl
<body>
  <div id="main">
    <div id="content">
      <p class="info test">info1</p>
      <p class="info">info2</p>
      <p class="info">info3</p>
    </div>
  </div>
</body>

// Script
const infoDom = document.querySelectorAll('.info');
const infoDom2 = document.querySelectorAll('.info:not(.test)');

querySelectorAll и querySelector не совпадают с jquery под запросом, подробности см.Элемент DOM querySelectorAll может дать вам неожиданное поведениеПроще говоряdocument.querySelector("#my-id").querySelectorAll("div div");, прямое ощущение - запрос#my-idподэлементыdiv divизdom, не на самом деле, а#my-id, а также соответствует глобальной области видимостиdiv divизdom.

получить родительский элемент

element.parentNode // в принципе совместимый

получить дочерний элемент

element.childNodes // в основном совместимы

element.childNodesне только получитьDOM, также получит текст и т. д., только когдаnodeType === 1выражается, когдаDOM.

Получить одноуровневые узлы

Получить предыдущий родственный узел

element.previousSibling//Базовая совместимость

Чтобы получить все предыдущие одноуровневые узлы, нужно пройтиpreviousSibling, доnull.

Браузер Kernel Gecko вставит текстовый узел в документ в теге в исходном коде. Итак, используйте такие методы, как Node.firstChild и Node.previous, могут ссылаться на пустой текстовый узел символа не узел, который ожидается пользователь.

Получить следующий родственный узел

element.nextSibling//В основном совместим

Получить все и обратить внимание на обоих иpreviousSiblingТакой же

Манипуляции с DOM

Создать DOM

document.createElement(tagName)

Добавить DOM

Последнее добавление, добавленное к дочернему узлу

paranetElement.appendChild(child);

добавить в начало узла

paranetElement.insertBefore(newElement, Element)

пройти черезinsertBeforeметод может бытьnewElementвставить вElementспереди, еслиElementдаnullбудуnewElementвставить вparanetElementхвост.

еслиnewElementэто уже существующий документDOM, insertBeforeпоявится, чтобы переместитьDOM(Все события будут сохранены).

Добавление к узлу

Без этой функции 😶 Это можно смоделировать с помощью метода insertBefore и nextSibling.

parentDiv.insertBefore(sp1, sp2.nextSibling);

еслиsp2нет следующего узла, тогда он должен быть последним узлом, тогдаsp2.nextSiblingвернутьnull,а такжеsp1вставляется в конец списка дочерних узлов (т.е.sp2Позади)

смотрите подробностиNode.insertBefore()

Изменить DOM

Изменить текст DOM

Element.innerHTML // получить все содержимое внутри тега Element.innerText // получить только текстовое содержимое внутри тега, не включая тег

изменить css

element.style.cssAttribute

Изменить свойства

element.setAttribute()
element.removeAttribute()
element.className

удалить DOM

paranetElement.removeChild(element)

очистить дочерние узлы

Специальной функции нет, вы можете пройти через removeChild, чтобы добиться

var element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

конец

оDOMОперация широко используемая, я пока так много думаю, я подумаю об этом позже, а затем медленно добавлю

Категории