JS-10 DOM Tree, document object, Node node navigation, table element navigation, DOM acquisition element, nodeType, nodeName, tagName, innerHTML, textContent

1_DOM and BOM Introduction
- 1.1_DOM
- 1.2 Understanding of DOM Tree
- 1.3 Learning order of DOM
- 1.4 Inheritance diagram of DOM
- 1.5_document object
2_Navigation of nodes
3_Navigation of table elements (used less)
4_Methods of getting elements
5_node properties
- 5.1_nodeType
- 5.2_nodeName, tagName
- 5.3_innerHTML, textContent, nodeValue
- 5.4_Other properties

1_Introduction to DOM and BOM

I learned the basic grammar of JavaScript before, which belongs to ECMAScript and is the grammatical part of JavaScript itself;

The global object of window contains these contents:

I have learned Object, Array, Date, etc. in the JavaScript grammar part before;
There are also DOM and BOM parts;

DOM Document Object Model (Document Object Model), which represents all the content of the page as an object that can be modified;

BOM Browser Object Model (Browser Object Model), other objects provided by the browser to process all content other than documents; such as navigator, location, history and other objects;

1.1_DOM

The browser will render the written HTML and CSS, and may manipulate it through JavaScript:

The browser abstracts each element (Element) written in HTML into an object;
These objects can be accessed through JavaScript to operate the page;
This abstraction process is called Document Object Model (Document Object Model);

The entire document is abstracted into document object:

For example, document.documentElement corresponds to the html element;
For example, document.body corresponds to the body element;
For example, document.head corresponds to the head element;

Learning DOM is learning how to operate documents through avaScript;

1.2 Understanding of DOM Tree

A page not only has html, head, and body elements, but also includes many sub-elements:

In the html structure, a tree structure will eventually be formed;
When abstracted into DOM objects, they also form a tree structure, which we call DOM Tree;

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-OT1dxop5-1686032143344)(…/pho/DOM Tree.jpg)]

1.3_DOM learning order

Relationships between DOM elements
Get DOM element
The type, tag, and content of the DOM node
attributes and properties of DOM nodes
Creation, insertion, cloning, deletion of DOM nodes
Styles and classes of DOM nodes
DOM element/window size, scrolling, coordinates

1.4 Inheritance diagram of DOM

DOM is equivalent to a bridge between JavaScript, HTML, and CSS. Through the DOM API provided to us by the browser, we can do anything to elements and their contents;

<script>
    // The concept of inheritance:
      // What are the benefits of inheritance:
    // 1. Increase code reuse
    // 2. Inheritance is the premise of polymorphism

    //father
    class Person {<!-- -->
      constructor(name, age) {<!-- -->
        this.name = name
        this.age = age
      }

      running() {<!-- -->
      }

      eating() {<!-- -->
      }
    }
    
   //The subclass inherits the parent class through the extends keyword
    class Student extends Person {<!-- -->
      studying() {<!-- -->

      }
    }

    class SmallStudent extends Student {<!-- -->
      dwzry() {<!-- -->
      }
    }

    class BigStudent extends Student {<!-- -->
      xwjf() {<!-- -->
      }
    }

    class Teacher extends Person {<!-- -->
    }

    var stu = new Student("xixi", 18)
    stu. running()
    stu. eating()
    stu. studying()
  </script>

1.5_document object

The entire loaded web page represented by the Document node, its instance is the global document object

All operations on the DOM start from the document object;
It is the entry point of DOM, which can access any node element from document;

For the topmost html, head, and body elements, get them directly from the document object:

html element: = document.documentElement
body element: = document.body
head element: = document.head
Document declaration: = document.doctype

Navigation of 2_ nodes

After obtaining a node (Node), obtain other nodes according to this node, which is called navigation between nodes.

The following relationships exist between nodes:

Parent node: parentNode
Former sibling node: previousSibling
Subsequent sibling node: nextSibling
Child nodes: childNodes
- The first child node: firstChild
- The second child node: lastChild

<body>
  
  <!-- I am a comment -->
  i am text

  <div class="box">Hahahahaha</div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  
  <script>

    // var htmlEl = document.documentElement
    // var bodyEl = document. body
    // var headEl = document.head
    // var doctype = document.doctype
    // console. log(htmlEl, bodyEl, headEl, doctype)

    // 1. Get the navigation of the node
    var bodyEl = document. body
    // 1.1. Get all child nodes of body
    // console.log(bodyEl.childNodes)
    // 1.2. Get the first child node of body
    var bodyElFirstChild = bodyEl.firstChild
    // 1.3. Get the comments in the body
    var bodyElCommentChild = bodyElFirstChild. nextSibling
    console.log(bodyElCommentChild)
    // 1.4. Get the parent node of the body
    var bodyParent = bodyEl. parentNode
    console. log(bodyParent)

  </script>

</body>

3_Navigation of table elements (less used)

The table element supports (in addition to those given above) the following attributes:

table.rows – collection of tr elements;

table.caption/tHead/tFoot – reference elements caption, thead, tfoot;

table.tBodies – collection of tbody elements;

The thead,

, elements provide the rows attribute: tbody.rows – table internal elements collection of

tr.cells – the collection of and cells in the given ;
tr.sectionRowIndex – the given position (index) in the enclosing //;
tr.rowIndex – index in the entire table (including all rows of the table);

and : td.cellIndex – The number of the cell in the enclosing .

