The requested element is not connected to the dom model. What is DOM and why is it needed? Event Basics

Working with the DOM model

Every Window object has a document property that refers to the Document object. This Document object is not a standalone object. It is the central object of an extensive API known as the Document Object Model (DOM), which defines how document content can be accessed.

DOM Overview

The Document Object Model (DOM) is the fundamental application programming interface that provides the ability to work with the content of HTML and XML documents. The DOM application programming interface (API) is not particularly complex, but there are a lot of architectural features that you should be aware of.

First, understand that nested elements in HTML or XML documents are represented as a tree of DOM objects. The tree view of an HTML document contains nodes representing elements or tags, such as and

And nodes representing lines of text. An HTML document can also contain nodes representing HTML comments. Consider the following simple HTML document:

Sample Document This is an HTML document

Example simple text.

The DOM representation of this document is shown in the following diagram:

For those unfamiliar with tree structures in computer programming, it is helpful to know that the terminology for describing them was borrowed from family trees. The node located directly above this node is called parental in relation to this node. Nodes located one level below another node are subsidiaries in relation to this node. Nodes that are at the same level and have the same parent are called sisterly. Nodes located any number of levels below another node are its children. Parent, grandparent and any other nodes above of this node, are his ancestors.

Each rectangle in this diagram is a document node, which is represented by a Node object. Please note that the picture shows three various types nodes The root of the tree is the Document node, which represents the entire document. Nodes representing HTML elements are nodes of type Element, and nodes representing text are nodes of type Text. Document, Element and Text are subclasses of the Node class. Document and Element are the two most important classes in the DOM.

The Node type and its subtypes form the type hierarchy shown in the diagram below. Note the formal differences between the generic types Document and Element, and the types HTMLDocument and HTMLElement. The Document type represents an HTML and XML document, and the Element class represents an element of that document. The HTMLDocument and HTMLElement subclasses represent specifically an HTML document and its elements:

Another thing to note in this diagram is that there are a large number of subtypes of the HTMLElement class that represent specific types of HTML elements. Each of them defines JavaScript properties that reflect the HTML attributes of a particular element or group of elements. Some of these specific classes define additional properties or methods that do not reflect the syntax of the HTML markup language.

Selecting document elements

Most client programs work on JavaScript is somehow related to the manipulation of document elements. At runtime, these programs can use the global variable document, which refers to a Document object. However, to perform any manipulation on document elements, the program must somehow obtain, or select, Element objects that refer to those document elements. The DOM defines several ways to select elements. You can select an element or elements of a document:

by the value of the id attribute;

by the value of the name attribute;

by tag name;

by CSS class or classes name;

by coincidence with a certain CSS selector.

All these element sampling techniques are described in the following subsections.

Selecting elements by id attribute value

All HTML elements have id attributes. The value of this attribute must be unique within a document—no two elements in the same document must have the same id attribute value. You can select an element by a unique id attribute value using the getElementById() method of the Document object:

Var section1 = document.getElementById("section1");

This is the simplest and most common way to select elements. If your script needs to be able to manipulate a specific set of document elements, assign values ​​to the id attributes of those elements and use the ability to search for them using those values.

IN Internet versions Explorer below IE8's getElementById() method searches for id attribute values ​​in a case-insensitive manner and also returns elements that match the name attribute value.

Selecting elements by name attribute value

The name HTML attribute was originally intended to name form elements, and the value of this attribute was used when form data was submitted to the server. Like the id attribute, the name attribute assigns a name to an element. However, unlike id, the value of the name attribute does not have to be unique: several elements can have the same name, which is quite common when used in forms of radio buttons and checkboxes. Additionally, unlike id, the name attribute is only allowed on certain HTML elements, including forms, form elements, and .

You can select HTML elements based on the values ​​of their name attributes using the getElementsByName() method of the Document object:

Var radiobuttons = document.getElementsByName("favorite_color");

The getElementsByName() method is not defined by the Document class, but by the HTMLDocument class, so it is only available in HTML documents and not available in XML documents. It returns a NodeList object, which behaves like a read-only array of Element objects.

In IE, the getElementsByName() method also returns elements whose id attribute value matches the specified value. To ensure compatibility with different versions browsers, you need to be careful when choosing attribute values ​​and not use the same strings as values ​​for the name and id attributes.

Select items by type

