JavaScript - recognize DOM-

JavaScript consists of three parts

js consists of three parts
        1.ECMAscript
        2. DOM document object model
        Simply put: DOM provides some API s (interfaces) that give developers the ability to operate the page
        3.BOM

DOM の common node types

Element node. Element? Node (1)
Document node.document? Node (9)
Text node plain text space... Node.text [node (3)
Comment node. Comment? Node (8)
Attribute node.attribute'node (2)

DOM の small case childNodes/children. Set of all child nodes

But I usually use children
There are five element nodes in children
childNodes has 11 nodes = 6 text + 5 elements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style media="screen">
        li {
            width: 20px;  height: 10px; margin: 10px;
            background-color: red;
            transition: 1s; list-style: none;
        }
    </style>
</head>
<body>
    <ul id="ul">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script type="text/javascript">
        var oUl = document.getElementById('ul');
        var aLi = oUl.childNodes   //There are 6 text nodes (that is, spaces) + 5 element nodes = 11
        document.onclick = function () {
            for (var i = 0; i < aLi.length; i++) {   //  11
                if (aLi[i].nodeType === 1) {   // The number is 1. There are 5 element nodes
                    aLi[i].style.cssText = 'width:150px';
                }
            }
        }
    </script>
</body>
</html>

Another way to write javascript part

    <script type="text/javascript">
        var oUl = document.getElementById('ul');
        var aLi = oUl.children   // ul の 5 li, i.e. element nodes
        document.onclick = function () {
            for (var i = 0; i < aLi.length; i++) {   //  5
                    aLi[i].style.cssText = 'width:150px';
            }
        }
    </script>

DOM の small case parentNode. Find the parent node of an element

Operate an element の parent node, use parentNode

Example:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <ul>
        <li><a href="javascript:void(0);">Click to hide 11</a></li>
        <li><a href="javascript:void(0);">Click to hide 22</a></li>
    </ul>
    <script type="text/javascript">
        var a = document.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            a[i].onclick = function () {
                this.parentNode.style.display = 'none';
            }
        }
    </script>
</body>
</html>

DOM の small case nexterelementsibling. Find the next sibling of an element

DOM の small case previousElementSibling / / find the last sibling of an element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style media="screen">
        li {
            list-style: none;
            margin: 5px;
        }
    </style>
</head>
<body>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
    <script type="text/javascript">
        var aLi = document.getElementsByTagName('li');
        //Find the next sibling of an element
        aLi[1].nextElementSibling.style.cssText = 'background:red;'
        //Find the last sibling of an element
        aLi[1].previousElementSibling.style.cssText = 'background:blue;'
    </script>
</body>
</html>

DOM の node small case

Tags: Javascript Attribute ECMAScript

Posted on Sat, 02 May 2020 12:20:25 -0700 by mac25