This is the 17th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

DOM

What is DOM?

DOM is an acronym for Document Object Model, which is translated as Document Object Model.

  • D stands for Document, which is DOM parsing the HTML page into a Document. A Document object is also provided.
  • O stands for Object, which is DOM parsing each element of an HTML page into an Object.
  • M stands for Model, which is the DOM for relationships between objects.

The DOM standard

Since the standard specification of the DOM is drafted and defined by the W3C organization, the W3C definition of the DOM is the most authoritative interpretation available. W3C DOM definition W3C DOM definition

The Docunent Object Model is a platforim-and language-neutral interface that will allow programs and scripts to dynarnically access and update the content, structure and style of docunents.The docurnent can be further processed and the results of that processing can be incorporated back into the presented page.

The following is a translation by the author (fYI) :

DOM is a language – and platform-independent interface that allows any language or script to dynamically access and update the content, structure, and style of HTML documents. The HTML page can be further processed, and the results of that processing can be incorporated into the rendered HTML page.

The effect of DOM

DOM is designed to parse HTML page documents, making it easy for the JavaScript language to access and manipulate the content in HTML pages.

DOM is a standard specification defined by the W3C and supported by major browser vendors. DOM is not strictly a JavaScript language.

We can use the DOM in the JavaScript language because browsers encapsulate the standard specification content of the DOM in a form supported by the JavaScript language.

This is also illustrated by the fact that we can only call objects in the DOM, but not modify them.

After the browser loads and runs the HTML page, the DOM structure is created. Because the content in the DOM is encapsulated as an object in the JavaScript language, we can use the JavaScript language to access and manipulate the content in the HTML page through the DOM structure.

The DOM tree structure

DOM can access and trust the content, structure, and style in HTML pages because DOM parses the HTML page into a tree structure.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sample page</title>
</head>
<body>
        <h2>This is a sample page</h2>
        <p id="p" title="this is p.">This is a paragraph</p>
</body>
</html>
Copy the code

The above sample HTML page is drawn as a DOM tree structure with the following effect:

The specific analysis diagram of HTML code and DOM tree structure is as follows:

What is a node

Originally a network term, Node refers to a connection point in a network. A network is a collection of nodes.

Nodes are also an important concept in the DOM tree structure. Simply put, nodes, as connection points in the DOM tree structure, eventually constitute a complete DOM tree structure.

constant value describe
Node.DOCUMENT_NODE 9 Document node, representing the entire HTML page (equivalent to a Document object)
Node.ELEMENT_NODE 1 Element nodes that represent tags in AN HTML page (that is, the structure of an HTML page)
Node.ATTRIBUTE_NODE 2 Attribute node that represents the attribute contained in the opening tag of an HTML page. The Node interface no longer implements this element attribute in the DOM 4 specification
Node.TEXT_NODE 3 A text node that represents the text content contained by a tag in an HTML page

The DOM node tree

Through the concept of nodes, the original DOM tree structure can be changed to DOM node tree structure for representation.

The schematic parsing diagram of HTML code and DOM node tree structure is as follows:

The DOCUMENT object

The Document object is one of the more important objects in the DOM standard specification. This object provides properties and methods for accessing and updating the content of an HTML page.

The Document object serves as the DOM’s population for accessing and updating the content of the HTML page. In simple terms, you can think of the Document object as representing an HTML page in the DOM’s standard specification.

The Document object provides attributes and methods that can be used to locate elements in an HTML page or create new elements.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The DOCUMENT object</title>
</head>
<body>
<script>
    /* * document object * DOM pre-defined - already created - allows direct use of * to get the source code of the HTML page - this object represents the current HTML page * */

    console.log(document);
    // Document is indeed a JavaScript object
    console.log(document instanceof Object);//true
    // The properties and methods of the document object are defined on the stereotype
    console.log(Document.prototype);/ / the Document {... }
    // the document is already created and we don't need to create it ourselves
    var document = new Document();
    console.log(document);