The getElementsByTagName() method of the Document object allows you to select all HTML or XML elements of a specified type (or by tag name). For example, you could get a read-only array-like object containing the Element objects of all the elements in the document like this:

Var spans = document.getElementsByTagName("span");

Similar to the getElementsByName() method, getElementsByTagName() returns a NodeList object. Document elements are included in the NodeList array in the same order in which they appear in the document, i.e. first element

In the document you can choose:

Var firstParagraph = document.getElementsByTagName("p");

HTML tag names are not case sensitive, and when getElementsByTagName() is applied to an HTML document, it performs a case-insensitive comparison against the tag name. The spans variable created above, for example, will also include all elements that are written as .

You can get a NodeList containing all the elements of a document by passing the wildcard character "*" to the getElementsByTagName() method.

In addition, the Element class also defines the getElementsByTagName() method. It acts exactly like the Document class version of the method, but selects only elements that are descendants of the element on which the method is called. That is, find all the elements inside the first element

You can do this as follows:

Var firstParagraph = document.getElementsByTagName("p"); var firstParagraphSpans = firstParagraph.getElementsByTagName("span");

For historical reasons, the HTMLDocument class defines special properties to access certain types of nodes. Properties images, forms And links, for example, refer to objects that behave like read-only arrays containing elements , And (but only those tags , which have an href attribute). These properties refer to HTMLCollection objects, which are much like NodeList objects, but can additionally be indexed by the values ​​of the id and name attributes.

The HTMLDocument object also defines synonymous properties embeds and plugins, which are collections of HTMLCollection elements. The anchors property is non-standard, but it can be used to access elements , which has a name attribute but no href attribute. The scripts property is defined by the HTML5 standard and is a collection of HTMLCollection elements.

Additionally, the HTMLDocument object defines two properties, each of which refers not to a collection, but to a single element. The document.body property represents the HTML document element, and the document.head property represents the . These properties are always defined in the document: even if the source document does not contain and elements, the browser will create them implicitly. The documentElement property of a Document object refers to the document's root element. In HTML documents it always represents the .

Selecting elements by CSS class

The value of the HTML class attribute is a list of zero or more identifiers, separated by spaces. It allows you to define sets of related document elements: any elements that have the same identifier in the class attribute are part of the same set. The word class is reserved in JavaScript, so client-side JavaScript uses the className property to store the value of the HTML class attribute.

Typically the class attribute is used in conjunction with CSS cascading style sheets to apply a common rendering style to all members of a set. However, in addition, the HTML5 standard defines the getElementsByClassName() method, which allows you to select multiple document elements based on the identifiers in their class attributes.

Like the getElementsByTagName() method, the getElementsByClassName() method can be called on both HTML documents and HTML elements, and returns a live NodeList object containing all descendants of the document or element that match the search criteria.

The getElementsByClassName() method takes a single string argument, but the string itself can contain multiple identifiers, separated by spaces. All elements whose class attributes contain all of the specified identifiers will be considered matched. The order of the identifiers does not matter. Note that in both the class attribute and the argument to the getElementsByClassName() method, class identifiers are separated by spaces rather than commas.

Below are some examples of using the getElementsByClassName() method:

// Find all elements with class "warning" var warnings = document.getElementsByClassName("warning"); // Find all descendants of an element with identifiers "log" // with classes "error" and "fatal" var log = document.getElementById("log"); var fatal = log.getElementsByClassName("fatal error");

Selecting Elements Using CSS Selectors

CSS Cascading Style Sheets have very powerful syntactic constructs known as selectors that allow you to describe elements or sets of elements in a document. Along with standardizing CSS3 selectors, another W3C standard known as the Selectors API defines JavaScript methods to retrieve elements matching the specified selector.

The key to this API is the querySelectorAll() method of the Document object. It takes a single string argument with a CSS selector and returns a NodeList object representing all document elements that match the selector.

In addition to the querySelectorAll() method, the document object also defines a querySelector() method, which is similar to querySelectorAll() except that it returns only the first (in document order) matching element, or null if there are no matching elements.

These two methods are also defined by the Elements class. When they are called on an element, the entire document is searched for a match for the given selector, and then the result is filtered to only include descendants of the element used. This approach may seem counterintuitive because it means that the selector string may include ancestors of the element being matched.

Document structure and document navigation

After selecting a document element, it is sometimes necessary to find structurally related parts of the document (parent, siblings, child). A Document object can be thought of as a tree of Node objects. The Node type defines properties that allow you to navigate such a tree. There is another application interface for document navigation, such as the Element object tree.

