Dom (document object model, exclusive thought, operation of attributes)

catalogue

1, DOM (upper)

2, DOM (bottom)

1, DOM (upper)

1. Web API: a set of interfaces provided by the browser to operate browser functions and page elements

2. Composition of JavaScript:

(1) ECMAScript: it is the core of Javascript. It defines a set of syntax, and Javascript implements these syntax specifications.

(2)DOM: Document Object Model

document.title = "WebAPI"
console.log(document.title)
document.write("<h2>Xi'an University of Posts and Telecommunications</h2>")

A. It is the standard programming interface of pointer HTML/XHTML language launched by W3C organization

B. You can access and set HTML page elements through DOM interface

C.DOM tree: an html document is a tree (document model tree)

D. Common concepts:

                Document: an html page is a document

                element: all labels in a page

                 node: all contents in the page are nodes (tags, tag attributes, text in tags, comments). In DOM, all nodes are objects, and each object has its own attributes and methods.

E. Get element:

         a. Get by ID: document.getElementById('id ')

<div id="box"></div>
<script>
    var d = document.getElementById('box')
    console.log(d)
</script>

         b. Get by tag name: document.getElementsByTagName gets an Array, and the method returns a pseudo Array (the method in Array cannot be used)

<div id="box"></div>
<div id="b1"></div>
<div id="b2"></div>
<script>
    var divs = document.getElementsByTagName('div')
    console.log(divs)
    console.getElementsByTagName(Array.isArray(divs))
</script>

         c. Get according to the name attribute:   document.getElementsByTagName(), the return value of this method is an array

<input type="checkbox"name="hobby" value="Swimming">Swimming
<input type="checkbox"name="hobby" value="music">music
<input type="checkbox"name="hobby" value="Football">Football
<script>
    var hobbys = document.getElementsByName('hobby');
    console.log(hobbys)
    hobbys[0].checked = true;
</script>

         d. Get: document.getElementsByClassName according to the class attribute of the tag. The return value of this method is an array

<p class="p1">University of Posts and Telecommunications</p>
<p class="p1">University of Political Science and Law</p>
<p class="p1">University of Petroleum</p>
<script >
    var ps = document.getElementsByClassName('p1')
    console.log(ps)
</script>

F. New get element in HTML   (label) method: consider browser compatibility

        a.document.querySelector (): you can select elements according to the id and class attributes of the tag

        b.document.querySelectorAll(): select all elements

<body>
    <p class="p1">University of Posts and Telecommunications</p>
    <p class="p1">University of Political Science and Law</p>
    <p class="p1">University of Petroleum</p>
    <div id="d1">Jiaotong University</div>
    <ul>
        <li >Journey to the West</li>
        <li>three countries</li>
        <li>Water Margin</li>
    </ul>
    <script >
        // var ps = document.getElementsByClassName('p1')
        // console.log(ps)
        var qs = document.querySelector('.p1');//Select the first element according to the class attribute value
        console.log(qs)

        var dd = document.querySelector('#d1 '); / / use the id selector to select elements
        console.log(dd)

        var li = document.querySelector('li');//Select the first li element by tag name
        console.log(li)
        var lis = document.querySelectorAll('li');//Choose to use the li tag
        console.log(lis)
    </script>
</body>

G. Properties of the document object

         a.title: the title of the page, that is, the title element (label) of the page

        b.body: the body element (label) of the page

        c.documentElement: html element (tag) of the page

 console.log(document.documentElement)

        d.forms: form element (label) in the page

        e.image: image elements (labels) in a page

H. Event: an operation (action) performed by a user. This action can be detected by Javascript and processed by the "trigger response" mechanism. It is an important way to realize page interaction

         a. Event source: the element that triggered the event (who triggered the event)

         b. Event type: what type of event is triggered

         c. Event handler function (event response function): what to do after an event is triggered

<body>
    <button id="btn">click a button</button>
    <script>
        //Get button
        var btn = document.getElementById('btn');
        //Register events and event handlers for buttons
        btn.onclick = function(){
            alert('You clicked the button')
        }
    </script>
</body>

1. Content of operation element (label)

        a.element.innerHTML: sets or returns the HTML between the beginning and end of an element, including tags, spaces, and line breaks

<body>
    <input type="text" id="userName">
    <button id="btn" onclick="f1()">click a button</button>
    <div id="dt"></div>
    <script>
        function f1(){
            //Get value in input
            var name = document.getElementById('userName').value;
            //Put the value of input into div
            document.getElementById('dt').innerHTML = name;
        }

    </script>
</body>

          b.interText: plain text content (remove labels and formatting)

          c.textContent: remove the plain text content of the label

<body>
    <div id="box">
        Xi'an University of Posts and Telecommunications
        <p>
            Northwest University of political science and law
            <a href="https://Www.baidu.com "> go to Baidu</a>
        </p>
    </div>
    <script>
        var box = document.getElementById('box');
        console.log("interHTML:", box.innerHTML);
        console.log("interText:",box.innerText);
        console.log("textContent:",box.textContent)
    </script>
</body>

  J. Attributes of the action element:

<body>
    <button id="flower">cloud</button>
    <button id="grass">stars</button>
    <br><br>
    <img src="../image/2.png" title="cloud" alt="">

    <script>
        //Get page elements 
        var flower = document.getElementById('flower');
        var grass = document.getElementById('grass');
        var img = document.querySelector('img');
        //2 register event handlers
        flower.onclick = function(){
            img.src = '../image/2.png'
            img.title= 'cloud'
        }
        grass.onclick = function(){
            img.src = '../image/4.png'
            img.title = 'stars'
        }
        img.onmouseover = function(){   //Mouse over
            img.src = '../image/2.png'
            img.title= 'cloud'
        }
        img.onmouseout = function(){    //Mouse away
            img.src = '../image/4.png'
            img.title = 'stars'
        }
    </script>