</script>
</body>
</html>
Copy the code

Inheritance chain relation

The Document object inherits from the Node object. The Node object, which in turn inherits from the EventTarget object, is one of the most important objects in the DOM standard specification.

// The document object is inherited from Node
console.log(Document.prototype instanceof Node);//true
// Node objects are inherited from EventTarget
console.log(Node.prototype instanceof EventTarget);//true

console.log(Document.prototype instanceof EventTarget);//true
Copy the code

The properties and methods of the Document object are mostly inherited from Node objects and EventTarget objects. Of course, there are also some properties and methods that implement the HTML Document interface.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document object inheritance chain</title>
</head>
<body>
<script>
    // The document object is inherited from Node
    console.log(Document.prototype instanceof Node);//true
    // Node objects are inherited from EventTarget
    console.log(Node.prototype instanceof EventTarget);//true

    console.log(Document.prototype instanceof EventTarget);//true
    // The inheritance relationship between objects in the DOM is much more complex than the inheritance relationship in syntax
    console.log(Document.prototype instanceof HTMLDocument );
</script>
</body>
</html>
Copy the code

Method to locate page elements

The Document object provides attributes and methods to locate page elements, which is one of the main applications of the Document object in the DOM standard specification.

The Document object provides the following methods for locating page elements:

  • The getElementByld() method: locates the page element by its ID attribute value.
  • The getElementsByName() method: locates the page element by its name attribute value.
  • GeElementsBy TagName() method: Locate a page element by its element name.
  • The getElementsByClassName() method: locates the page element by its class attribute value.
  • QuerySelector () method: uses CSS selectors to locate the first matched element.
  • QuerySelectorAll () method: uses CSS selectors to locate all matching elements.

1. The getElenentByld() method

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GetElementById () method</title>
</head>
<body>
<div id="d1"></div>
<button id="btn">button</button>
<script>
    //1. Define the element through the Document object's getElementById() method
    var buttonElement = document.getElementById('btn');
    /* * DOM provides a series of objects -- each element of an HTML page * 
    console.log(buttonElement instanceof Object);//true
    console.log(buttonElement instanceof HTMLButtonElement);//true

    var d1 = document.getElementById('d1');
    console.log(d1 instanceof HTMLDivElement);//trues
</script>
</body>
</html>
Copy the code

Note: The getElenentByld() method lookup is unique and inefficient.

2. GetElementsByName () method

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GetElementByName () method</title>
</head>
<body>
<button name="btns">button</button>
<button name="btns">button</button>
<button name="btns">button</button>
<button name="btns">button</button>
<button name="btns">button</button>
<script>
    // The name attribute is not unique ---- the result can be multiple or one
    var buttonElements = document.getElementsByName('btns');
    /* * NodeList collection - array object * gets each corresponding element - by index value * */
    console.log(buttonElements[2]);
    console.log(buttonElements instanceof NodeList);//true
</script>
</body>
</html>
Copy the code

3, geElementsBy TagName() method

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The getElementsByTagName () method</title>
</head>
<body>
<button name="btns">button</button>
<button name="btns">button</button>
<button name="btns">button</button>
<button name="btns">button</button>
<button name="btns">button</button>
<script>
    var buttonElements = document.getElementsByTagName('button');
    console.log(buttonElements);
/* HTMLCollection -- array-like objects */
    console.log(buttonElements[0]);
</script>
</body>
</html>
Copy the code

The getElementsByClassName() method

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GetElementsByClassName () method</title>
</head>
<body>
<button class="btns">button</button>
<button class="btns">button</button>
<button class="btns">button</button>
<button class="btns">button</button>
<button class="btns">button</button>
<script>
    var buttonElements = document.getElementsByClassName('btns');
    //HTMLCollection -- array-like objects
    console.log(buttonElements);
</script>
</body>
</html>class
Copy the code