Documents as node trees

The Document object, its Element objects, and the Text objects that represent text fragments in the document are all Node objects. The Node class defines the following important properties:

parentNode

The parent node of this node, or null for nodes that have no parent, such as Document.

childNodes

A readable array-like object (NodeList) that provides a representation of child nodes.

firstChild, lastChild

The first and last child nodes, or null if the given node has no child nodes.

nextSibling, previousSibling

Next and previous brother nodes. Sibling nodes are two nodes that have the same parent. The order in which they appear corresponds to the order in the document. These properties link nodes into a doubly linked list.

nodeType

The type of this node. Nodes of type Document have a value of 9 in this property. Nodes of type Element - value 1. Text nodes of type Text - value 3. Nodes of type Comments - value 8 and nodes of type DocumentFragment - value 11.

nodeValue

Text content of the Text and Comment nodes.

nodeName

The name of an Element tag with all characters converted to uppercase.

Using these properties of the Node class, you can reference the second child node of the first child node of the Document object, as shown below:

Document.childNodes.childNodes == document.firstChild.firstChild.nextSibling

Let's assume that the document in question has the following form:

TestHello World!

Then the second child node of the first child node will be the element. In the nodeType property it contains the value 1 and in the nodeName property it contains the value “BODY”.

However, note that this API is extremely sensitive to changes in document text. For example, if you add a single line feed between the and tags in this document, that line feed character becomes the first child node (Text node) of the first child node, and the second child node becomes the element, not .

Documents as element trees

When the primary interest is in the document elements themselves, rather than in the text within them (and the white space between them), it is much more convenient to use an application interface that allows you to interpret the document as a tree of Element objects, ignoring the Text and Comment nodes that are also part of the document.

The first part of this application interface is the children property of Element objects. Like the childNodes property, its value is a NodeList object. However, unlike the childNodes property, the children list contains only Element objects.

Note that the Text and Comment nodes do not have child nodes. This means that the Node.parentNode property described above never returns nodes of type Text or Comment. The value of the parentNode property of any Element object will always be another Element object or the root of the tree - a Document or DocumentFragment object.

The second part of the document element navigation application interface is the properties of the Element object, similar to the properties for accessing child and sibling nodes of the Node object:

firstElementChild, lastElementChild

Similar to the firstChild and lastChild properties, but return the child elements.

nextElementSibling, previousElementSibling

Similar to the nextSibling and previousSibling properties, but return the sibling elements.

childElementCount

Number of child elements. Returns the same value as the children.length property.

These child and sibling element access properties are standardized and implemented in all current browsers except IE.

The DOM is often called the DOM tree because it consists of a tree of objects called nodes. In you learned what the Document Object Model (DOM) is, how to access the document object and change its properties using the console, and the difference between HTML source code and DOM.

In this manual you will find the HTML terminology that is necessary to work with JavaScript and the DOM, learn what a tree is and DOM nodes, and learn to identify the most common types of nodes. You can also create a JavaScript program in the console to interactively modify the DOM.

HTML Terminology

Understanding HTML and JavaScript terms is critical to working with the DOM. Let's take a quick look at the basic terms.

Look at this HTML element:

Home

It contains an anchor, which is a link to index.html.

• a – tag
• href – attribute
• html – attribute value
• Home – text.

Everything between the opening and closing tags constitutes an HTML element.

Let's return to the index.html file from the previous manual:

Learning the DOM


Document Object Model

The easiest way to access an element with JavaScript is the id attribute. Let's add the above link to the index.html file with id="nav".

...

Document Object Model
Home

...

Load (or refresh) the page in your browser window and look at the DOM to see if the code has been updated.

Then use the getElementById() method to access the entire element. In the console, enter the following:

document.getElementById("nav");
Home

The getElementById() method will retrieve the entire element. Now, instead of having to enter this object and method every time you need to access a nav link, you can put the element in a variable to make it easier to work with.

let navLink = document.getElementById("nav");

The navLink variable contains the anchor. Here you can easily change attributes and values. For example, to change the location of the link, change the href attribute:

navLink.href = "https://www.wikipedia.org";

You can also change the text by reassigning the textContent property:

navLink.textContent = "Navigate to Wikipedia";

Now, if you view this element in the console or check the Elements tag, you will see how it has updated.

navLink;
Navigate to Wikipedia