</body>

K. Style of operation element  

        a. Action style attribute: style.style.style attribute name

        ' Style attribute name 'corresponds to the attribute name of CSS, which is separated by' - 'between the words of style attribute name in CSS; in Javascript, the style attribute name adopts hump naming method.

<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById('box')
        box.style.width = '100px';
        box.style.height = '100px';
        box.style.backgroundColor = 'red';
        box.style.transform = 'rotate(20deg)'
    </script>
</body>

   

          b. Operation className attribute: element object: className attribute

<style>
    div{
        width: 100px;
        height: 100px;
        background-color:pink;
    }
    .change{
        background-color: purple;
        color: #fff;
        font-size: 25px;
        margin-top: 100px;
    }
</style>
<body>
    <div class="first">Xi'an University of Posts and Telecommunications</div>
    <script>
        //Get element
        var div = document.querySelector('div');
        //Registration event
        div.onclick = function(){
            this.className = 'change';
        }
    </script>
</body>

         Show or hide text box contents:

<body>
    <div>
        <label for="">
            <input type="text" name="" id="userName" value="mobile phone" style="color: #999;">
        </label>
    </div>
    <script>
         //Get element: input
        var text = document.querySelector('input')
        //Register an event to get focus for the element: onfocus
        text.onfocus = function(){
            if(this.value === 'mobile phone'){
                this.value = '';
            }
            this.style.color = '#333';
        }
        //3. Register the event of losing focus for the element: unblur
        text.onblur = function(){
            if(this.value === ''){
                this.value = 'mobile phone'
            }
            this.style.color = '#999';
        }
    </script>
</body>

2, DOM (bottom)

1. Exclusive thought: clear the effects of all elements (including yourself) and reset the current element

<body>
    <div>
        <button>Button 1</button>
        <button>Button 2</button>
        <button>Button 3</button>
        <button>Button 4</button>
        <button>Button 5</button>
    </div>
    <script>
        //1. Get all buttons
        var btns = document.getElementsByTagName('button');
        //2. Loop: register an onclick event for each button
        for(var i=0;i<btns.length;i++){
            btns[i].onclick = function(){
                //Circular exclusion: remove the background color of all buttons
                for(var j=0;j<btns.length;j++){
                    btns[j].style.backgroundColor = '';
                }
                //Sets the background color of the current button
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>

 

  (1) Mouse events:

        a. Mouse over: mouseover

        b. Mouse out

<style>
    .bg{
        background-color: red;
    }
</style>
//1. Get all TRS under tbody
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        //2. Bind events to each tr
        for(var i=0;i<trs.length;i++){
            trs[i].onmouseover = function(){
                this.className = 'bg'
            }
            trs[i].onmouseout = function(){
                this.className = '';
            }
        }

  

  2. Attribute operation:

(1) Get property value

        a. There are two methods for the inherent attributes of elements:

        Element name. Inherent attributes

        Element name. getAttribute ('intrinsic attribute ')

         b. For non intrinsic attributes of elements:

         Element name. getAttribute ('intrinsic attribute ')

<body>
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        console.log("Id:",div.id)
        console.log("Id:",div.getAttribute('id'));

        console.log("Index",div.in);//index represents the inherent attribute of div
        console.log("INdex",div.getAttribute('index'))
        console.log("Class:",div.class)
    </script>
</body>

  (2) Set attribute value

        a. Intrinsic attribute value:

         element. Attribute name = value

         element.setAttribute ('attribute ', value)

        b. Non intrinsic attributes:   element.setAttribute ('attribute ',' value ')

<body>
    <div></div>
    <script>
        var div = document.querySelector('div')
        div.id = 'test';
        div.className = 'nav';
        div.setAttribute('index',1002)
    </script>
</body>

  (3) Remove attribute value

<body>
    <div></div>
    <button>Remove Attribute </button>
    <script>
        var div = document.querySelector('div')
        div.id = 'test';
        // div.className = 'nav';
        div.setAttribute('index',1002)
        div.setAttribute('class','nav')

        var btn = document.querySelector('button');
        btn.onclick = function(){
            div.removeAttribute('index')
        }
       
    </script>
</body>

  3. Custom attributes in H5

(1) Custom attribute specification: data attribute name

(2) Implementation method:

        a. Customize: data attribute name in html tag

<div>
       <p data-index="111"></p> <!--data Is a prefix,The property name is index-->
</div>

        b. Define in JavaScript: element.dataset. Attribute name = 'value'

(3) Get custom attribute value

         a.element.dataset. Attribute name

         b.element.dataset ['attribute name']

dataset: is a collection that stores all the custom attributes starting with data -. If the custom attribute name has multiple separators' - ', the' - 'shall be removed when obtaining the attribute and the hump naming method shall be adopted

<body>
   <div>
       <p data-index="111" data-list-phone="1008611">Xi'an University of Posts and Telecommunications</p> <!--data Is a prefix,The property name is index-->
       <button>get attribute</button>
   </div>
   <script>
       var p = document.querySelector('p');
       p.dataset.class = "nav";
       p.setAttribute('data-name','kong ming')

       var btn = document.querySelector('button');
       btn.onclick = function(){
           console.log("Name:",p.dataset.name);
           console.log("Index:",p.dataset['index']);
           console.log("Phone:",p.dataset.listPhone)//Hump nomenclature
       }
   </script> 
</body>

Tags: Javascript Front-end DOM

Posted on Mon, 22 Nov 2021 15:34:01 -0500 by AdamSnow