[zhiluotang learning notes] javascript DOM learning

Learning route

javascript functions
Function syntax

HTML DOM

DOM full name: Document Object Model
Document tree
node
- The whole document is a document node
- Each HTML element is an element node
- The text within an HTML element is a text node
- Each HTML attribute is an attribute node
- Comments are comment nodes
Find HTML elements
- Find elements by id
- Find elements by tag name
- Find elements by class name
Change HTML content
- innerHTML attribute
  - document.getElementById(id).innerHTML = "<p>...</p>";
- Property innerText
  - document.getElementById(id).innerText="....";
- Attribute attribute
  - document.getElemetById(id).attribute = attribute value;
- style.property attribute
  - document.getElementById(id).style.property= New style
Creating and deleting nodes

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                font: 700 14px/1.5 arial;
                margin: 0;
                padding: 0 10px;
            }
            table{
                clear: both;
                border: 1px solid #000000;
            }
            td{
                color: #FFFFFF;
                cursor: pointer;
                text-align: center;
                border: 1px solid #000000;
                padding: 5px;

            }
            #setting{
                float: left;
                clear: left;
                line-height: 28px;
                margin: 10px 0;
            }
            #setting input{
                width: 50px;
                font-family: inherit;
                border: 2px solid #CCCCCC;
            }
            #btn{
                font-size: 14px;
                line-height: 18px;
                color: #FFFFFF;
                text-decoration: none;
                background: #353535;
                border-top: 1px #A9A9A9 solid;
                border-radius: 5px;
                padding: 4px 6px;
            }
            #msg{
                float: left;
                clear: both;
                height: 25px;
                display: none;
                line-height: 25px;
                margin-bottom: 10px;
            }
            #msg em{
                width: 25px;
                height: 25px;
                display: inline-block;
                margin-right: 5px;
            }
            #setting label,#setting input,#setting a,#msg span,#msg em{
                float: left;
            }
        </style>
            <script>
        //Create table dynamically
        function createTable(){
            var row = document.getElementById("row").value;
            var col = document.getElementById("col").value;
            var div = document.createElement("div");//Create a div node. Objective to store our dynamically generated table
            div.setAttribute("id","table");//Set the div's attribute id and its value

            var divTable = document.getElementById("table");//Determine whether div has been added
            if(divTable != null){
                document.body.removeChild(divTable);//Delete div
            }


            var aRow = [];//Array, defining table rows
            var aCol = [];//Array, defining table columns

            //Loop dynamic generation of table elements
            for(var i = row - 1;i--;){
                aCol.length = 0;//Initializes the length of columns in the table
                for(var j = col;j--;){//Build each column in the table
                aCol.push("<td style=\"background:"+getRandomColor()+";\">"+randomRange(1,15)+"</td>");//How to insert elements

            }
            aRow.push("<tr>"+aCol.join("")+"</tr>");

        }
        div.innerHTML = "<table><tbody>"+aRow.join("")+"<tbody></table>";
        document.body.appendChild(div);//Add div to body and table to Div
    }


        //Randomly generate numbers between 1 and 15 to fill cells
        function randomRange(lower,upper){
            return Math.floor(Math.random()*(upper-lower+1)+lower);
        }

        //Randomly generated color codes
        function getRandomColor(){
            return '#'+Math.floor(Math.random()*0xffffff).toString(16);
        }
    </script>
    </head>
    <body>
        <div id="setting">
            <label>Number of rows</label><input  type="text" id="row"/>
            <label>Number of columns</label><input type="text" id="col" />
            <a href="javascript:;" id="btn" onclick="createTable()">Generating tables</a>
        </div>
    </body>



</html>

DOM basic operation case
Case description: draw a rectangular div, a simple Sketchpad will pop up on the right side of the rectangle div, and change the div inside the rectangle through the operation on the sketchpad

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .main{
                position: absolute;
                width: 400px;
                height: 400px;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                border: 1px solid black;
            }

            .top{
                width: 100%;
                height: 50px;
                background: green;
                text-align: center;
                color: white;
                line-height: 50px;
            }
            .drawing{
                position: relative;
                width: 150px;
                height: 200px;
                top: -50px;
                left: 400px;

            }
            span{
                text-align: center;
                border-radius: 5px;
                border: 1px solid black;
                padding: 5px;
            }
            p{
                text-align: center;
            }
            .content{
                position: absolute;
                width: 50px;
                height: 50px;
                border: 1px solid black;
                border-radius: 5px;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="top">Click on the sketchpad</div>
            <div class="drawing">
                <p>Choose a color</p>
                <p>
                    <span style="background: red;" id="c01">gules</span>
                    <span style="background: yellow;" id="c02">yellow</span>
                    <span style="background: blue;" id="c03">blue</span>
                </p>
                <p>Select width</p>
                <p>
                    <span id="s01">100</span>
                    <span id="s02">150</span>
                    <span id="s03">200</span>
                </p>
                <p>Select height</p>
                <p>
                    <span id="h01">100</span>
                    <span id="h02">150</span>
                    <span id="h03">200</span>
                </p>
            </div>

        </div>
        <div class="content" id="content"></div>
    </body>
    <script>
            /**
             * Draw a rectangular div, a rectangular Div 
             * A simple Sketchpad will pop up on the right,
             * Change the div inside the rectangle through the operation on the drawing board
             */

            window.onload = function(){
                var s01 = document.getElementById("s01");
                var s02 = document.getElementById("s02");
                var s03 = document.getElementById("s03");
                var h01 = document.getElementById("h01");
                var h02 = document.getElementById("h02");
                var h03 = document.getElementById("h03");
                var c01 = document.getElementById("c01");
                var c02 = document.getElementById("c02");
                var c03 = document.getElementById("c03");


                s01.onclick = function(){
                    var content = document.getElementById("content");
                    content.style.width = 100 + "px";
                }
                s02.onclick = function(){
                    var content = document.getElementById("content");
                    content.style.width = 200 + "px";
                }
                s03.onclick = function(){
                    var content = document.getElementById("content");
                    content.style.width = 300 + "px";
                }
                h01.onclick = function(){
                    var content = document.getElementById("content");
                    content.style.height = 100 + "px";
                }
                h02.onclick = function(){
                    var content = document.getElementById("content");
                    content.style.height = 200 + "px";
                }
                h03.onclick = function(){
                    var content = document.getElementById("content");
                    content.style.height = 300 + "px";
                }
                c01.onclick = function(){
                    var content = document.getElementById("content");
                    content.style.background="red";
                }
                c02.onclick = function(){
                    var content = document.getElementById("content");
                    content.style.background="yellow";
                }
                c03.onclick = function(){
                    var content = document.getElementById("content");
                    content.style.background="blue";
                }


            }

    </script>
</html>