The changes will also be reflected on the front end.

Refreshing the page will return all the original values.

At this point, you should understand how to use the document method to access an element, how to assign an element to a variable, and how to change properties and values ​​on an element.

Tree and DOM nodes

All elements in the DOM are defined as nodes. There are many types of nodes, but there are three main ones that you will work with most often:

Element node

Text node

Comment node

When an HTML element is an element in the DOM, it is called an element node. Any single text outside an element is a text node, and an HTML comment is a comment node. Besides these three types of nodes, the document object itself is a document node, which is the root node of all other nodes.

The DOM consists of a tree structure of nested nodes, often called a DOM tree. You probably know what a family tree is - it's a schematic representation family ties, which consists of parents, children and immediate family. Nodes in the DOM are also called parent and child based on their relationship to other nodes.

For example, create a nodes.html file. add a text node to it, as well as comment and element nodes.

Learning About Nodes


An element node

A text node.

The html element node is the parent. head and body are child html nodes. body contains three child nodes, and they are all at the same level—the node type does not affect the nesting level.

Note: When working with HTML-generated DOM, indentation source code HTML creates a lot of empty text nodes that will not be visible in the DevTools Elements tab. More about this at the link.

Defining a Node Type

Each node in a document has a type, which is accessed through the nodeType property. The Mozilla Developer Network has an updated list of all node type constants. Below is a table of the most common node types.

In the Elements tab of Developer Tools, you may notice that whenever you click and highlight any line in the DOM, the value == $0 appears next to it. This is very convenient way access the currently active element.

In the node.html console, click on the first element in the body (h1).

Using the console, find out the type of the selected node using the nodeType property.

$0.nodeType;
1

By selecting the h1 element, you will see 1 as the output, which refers to ELEMENT_NODE. Do the same with the other nodes and they will return 3 and 8 respectively.

By knowing how to access an element, you can see the node's type without highlighting the elements in the DOM.

document.body.nodeType;
1

In addition to nodeType, you can also use the nodeValue property to get the value of a text or comment node, and nodeName to get the element's tag.

Changing the DOM using events

So far you've seen how to change the DOM in the console, and such changes are known to be temporary; every time the page is refreshed, all changes are lost. In you updated the background color of the page in the console. Try combining what you've learned in this tutorial with what you already know to create an interactive button that changes its background color.

Go back to the index.html file and add a button element with an id. You also need to add a link to new file to the new js directory js/scripts.js.

Learning the DOM


Document Object Model
Change Background Color

An event in JavaScript is an action that the user performs. The user hovers the mouse over an element, clicks on it, or on a specific key on the keyboard - these are all events. In this particular case, the button needs to perform an action when the user clicks on it. To do this you need to add an event listener. Create a scripts.js file and save it in a new js directory. In the file you need to define a button element and assign it to a variable.

Using the addEventListener() method, the button will listen for clicks and perform its function after the click.

...
button.addEventListener("click", () => (
// action will go here
});

Inside the function you need to place the code from the previous manual to change the background color to fuchsia.

...

This is what the script looks like:

let button = document.getElementById("changeBackground");
button.addEventListener("click", () => (
document.body.style.backgroundColor = "fuchsia";
});

Save and close the file. Refresh the index.html page in your browser. Press new button, and the background color of the page will change.

Tags: ,

This publication precedes a series of articles about alternative ways working with XML. “Alternative” because, as a rule, working with XML in 1C is limited to parsing xml using sequential reading - line-by-line parsing of text content. But there are other ways.

For example, using the XML query language xPath or XSL transformation templates. These options will be discussed in future articles. But they all rely on a basic DOM representation of XML documents. What DOM (document object model) is will be discussed in the publication.

DOM is based on the representation of a document of any structure in the form of a tree of nodes, each node (node) of which represents an element, an attribute of an element, a text value of an element, etc. The connection between nodes is built on the principle of “parent - subordinates”. The document root (DOM tree) has no parent. A dead-end element has no child (such elements are abstractly called leaves of the tree). Thus, the DOM can be created not only for XML, but for virtually any structured document (HTML, XHTML). So, for example, the user's browser, receiving the HTML code of a web page from the Internet, builds the DOM tree of this page in the RAM of the user's computer.

The DOM opens up wide possibilities for manipulating document data. You can create new nodes, insert them at different tree levels, copy nodes, delete nodes, search for nodes using different parameters, and much more.