<body>
  
  <!-- advanced elements: table/form -->
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>age</th>
        <th>height</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>why</td>
        <td>18</td>
        <td>1.88</td>
      </tr>
      <tr>
        <td>kobe</td>
        <td>30</td>
        <td>1.98</td>
      </tr>
    </tbody>
  </table>

  <script>

    var tableEl = document.body.firstElementChild

    // Get the internal descendant elements through the table element
    // console.log(tableEl.tHead, tableEl.tBodies, tableEl.tFoot)
    // console.log(tableEl.rows)

    // get a row of elements
    // var rowEl = tableEl.rows[2]
    // console. log(rowEl. cells[0])
    // console.log(rowEl.sectionRowIndex)
    // console.log(rowEl.rowIndex)

  </script>

</body>

4_Methods of getting elements

The first two methods are used more

<body>
  <div class="box">
    <h2>I am the title</h2>
    <div class="container">
      <p>
        I am a paragraph, <span class="keyword">coderwhy</span> hahahaha
      </p>
      <p>
        I am also a paragraph, <span class="keyword">kobe</span> hehehehe
      </p>

      <div class="article">
        <h3 id="title">I am a small title</h3>
        <p>
          I am the content of the article
        </p>
      </div>
    </div>
  </div>
  
  <script>

    // 1. Get through navigation
    // 1. Get the body
     var bodyEl = document. body

    // 2. Get the box
     var boxEl = bodyEl. firstElementChild

    // 3. Take the container
     var containerEl = boxEl. children[1]

    // 4. Take p
     var pEl = containerEl. children[0]

    // 5. Get the keyword
     var spanEl = pEl. children[0]
    spanEl.style.color = "red"

    // Two. getElementBy*
    // 1. Get the element by className
     var keywordEls = document. getElementsByClassName("keyword")
    // // Modify the first one
    keywordEls[0].style.color = "red"
    // // modify all
    for (var i = 0; i < keywordEls. length; i ++ ) {<!-- -->
       keywordEls[i].style.color = "red"
    }

    // 2. Get the element by id
    var titleEl = document. getElementById("title")
    titleEl.style.color = "orange"


    // 3.querySelector: query by selector
    var keywordEl = document. querySelector(".keyword")
    // keywordEls is an object, iterable
    // Iterable object: String/array/list of nodes
    var keywordEls = document. querySelectorAll(".keyword")
    for (var el of keywordEls) {<!-- -->
      el.style.color = "red"
    }
    console.log(keywordEls)

    var titleEl = document. querySelector("#title")
    titleEl.style.color = "orange"

  </script>

</body>

Attributes of 5_node

5.1_nodeType

The nodeType property provides a way to get the type of node; has a numeric value

<body>
  <!-- I am a comment -->
  i am text
  <div class="box">
    <h2>I am the title</h2>
    <p>i am content</p>
  </div>
  
  <script>
    // 1. Get three nodes
    var bodyChildNodes = document. body. childNodes
    var commentNode = bodyChildNodes[1]
    var textNode = bodyChildNodes[2]
    var divNode = bodyChildNodes[3]


for (var node of bodyChildNodes) {<!-- -->
      if (node.nodeType === 8) {<!-- -->
      } else if (node. nodeType === 3) {<!-- -->
      } else if (node. nodeType === 1) {<!-- -->
      }
    }
    console.log(commentNode.nodeType, textNode.nodeType, divNode.nodeType) // 8 3 1
    console.log(Node.COMMENT_NODE) //8

 </script>

</body>

5.2_nodeName, tagName

nodeName: Get the name of the node node;
- Defined for any Node:
- For elements, the meaning is the same as tagName, so it is possible to use either;
- For other node types (text, comment, etc.), it has a string corresponding to the node type;
tagName: get the tag name of the element; only applicable to Element nodes

console.log(commentNode.nodeName, textNode.nodeName, divNode.nodeName) //#comment #text DIV
 console.log(commentNode.tagName, divNode.tagName) //undefined 'DIV'

5.3_innerHTML, textContent, nodeValue

innerHTML : Get the HTML in the element as a string; set the content in the element;

textContent : Only get the text content in the element;

The difference between innerHTML and textContent:

Use innerHTML to insert it “as HTML”, with all HTML tags.

Using textContent, it is inserted “as text”, and all symbols are treated literally.

outerHTML: contains the complete HTML of the element; innerHTML plus the element itself;

nodeValue or data: Used to get the text content of non-element nodes

 // data (nodeValue) obtains data for non-element nodes
    // innerHTML: The corresponding html element will also be obtained
    // textContent: only get the text content
    console.log(commentNode.data, textNode.data, divNode.data) //I am a comment I am a text undefined
    console.log(divNode.innerHTML) // <h2>I am the title</h2> <p>I am content,</p>
    console.log(divNode.textContent) // I am the title I am the content
    console.log(divNode.outerHTML) //<div class="box"> <h2>I am the title</h2> <p>i am content</p> </div>

5.4_Other attributes

hidden: global attribute, which can be used to set element hiding

<body>

  <button class="btn">Switch</button>

  <!-- hidden attribute -->
  <div id="box" class="cba" title="aaa" style="color: red">
    Hahahahaha
  </div>
  
  <script>
    // 1. Get the element
    var boxEl = document. querySelector("#box")
    var btnEl = document. querySelector(".btn")

    // 2. Listen to the click of btn
    btnEl.onclick = function() {<!-- -->
      // 1. just hide
      // boxEl.hidden = true
      // boxEl. style. display = "none"

      // 2. switch
      // boxEl.hidden = false
      // if (boxEl.hidden === false) {<!-- -->
      // boxEl.hidden = true
      // } else {<!-- -->
      // boxEl.hidden = false
      // }

      // 3. Direct inversion
      boxEl.hidden = !boxEl.hidden
    }


  </script>

</body>

Table of Contents