DOM elements and object model in JS (JS focus)

Master the key knowledge in JS: DOM elements and object model

What is DOM : Document Object Model (Doucment Object Model) is a standard programming interface recommended by the W3C organization for processing Extensible Markup Language (HTML and XML);

Document : A page is a document, and DOM is represented by document
Element : All tags in the page are elements, which are represented by element in DOM
Node : All content in the page is a node (label, attribute, text, comment, etc.), represented by node

The DOM treats the above content as objects .

Document Object Model ( Document Object Model ):

Converting a webpage into a JS object can be operated through JS. The browser parses the document into a node (Node) according to the DOM model.

Points form a node tree (DOM Tree) The smallest unit of DOM is a node;

Notice:

Because our document is loaded from top to bottom, so the existing tags, our script is written under the tag
Get gets the element element by through the camel case nomenclature
The multi-parameter id is a case-sensitive string
Returns an element object

Classification of nodes:

Document	document node
DocumentType	Document Type Node
Element	element tag
Attr	Attributes
Text	text
Comment	note
DocumentFragment	document fragment

These 7 types all inherit the Node object.

Get the element document.getElementById() according to the ID name:

The method getElementById() of Document returns an element matching a specific ID, since the ID of an element is in most cases

The requirements are unique, and this method is a natural way to efficiently find elements.

<body>
<div class="div1" id="id1">
        内容文本
        <!-- 注释文本 -->
        <div class="inner">内部div</div>
</div>
<div id="time">2022年11月15日</div>
<script>
    //根据ID名获取元素
    //document.getElementById()
    document.getElementById("id1")//返回目标元素节点
    //没有匹配的节点 返回空值null
    document.getElementById("Id1")//大小写敏感

    var timer = document.getElementById("time");
    console.log(timer);
    console.log(typeof timer);
    // console.dir()打印我们返回的元素对象，更好的查看里面的属性和方法
    console.dir(timer);
</script>
</body>

Use the getElementByTagName() method to return a collection of objects with the specified tag name

If the page element has only one element, the return is still in the form of a pseudo-array, and if there is no element in the page, an empty pseudo-

group form;

<body>
<div class="div1" id="id1">
        内容文本
        <!-- 注释文本 -->
        <div class="inner">内部div</div>
</div>
<ul>
        <li>124</li>
        <li>243</li>
        <li>354</li>
        <li>46546</li>
    </ul>
<script>
    //根据标签名获取元素
        //document.getElementsByTagName()  

        document.getElementsByTagName("div")//返回了HTMLCollection  类似于数组
        //如果没有匹配的内容 返回空集合

        document.getElementsByTagName("DIV")//大小写不敏感
        document.getElementsByTagName("<div>")//标签名不带尖括号

     // 使用getElementByTagName()方法可以返回带有指定标签名的对象的集合
        var lis = document.getElementsByTagName("li");
        console.log(lis);
        console.log(lis[1]);
        // 我们要依次打印里面的元素对象时我们可以采用遍历的方法、
        for(var i=0;i<lis.length;i++){
            console.log(lis[i]);
        }
</script>
</body>

Get element document.getElementsByClassName() according to class name

<body>
 <div class="div1" id="id1">
        内容文本
        <!-- 注释文本 -->
        <div class="inner">内部div</div>
    </div>
 <div class="div1 div2">
        内容文本
        <!-- 注释文本 -->
    </div>
    <script>
        document.getElementsByClassName("div1")//返回了HTMLCollection

        document.getElementsByClassName("Div1")//大小写敏感
        document.getElementsByClassName("div1 div2")//可以用多个类名作为参数 类名之间用空格隔开
    </script>
</body>

Get elements based on CSS selectors:

document.querySelector() method

querySelector()fh returns the first element object of the specified selector HTML5 new
The querySelector() method referenced by the Document Object Model Document returns the documents that match the specified selector or selector group
An Element object.
Returns null if no match is found.

Remarks: Matching is done using depth-first traversal, starting from the first element in the document markup, and traversing in order of child nodes.

<body>
 <div class="div1" id="id1">
        内容文本
        <!-- 注释文本 -->
        <div class="inner">内部div</div>
    </div>

    <div id="box3">
        <ul>
            <li>首页</li>
            <li>第二页</li>
        </ul>
    </div>
    <script>
        document.querySelector(".div1")//返回第一个匹配的元素节点，哪怕有多个满足条件的元素
        //没有匹配的元素 返回 null

    var firstbox = document.querySelector(".box");
        console.log(firstbox);

        var nav = document.querySelector("#box3");
        console.log(nav);
        var li = document.querySelector("li");
        console.log(li);
    </script>
</body>

document.querySelectorAll() method:

<body>
<div id="box3">
        <ul>
            <li>首页</li>
            <li>第二页</li>
        </ul>
    </div>
    <script>
        document.querySelectorAll(".div1")//返回NodeList 节点列表 类似于数组的对象
        //没有匹配的元素 返回空的NodeList
    
    // querySelectorAll()返回指定选择器的所有元素对象集合
        var allbox = document.querySelectorAll(".box3");
        console.log(allbox);
        var lis = document.querySelectorAll("li");
        console.log(lis);
    </script>
</body>

^_^` ~_~ ^_^ Hurry up and collect it!