doraemon of python web front-end DOM and BOM (js focus)

# ### 11.8.3 BOM dialog system

bom System dialog box:

- window.alert ( " liujia " ) pop-up dialog directly in the page
 - window.confirm ( " Are you sure you want to delete the file? " ) Whether to eject eye deleting files, and there are OK and Cancel buttons
 - window.prompt ( " today the weather? " ) will pop up dialog box allows you to enter content

Timer method

```html
<script type='text/javascript'>
    // 1 . Performs the corresponding operation after five seconds, it can be done asynchronously
    window.setTimeout(function(){
        console.log("111");
    },2000)
    console.log("222")
    
    // 2 periodic timer
    var num = 0;
    Timer var = null;
     // starts a timer
    timer = window.setInterval(function{
                               whether ++ ;
                               if (whether === 0) {
        clearInterval (the Timer);   // Clear Timer
    }
                      console.log(num); },2000)
</script>
```

# ### 11.8.4 JUDGMENT

D: docunment document

O：object

M；modle

Gets node is three ways:

- Box var = document.getElementById ( " Box " ) acquired by a single node object ID
 - var = document.getElementsByTagName Box ( ' div ' ) to obtain the object by the node name tag
 - var LIS2 = document.getElementsByClassName ( " Active " ); by class name in the past

To the style of operation:

1 Get event source object

- var box = document.getElementById('box'):

2 . Bind event and execute change

- box.onmpuseover = function(){box.style.backgroundColor = 'red'}

The operation of the property:

1 Get node events

- var p1 = document.getElementById('id');

2 Set properties

- the console.log (p1.getAttribute ( ' class ' )) must get property
 - p1.setAttribute ( ' class ' , 123 ) if the original class exists to change it, if there is no add

Create Delete node:

Create a node:

- in Li1 var = document.createElement ( ' Li ' ) create a node
 - li1.innerText = ' liujia '   add content node, but only the text
 - in Li1, the innerHTML = '<a href= "#"> </ A > '; may be provided HTML
 - ll1.setAttribute ( " class " , " avtive " );
 - li1.children [0] .style.color = ' Red ' ;

Facilitate data manipulation page:

```html
<script>
    var box = document.getElementById('box');
    was date = [
        ID {: . 1, name: ' millet 2 ' , subname: " Dual front camera " ,. price: 1999 }
        ID {: . 1, name: ' millet. 4 ' , subname: " Dual front camera " ,. price: 2999 }
        ID {: . 1, name: ' millet. 5 ' , subname: " Dual front camera " ,. price: 3999 }
        ID {: . 1, name: ' millet. 6 ' , subname: " Dual front camera " ,. price: 4999 }
        ID {: . 1, name: ' millet. 8 ' , subname: " Dual front camera " ,. price: 5999 }
    ]
    for (var i=0;i<data.length;i++){
        var li = document.creatElement('li');
        li.innerHTML = `<p class='name'>${data[i].name}</p>
        <p class="subname">${data[i].subname}</p>
        <span class="sprice">${data[i].price]元<span>`
        box.appendChild(li )
    }
</script>
```

Switching picture:

```html
<body>
    <div id = "box">
     <img src="images/1.jpg" alt="" id="imgbox">   
    </div>
    <button id = "prev">上一张</button> 
    <button id = "next">下一张</button>
</body>
<script>
    var imgbox = document.getElementById('imgbox');
    var next = document.getElementById('next');
    var prev = cocument.getElementById('prev');
    var num = 1 ;
    next.onclick = function(){
        nextImg();
    }
    function nextImg(){
        whether ++ ;
        if (whether === 5 ) {
            a = 1 ;
        }
        imgbox.src=`images/$[num}.jpg`;
    }
    setInterval(nextImg,100)
    prev.onclick=function(){
        prevImg();
    }
    function prevImg(){
        a = 5 ;
        Surely - = 1 ;
        if (whether === 0) {
            a = 5
        }
        imbox.src=`images/${num}.jpg`
    }
    setInterval(prevImg,100)
</script>
```

Function object can be changed by pointers to functions inside this two methods

```html
function fn(){
    console.log (the this);       // the this points to the window
}
fn.call();
fn.apply();

```

How to set the style node objects, attributes, class?

```html
Setting styles
obj.style
Set the properties:
obj.setAttribute(name,value);
obj.getAttribute(name);
obj.className
obj.title
```

Create a node object, add, delete, what methods were used?

```html
var on = document.creatElement ( ' p ' );
box.appendChild(op);
box.insertBefore(newNode,oldNode);
box.removeChild(op);
```

l List you know js event?

- onclick
- onmouseover
- onmouseout
- onchange
- onselect
- onsubmit
- onload

There are two ways that the timing? Write the corresponding method, and explain the meaning?

setTimeout (callback, ms) time task, delay operation, asynchronous

setInterval (callback, millisecond) periodic cycle animation task css transtion tranform
doraemon of python web front-end DOM and BOM (js focus)

Guess you like
