DOM (Document Object Model, «объектная модель документа») — это независящий от платформы и языка программный интерфейс (API), позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML-документов, а также изменять содержимое, структуру и оформление таких документов.
DOM - это модель документа, загруженная в браузер и представляющая документ как иерархическую совокупность узлов дерева, где каждый узел представляет часть документа (например, элемент, атрибут, строку текста или комментарий, и т.д.). Узлы DOM связаны между собой отношениями «родительский-дочерний».
DOM позволяет:
- создавать, перемещать и изменять узлы DOM;
- добавлять к узлам DOM обработчики событий, которые срабатывают при наступлении какого-либо события.
Веб-браузеры не обязаны использовать DOM, чтобы исполнять HTML-документ. Однако DOM требуется для скриптов JavaScript, которые могут отслеживать или изменять веб-страницу динамически. Другими словами, Document Object Model — это инструмент, с помощью которого JavaScript видит содержимое HTML-страницы и состояние браузера.
Учитывая существование различных реализаций DOM в веб-браузерах, целесообразно проверять работоспособность тех или иных возможностей DOM для каждого конкретного браузера и только потом использовать их.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
function domImplementationTest() { let featureArray = [ "HTML", "XML", "Core", "Views", "StyleSheets", "CSS", "CSS2", "Events", "UIEvents", "MouseEvents", "HTMLEvents", "MutationEvents", "Range", "Traversal", ]; let versionArray = ["1.0", "2.0", "3.0"]; let i, j; if (document.implementation && document.implementation.hasFeature) { for (i = 0; i < featureArray.length; i++) { document.write(`Поддержка ${featureArray[i]}<br/>`); for (j = 0; j < versionArray.length; j++) { document.write( `версии ${versionArray[j]}: ${ document.implementation.hasFeature(featureArray[i], versionArray[j]) ? '<span style="color:green">true</span>' : '<span style="color:red">false</span>' }<br/>` ); } document.write("<br/>"); } } } domImplementationTest(); |
Основой HTML-документа являются теги, которые в соответствии с объектной моделью документа DOM являются объектами и, соответственно, доступны при помощи JavaScript и могут использоваться для изменения страницы.
Вложенные теги являются дочерними элементами родительского тега (текст, который находится внутри тега, также является объектом).
Узлы DOM (дерево тегов)
Читай также DOM-дерево
DOM – это представление документа в виде дерева узлов, имеющих родителя и дочерние узлы.
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Мои примеры</title> <h2>Заголовок H2</h2> <script src="./my_import.js"></script> </head> <body></body> </html> |
Каждый узел этого дерева – это объект, поэтому, как и любой объект в JavaScript, он может содержать пользовательские свойства и методы, например:
1 2 3 4 5 |
document.body.myData = { myName: "Alex", myAge: 30, }; console.log(document.body.myData); // {myName: 'Alex', myAge: 30} |
Пользовательские (нестандартные) свойства и методы элементов видны только в JavaScript и никак не влияют на отображение соответствующего тега.
Все, что есть, например, в HTML (в т.ч. объект document, <!DOCTYPE...>, теги, комментарии и т.п.), является частью DOM.
Согласно спецификации существует 12 типов узлов DOM, но на практике в основном работают со следующими:
- document – «входная точка» в DOM (подробнее...);
- узлы-элементы (HTML-теги, основные строительные блоки);
- текстовые узлы;
- комментарии (включают информацию, которая не будет показана, но доступна в DOM для чтения JS).
Элемент DOM - это узел, который объявлен с использованием тега в HTML-документе (например, <html>, <head>,<body> и т.д.).
Т.о. теги являются узлами-элементами (или просто элементами). Они образуют структуру дерева:
- <html> – это корневой узел;
- <head> и <body> - дочерние узлы тега <html> и т.д.;
- текст внутри элементов образует текстовые узлы (#text).
Особенности текстового узла DOM:
- содержит в себе только строку текста;
- не имеет потомков (находится всегда на самом нижнем уровне);
- специальные символы в текстовых узлах (перевод строки ↵ или \n, а также пробел ␣) являются полноправными текстовыми символами, образуют текстовые узлы и становятся частью дерева DOM;
- по историческим причинам пробелы и перевод строки перед тегом <head> игнорируются;
- после закрывающего тега </body> не может быть никаких пробелов (если мы записываем что-либо после закрывающего тега </body>, браузер автоматически перемещает эту запись в конец body, поскольку спецификация HTML требует, чтобы всё содержимое было внутри <body>).
При работе с деревом DOM с использованием инструментов разработчика в браузере пробелы в начале (конце) текста и пустые текстовые узлы (переносы строк) между тегами обычно не отображаются.
Если браузер сталкивается с некорректно написанным HTML-кодом, он автоматически корректирует его при построении DOM.
Например, при генерации DOM браузер самостоятельно обрабатывает ошибки в документе и добавляет или закрывает теги, если в начале документа нет тега <html>, то он будет создан браузером в дереве DOM (то же касается и тега <body>), или когда браузер впервые сталкивается с элементом, который не должен быть в <head>, например, с тегом <H2>, он закрывает <head> и вместо этого запускает body.
Иерархия узлов DOM
DOM позволяет изменять его элементы и содержимое, но для начала нужно получить соответствующий DOM-объект.
Нельзя получить доступ к элементу, которого ещё не существует в момент выполнения скрипта; в DOM значение null - «узел не существует».
Иерархия DOM:
- объект document (главная «точка входа» в DOM, из него можно получить доступ к любому узлу), самые верхние элементы дерева DOM доступны как свойства объекта document:
- <html> = document.documentElement;
- <body> = document.body;
- <head> = document.head.
- <html> = document.documentElement;
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Мои примеры</title> <h2>Заголовок H2</h2> <script src="./my_import.js"></script> </head> <body></body> </html> |
Виды дочерних узлов DOM:
- Дочерние узлы – узлы DOM, которые являются прямыми дочерними элементами узла (например, <head> и <body> - дочерние узлы элемента <html>).
- Потомки – все узлы DOM, которые лежат внутри узла, т.е. как прямые дочерние узлы, так и вложенные в них (например, <head> и <title> - потомки элемента <html>).
- Соседи – это узлы, у которых один и тот же родитель (например, <head> и <body> - дочерние элементы и соседи внутри элемента <html>).
Доступ к узлам DOM
Нахождение заданного узла
Свойство только для чтения Node.nodeName возвращает имя текущего узла в виде строки.
Возвращаемое значение для различных типов узлов
Синтаксис:
1 |
let str = node.nodeName; |
где nodeName - это имя текущего узла node.
Пример:
1 2 3 4 5 6 7 |
<div id="d">Hello, world!</div> <input type="text" id="t" /> <script> let myDiv = document.getElementById("d"); // <div id="d">Hello, world!</div> let text_field = document.getElementById("t"); // <input type="text" id="t"> text_field.value = myDiv.nodeName; // DIV </script> |
В XHTML (или любых других форматов XML), значение text_field будет прочитано как div (в нижнем регистре). Свойства nodeName и tagName возвращают имена элементов HTML в DOM, помеченном как HTML документ, в верхнем регистре (подробнее...).
Свойство tagName можно было бы использовать вместо nodeName, однако для текстового узла:
- nodeName возвращает #text ,
- tagName возвращает undefined.
1 2 3 4 5 6 7 |
<div id="d">Hello, world!</div> <input type="text" id="t" /> <script> let myDiv = document.getElementById("d"); // <div id="d">Hello, world!</div> let text_field = document.getElementById("t"); // <input type="text" id="t"> text_field.value = myDiv.nodeName; // DIV </script> |
Свойство parentNode возвращает:
- родителя определённого элемента DOM дерева;
- null - если узел не имеет родителя;
- null - если элемент только был создан и ещё не добавлен в DOM-дерево.
Синтаксис:
1 |
let parentNode = node.parentNode |
где
- parentNode - ссылка на родительский узел текущего элемента (родитель элемента имеет тип Element, Document или DocumentFragment).
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <body> <div id="ID"> <p id="foo">Это 1-й дочерний элемент узла div</p> <li id="LI">Это 2-й дочерний элемент узла div</li> </div> <!-- <input type="text" id="textDel" /> --> </body> </html> <script> let myNode = document.getElementById("foo"); console.log(myNode.parentNode); // <div id="ID"> ... </div> (родительский узел для "foo") </script> |
Доступный для чтения атрибут Node.childNodes возвращает живую (динамическую) коллекцию (NodeList) дочерних узлов (не потомков!) узла Node, включая элементы, текст и комментарии.
Синтаксис:
1 |
let ndList = node.childNodes; |
где node.childNodes - упорядоченная коллекция объектов элементов (тип этого списка - NodeList), которые являются дочерними для элемента node. Если у элемента node нет дочерних, то node.childNodes пуст.
Несмотря на то, что NodeList не является массивом (Array), его можно перебрать при помощи метода forEach(). NodeList также можно конвертировать в Array при помощи метода Array.from().
Пример ниже последовательно выведет дочерних элементов document.body:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <body> <div>Начало</div> <ul> <li>Список_1</li> <li>Список_2</li> </ul> <div>Конец</div> ...HTML-код 1... <script> console.log(document.body.childNodes); // NodeList(8) [text, div, text, ul, text, div, text, script] for (let i = 0; i < document.body.childNodes.length; i++) { console.log(document.body.childNodes[i]); } </script> ...HTML-код 2... </body> </html> |
Если запустить пример выше, то последним будет выведен элемент <script>, несмотря на то, что в документе есть ещё «...HTML-код 2...». На момент выполнения скрипта браузер ещё до элемента «...HTML-код 2...» не дошёл, поэтому скрипт его не выведет.
Свойство Element.children, доступное только для чтения, возвращает живую (динамическую) коллекцию (HTMLCollection), которая содержит все дочерние элементы узла Element.
Если элемент не имеет дочерних элементов, дочерние элементы представляют собой пустой список длиной 0.
Element.children включает только узлы элементов. Чтобы получить все дочерние узлы, включая узлы, не являющиеся элементами, например узлы текста и комментариев, используйте Node.childNodes.
Синтаксис:
1 |
collection = node.children; |
где
- collection - упорядоченная коллекция (HTMLCollection) элементов DOM, которые являются дочерними элементами узла node.
Вы можете получить доступ к отдельным дочерним узлам в коллекции, используя метод item() в коллекции или используя скобочную нотацию в стиле массива JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<body> <div>Начало</div> <ul> <li>Список_1</li> <li>Список_2</li> </ul> </body> <script> let myElchildren = document.body.children; console.log(myElchildren); // HTMLCollection(4) [div, ul, script] console.log(myElchildren[0]); // <div>Начало</div> (доступ как к элементу псевдомассива) console.log(myElchildren.item(1)); // <ul> ... </ul> (доступ через item()) </script> |
Метод node.hasChildNodes() возвращает Boolean значение, показывающее имеет ли текущий узел node дочерние узлы или нет.
Синтаксис:
1 |
node.hasChildNodes() |
Метод Document.querySelector() возвращает:
- первый элемент (Element) документа, который соответствует указанному в аргументе селектору или группе селекторов;
- null - если совпадений не найдено.
Сопоставление аргумента с узлами DOM выполняется с использованием последовательного обхода всех узлов документа в глубину, начиная с первого элемента в разметке документа.
Синтаксис:
1 |
element = document.querySelector(selectors); |
где
- element - ссылка на объект типа Element, являющийся первым элементом DOM, который соответствует указанному в аргументе селектору (группе селекторов) selectors;
- selectors - строка DOMString, содержащая один или более селекторов для сопоставления (если не является допустимой строкой селектора CSS, то генерируется исключение SYNTAX_ERR).
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <body> <ul class="UL"> <li class="book Book_1">Book_1</li> <li class="book Book_2">Book_2</li> <li class="book Book_3">Book_3</li> </ul> <ul class="UL"> <li class="Car_1">Car_1</li> <li class="Car_2">Car_2</li> <li class="Car_3">Car_3</li> </ul> </body> </html> <script> let myBookQS = document.querySelector(".UL"); console.log(myBookQS); // <ul class="UL"> ... "book Book..." ... </ul> console.log(myBookQS.children); // HTMLCollection(3) [li.book.book_1, li.book.book_2, li.book.book_3] (живая коллекция) </script> |
Если вам нужен список всех элементов, соответствующих указанным селекторам, используйте метод querySelectorAll():
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<html> <body> <ul class="UL"> <li class="book Book_1">Book_1</li> <li class="book Book_2">Book_2</li> <li class="book Book_3">Book_3</li> </ul> <ul class="UL"> <li class="Car_1">Car_1</li> <li class="Car_2">Car_2</li> <li class="Car_3">Car_3</li> </ul> </body> </html> <script> let myBookQS_All = document.querySelectorAll(".UL"); console.log(myBookQS_All); // NodeList(2) [ul.ul, ul.ul] console.log(myBookQS_All[1]); // <ul class="UL"> "Car_..." </ul> (неживая коллекция) myBookQS_All[1].remove(); // удаляем второй элемент коллекции NodeList console.log(myBookQS_All); // NodeList(2) [ul.ul, ul.ul] (коллекция не изменилась) </script> |
Символы, которые не являются частью стандартного синтаксиса CSS должны быть экранированы символом обратной косой черты. Поскольку JavaScript также использует экранирование символом обратной косой черты, будьте особенно внимательны при написании строковых литералов с использованием этих символов (подробнее...).
Псевдо-элементы CSS никогда не вернут никаких элементов, как указано в API селекторов.
Метод Document.querySelectorAll() возвращает статическую (неживую) коллекцию (NodeList), содержащую все найденные элементы документа, которые соответствуют указанному в аргументе метода селектору.
Синтаксис:
1 |
elementList = document.querySelectorAll(selectors); |
где
- elementList - статический (non-live) NodeList, содержащий все элементы в пределах документа, которые соответствуют как минимум одному из указанных селекторов selectors, или пустой NodeList в случае отсутствия совпадений указанному в аргументе селектору (группе селекторов) selectors;
- selectors - строка DOMString, содержащая один или более селекторов для сопоставления (если не является допустимой строкой селектора CSS, то генерируется исключение SYNTAX_ERR); несколько селекторов разделяются запятыми.
Символы, которые не являются частью стандартного синтаксиса CSS должны быть экранированы символом обратной косой черты. Поскольку JavaScript также использует экранирование символом обратной косой черты, будьте особенно внимательны при написании строковых литералов с использованием этих символов (подробнее...).
Если в строке selectors содержатся CSS псевдоэлементы, то возвращаемый список будет всегда пуст.
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<html> <body> <ul class="UL_1"> <li class="book Book_1"> Book_1 <ul><li><p class="ID">Это параграф</p></li></ul> </li> <li class="book Book_2">Book_2</li> <li class="book Book_3">Book_3</li> </ul> <ul class="UL_2"> <li class="Car_1">Car_1</li> <li class="Car_2">Car_2</li> <li class="Car_3">Car_3</li> </ul> </body> </html> <script> let myBookQS_All = document.querySelectorAll(".UL_2, .UL_1, .ID"); console.log(myBookQS_All); // NodeList(3) [ul.ul_1, p.id, ul.ul_2] (неживая коллекция) console.log(myBookQS_All[1]); // <p class="ID">Это параграф</p> myBookQS_All[1].remove(); // удаляем второй элемент коллекции NodeList console.log(myBookQS_All); // NodeList(3) [ul.ul_1, p.id, ul.ul_2] (коллекция не изменилась) </script> |
Работа только с узлами-элементами
Учитывают только узлы-элементы:
- children – коллекция (HTMLCollection) элементов DOM, которые являются дочерними элементами узла;
- firstElementChild, lastElementChild – первый и последний дочерний элемент;
- previousElementSibling, nextElementSibling – соседи-элементы;
- parentElement – родитель-элемент.
1 2 |
console.log( document.documentElement.parentNode ); // document console.log( document.documentElement.parentElement ); // null |
Причина в том, что родителем корневого узла document.documentElement (<html>) является document. Но document – это не узел-элемент, так что parentNode его вернёт, а parentElement - нет.
Навигация по узлам внутри родительского узла
Свойство только для чтения Node.firstChild возвращает:
- первый потомок узла в древе или
- null, если узел является бездетным.
Если узел это документ, он возвращает первый узел в списке своих прямых дочерних элементов.
Синтаксис:
1 |
let childNode = node.firstChild; |
где childNode - это ссылка на первый потомок узла node, если таковой имеется, в противном случае - null.
Примеры (обратите внимание на обработку пробелов как текстовых узлов):
1 2 3 4 5 6 7 8 |
<!-- Пробел между <p> и <span> отсутствует --> <p id="myNode"><span>My span</span></p> <script type="text/javascript"> let result = document.getElementById("myNode"); console.log(result.firstChild); // <span>My span</span> console.log(result.firstChild.nodeName); // SPAN (имя узла в виде строки) </script> |
1 2 3 4 5 6 7 8 9 10 |
<!-- Пробел между <p> и <span> --> <p id="myNode"> <span>My span</span> </p> <script type="text/javascript"> let result = document.getElementById("myNode"); console.log(result.firstChild); // #text console.log(result.firstChild.nodeName); // #text </script> |
Любое пустое пространство между узлами (в т.ч. единичный пробел, разрыв строки, отступ и т. д.) является причиной вставки узла #text.
Если эти пробелы удаляются из источника, узлы #text не вставляются и элемент span становится первым потомком абзаца <p id="myNode">.
Свойства nodeName и tagName возвращают имена элементов HTML в DOM, помеченном как HTML документ, в верхнем регистре (подробнее...).
Свойство lastChild возвращает последнего потомка в узле.
1 |
let last_child = node.lastChild |
Возвращаемый элемент last_child является последним потомком узла node. Если в опрашиваемом узле node нет дочерних элементов, node.lastChild возвращает null .
Если у тега есть дочерние узлы, условие ниже всегда верно:
1 2 |
node.childNodes[0] === node.firstChild node.childNodes[node.childNodes.length - 1] === node.lastChild |
Свойство Node.nextSibling используется только для чтения и возвращает:
- узел, непосредственно следующий за данным узлом в списке childNodes его родительского элемента, или
- null, если данный узел последний в этом списке.
Свойство Node.previousSibling используется только для чтения и возвращает:
- узел, предшествующий указанному в родительском элементе childNodes, или
- null, если указанный узел первый в своём родителе.
Синтаксис:
1 2 |
nextNode = node.nextSibling previousNode = node.previousSibling; |
Браузеры, основанные на Gecko, вставляют текстовые узлы в документ для представления пробелов в разметке. Поэтому узел, полученный, например, при использовании Node.firstChild или Node.previousSibling может относиться к пробелу, а не к тому элементу, который вы хотели бы получить.
Удаление узлов или элементов DOM
Метод removeChild() удаляет дочерний элемент, переданный в аргумент метода, из DOM и возвращает удалённый элемент.
Синтаксис:
1 2 |
let oldChild = node.removeChild(child); node.removeChild(child); |
где
- child - дочерний элемент который будет удалён из DOM;
- node - родительский узел удаляемого child;
- oldChild - переменная, в которую передана ссылка на удаляемый дочерний элемент (oldChild === child).
Удалённый дочерний элемент остаётся в памяти, но больше не является частью DOM. Вы можете повторно использовать удалённый элемент с помощью ссылки.
Метод генерирует исключение в случае:
- если child не является дочерним элементом node;
- если child являлся дочерним элементом node во время вызова метода, но был удалён во время вызова обработчика событий удаляющего элемент (т.e при удалении элемента непосредственно перед вызовом обработчика событий).
Метод Element.remove() удаляет элемент Element из DOM-дерева, в котором он находится.
Примеры удаления всех потомков в узле:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script> // С использованием метода removeChild() while (node.firstChild) { node.removeChild(node.firstChild); } // или while (node.lastChild) { node.removeChild(node.lastChild); } // или while (node.hasChildNodes()) { node.removeChild(node.lastChild); } // С использованием метода remove() while (node.firstChild) { node.firstChild.remove(); } // или while (node.lastChild) { node.lastChild.remove(); } </script> |
Удаление элемента с известным родительским узлом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <body> <div id="ID"> <p id="foo">Это 1-й дочерний элемент узла div</p> <li id="LI">Это 2-й дочерний элемент узла div</li> </div> <!-- <input type="text" id="textDel" /> --> </body> </html> <script> // Функция, принимающая родительский и дочерний узел, удаляющая дочерний узел function delChildNode(parentId, childID) { let parentNode = document.getElementById(parentId); let childNode = document.getElementById(childID); parentNode.removeChild(childNode); //удаляем дочерний узел childNode из родительского parentNode } setTimeout(delChildNode, 5000, "ID", "LI"); // задержка для иллюстрации работы </script> |
Удаление элемента без указания его родителя:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <body> <div id="ID"> <p id="foo">Это 1-й дочерний элемент узла div</p> <li id="LI">Это 2-й дочерний элемент узла div</li> </div> <!-- <input type="text" id="textDel" /> --> </body> </html> <script> // Функция, удаляющая дочерний узел без указания его родителя function delChildNode(childID) { let childNode = document.getElementById(childID); if (childNode.parentNode) { childNode.parentNode.removeChild(childNode); //удаляем узел childNode } } setTimeout(delChildNode, 5000, "LI"); // задержка для иллюстрации работы </script> |
Удаление всех дочерних элементов выбранного узла:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <body> <div id="ID"> <p id="foo">Это 1-й дочерний элемент узла div</p> <li id="LI">Это 2-й дочерний элемент узла div</li> </div> <!-- <input type="text" id="textDel" /> --> </body> </html> <script> // Функция, удаляющая все дочерние узлы переданного в неё узла function delChildNode(myParNode) { let myParentNode = document.getElementById(myParNode); while (myParentNode.firstChild) { myParentNode.removeChild(myParentNode.firstChild); //удаляем все дочерние узлы } } setTimeout(delChildNode, 5000, "ID"); // задержка для иллюстрации работы </script> |
Удаление элемента коллекции NodeList с заданным номером:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html> <body> <div id="ID"> <p id="foo">Это 1-й дочерний элемент узла div</p> <li id="LI">Это 2-й дочерний элемент узла div</li> </div> <input type="text" id="textDel" /> </body> </html> <script> function delChildNode() { let delElement = document.getElementById("ID"); console.log(delElement); // <div id="ID"> ... </div> console.log(delElement.childNodes); // NodeList(5) [text, p#foo, text, li#LI, text] delElement.removeChild(delElement.childNodes[3]); // удален узел li#LI let text = document.getElementById("textDel"); text.value = `дочерний элемент ${delElement} удален`; } setTimeout(delChildNode, 2000); // задержка для иллюстрации работы </script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<body> <div>Начало</div> <ul> <li>Список_1</li> <li>Список_2</li> </ul> <div>hello</div> console.log("hello"); <style type="text/css"> { display: none !important; } </style> </body> <script> // Функция очистки HTML от заданных тегов function cleanHTML() { let root = document.implementation.createHTMLDocument().body; // создаем тело нового HTML документа root.innerHTML = this.document.body.innerHTML; // загружаем HTML разметку в созданный документ root.querySelectorAll("script, style, img").forEach(function (element) { element.remove(); // удаляем заданные теги }); console.log(root.innerHTML) // (выведем в консоль для контроля, удалены теги style и script) return root.innerHTML; // возвращаем очищенную HTML разметку } cleanHTML(); // вызов функции </script> |