The DOM model of an XML document is visualized in the figure below.

Any modern programming language includes tools (parsers) for working with such a tree. Receiving string content as input, the XML parser builds a tree of nodes in RAM and performs manipulations with the tree data. The advantage of this approach over line-by-line parsing is obvious: with one query to the tree you can select the necessary data without going through the entire document line by line, because the RAM contains a complete representation of the elements with all the relationships.

In the 1C platform, the DOM model is represented special object DocumentDOM, which in turn is built using the DOMBuilder object and its Read method. The input to this method is usually either an XML Reader or an HTML Reader object, which directly reads XML or HTML text content from files or loads it from a string. Well, then there are a number of constructions that allow you to extract data from the object model of the read document.

Of all the options, the most interesting from my point of view is option No. 1 using the CalculateXPathExpression method. The next article will be devoted to him.

Advantages of line-by-line parsing: the need for resources is less. Disadvantages: it takes a long time to get data, you need to read the entire file line by line, the complexity of the program code when parsing XML documents with a complex structure.

The advantage of sampling through the DOM: speed of data sampling, simplicity of the program code. Disadvantages: demanding on resources, spent on construction and queries to the DOM RAM and processing power.

The Document Object Model, or "DOM", is software interface access to elements of web pages. Essentially, it is a page API that allows you to read and manipulate the content, structure, and styles of a page. Let's figure out how it works and how it works.

How is a web page built?

The process of transforming the original HTML document into a renderable, styled and interactive page is called the “Critical Rendering Path”. While this process can be broken down into several steps, as I described in Understanding the Rendering Critical Path, these steps can be roughly grouped into two steps. In the first, the browser parses the document to determine what will ultimately be displayed on the page, and in the second, the browser performs the rendering.

The result of the first stage is what is called a “render tree”. A render tree is a representation HTML elements, which will be displayed on the page, and the styles associated with them. To build this tree, the browser needs two things:

CSSOM, representing styles associated with elements

DOM, element representation

What does the DOM consist of?

DOM is an object representation of the original HTML document. It has some differences, as we'll see below, but essentially it is an attempt to convert the structure and content of an HTML document into an object model that can be used by various programs.

The structure of DOM objects is represented by what is called a "node tree". It is so called because it can be thought of as a tree with one parent that branches into several child branches, each of which can have leaves. In this case, the parent "element" is the root element, the child "branches" are the nested elements, and the "leaves" are the contents within the elements.

Let's take this HTML document as an example:

My first web page Hello, world!

How are you?

This document can be represented as the following tree of nodes:

• html
  • head
    • title
      • My first web page
  • body
    • h1
      • Hello, world!
    • p
      • How are you?

What the DOM is not

In the example above, it appears that the DOM is a 1:1 mapping of the original HTML document. However, as I said before, there are differences. To fully understand what the DOM is, we need to look at what it is not.

DOM is not a copy of the original HTML

Although the DOM is created from an HTML document, it is not always exactly the same. There are two cases in which the DOM can differ from the source HTML.

1. When HTML contains markup errors

The DOM is the interface for accessing the actual (that is, already rendered) elements of an HTML document. During the process of creating the DOM, the browser itself can correct some errors in the HTML code.

Consider this HTML document as an example:

Hello, world!

The document lacks the elements and , which is a requirement for HTML. But if we look at the resulting DOM tree, we can see that this has been fixed:

• html
  • head
  • body
    • Hello, world!
  2. When the DOM is modified Javascript code

  In addition to being the interface for viewing the contents of an HTML document, the DOM itself can also be modified.

  We can, for example, create additional nodes for the DOM using Javascript.

  Var newParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("I"m new!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph);

  This code will change the DOM, but the changes will not appear in HTML document.

  The DOM is not what you see in the browser (i.e. the rendering tree)

  In the browser viewport you see the rendering tree, which as I said is a combination of DOM and CSSOM. What's different about the DOM and the render tree is that the latter consists only of what will eventually be rendered on the screen.

  Because the render tree only relates to what is rendered, it excludes elements that are visually hidden. For example, elements that have styles with display: none .

  Hello, world!

  How are you?

  The DOM will include the element

  • html
    • head
    • body
      • h1
        • Hello, world!
      • p
        • How are you?

  However, the render tree, and therefore what is visible in the viewport, will not be included in this element.

  • html
    • body
      • h1
        • Hello, world!
  The DOM is not what is displayed in DevTools

  This difference is slightly smaller because the DevTools Element Inspector provides the closest approximation to the DOM that we have in the browser. However, the DevTools inspector contains Additional information, which is not in the DOM.

  The best example of this is CSS pseudo-elements. Pseudo elements created using the ::before and ::after selectors are part of the CSSOM and rendering tree, but are not technically part of the DOM. This is because the DOM is created only from the original HTML document, not including the styles applied to the element.

  Even though pseudo-elements are not part of the DOM, they are present in our devtools element inspector.

  
  Summary

  DOM is the interface to the HTML document. It is used by browsers as a first step in determining what to render in the viewport, and by Javascript code to change the content, structure, or style of a page.

innerHTML
var text = element.innerHTML;
element.innerHTML = "";
Assigning a new innerHTML overwrites the code, even if the new value is appended to the current one (+=). Scripts added this way are not executed.

outerHTML
Contains the entire element and cannot be changed. Technically, writing to this property creates a new element that replaces the old one. References to the old element in variables do not change.

data
textNode.data - contents of text nodes and comments

textContent
element.textContent - text inside the element without tags.
There is also a non-standard property called innerText, which has a lot in common with textContent.

Element visibility

hidden
element.hidden = true
The hidden attribute is not supported in IE11.

Attributes

Most standard attributes in the DOM become object properties:
element.id = "id"
For non-standard attributes, the property is not created (undefined)

You can create your own DOM properties:
element.myData = (name:"John", lastName:"Smith");
and methods:
element.myFunc = function())(alert this.nodeName);
This works because DOM nodes are regular JavaScript objects. Such non-standard properties and methods do not affect the display of the tag and are only visible in JavaScript.

Accessing tag attributes:
element.hasAttribute(name)
element.getAttribute(name)
element.setAttribute(name, value)
element.removeAttribute(name)
element.attributes is a pseudo-array of attributes.

Attributes are case insensitive (html), while properties are case sensitive (javaScript).
The attribute value is always a string.

Attribute: a.getAttribute("href") - displays exactly what is in HTML
Property: a.href - may differ from the attribute value
Most often, a property depends on an attribute, but not vice versa. Changing the property does not affect the attribute.

Working with classes

The class attribute corresponds to two properties:
className - string
classList — object

classList object methods:
element.classList.contains("class") - checks whether an object contains a given class
element.classList.add("class")
element.classList.remove("class")
element.classList.toggle("class")

classList is a pseudo-array, it can be iterated through for loop.

data attributes

Custom data attributes are available not only as attributes, but also through the dataset property
data-about = "some value"
element.dataset.about

Node order

parent.contains(child) — true or false
checks if child node is nested within parent

nodeA.compareDocumentPosition(nodeB) - Provides information about the content and relative order of elements. The return value is a bitmask:

Adding and removing nodes

var div = document.createElement("div")
document.createTextNode("text")

parent.appendChild(element) - the element is added to the end of the parent
parent.insertBefore(element, nextSibling) - the element is added before nextSibling
parent.insertBefore(element, parent.firstChild) - added to the beginning
parent.insertBefore(element, null) - will work like appendChild
All insert methods return the inserted node.
When moving an element, you do not need to first remove it from its old place; the insertion method does this automatically.

element.insertAdjacentHTML(where, html) - inserts arbitrary HTML code anywhere in the document. Where specifies where the html should be inserted in relation to the element - beforeBegin, afterBegin, beforeEnd, afterEnd.
element.insertAdjacentElement(where, newElement)
element.insertAdjacentText(where, text)
The last two methods are not supported in Firefox

node.append(...nodes) – inserts nodes at the end of node ,
node.prepend(...nodes) – inserts nodes at the beginning of node ,
node.after(...nodes) – inserts nodes after node node,
node.before(...nodes) – inserts nodes before the node node,
node.replaceWith(...nodes) – inserts nodes instead of node .
here nodes are nodes or strings, in any quantities and combinations, listed separated by commas.

var fragment = document.createDocumentFragment() - simulates a DOM node that, when inserted into a document, disappears, leaving only its descendants. IN modern browsers Not recommended.

element.cloneNode(true) - deep copy of the element
element.cloneNode(false) - copy without child elements

parent.removeChild(element)
parent.replaceChild(newElement, element)
element.remove() - removes an element directly, without reference to its parent.
Methods return the remote node