2026-09-07T06:18:26.532Z

DOM

<script type="text/javascript">
var person = document.getElementsByTagName('person')[0];
console.log(person);
var uname = person.getElementsByTagName('uname')[0];
console.log(uname.innerHTML);

script>

DOM无法操作css,只是覆盖了css，操作的是style


    <div>div>
    <script type="text/javaScript">
        var div =document.getElementsByTagName('div')[0];
        div.style.backgroundColor = 'green';
//操作的是div的内联样式
    script>

案例

DOCTYPE html>


    
    
    Document
    


   123
   456
   789

实现slider图的切换

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="css/slider.css">
head>
<body>
    <div class="slider-wrap">
        <div class="slider">
            <ul class="slider-list">
                <li class="slider-item active">
                    <a href="javascript:;">
                        <img src="img/1.jpg" alt="">
                    a>
                li>
                <li class="slider-item">
                    <a href="javascript:;">
                        <img src="img/2.jpg" alt="">
                    a>
                li>
                <li class="slider-item">
                    <a href="javascript:;">
                        <img src="img/3.jpg" alt="">
                    a>
                li>
                <li class="slider-item">
                    <a href="javascript:;">
                        <img src="img/4.jpg" alt="">
                    a>
                li>
                <li class="slider-item">
                    <a href="javascript:;">
                        <img src="img/5.jpg" alt="">
                    a>
                li>
                <li class="slider-item">
                    <a href="javascript:;">
                        <img src="img/6.jpg" alt="">
                    a>
                li>
            ul> 
        div>
        <div class="thumbs">
            <ul class="thumbs-list">
                <li class="thumbs-item cur">
                    <a href="javascript:;">
                        <img src="img/1.jpg" alt="">
                    a>
                li>
                <li class="thumbs-item">
                    <a href="javascript:;">
                        <img src="img/2.jpg" alt="">
                    a>
                li>
                <li class="thumbs-item">
                    <a href="javascript:;">
                        <img src="img/3.jpg" alt="">
                    a>
                li>
                <li class="thumbs-item">
                    <a href="javascript:;">
                        <img src="img/4.jpg" alt="">
                    a>
                li>
                <li class="thumbs-item">
                    <a href="javascript:;">
                        <img src="img/5.jpg" alt="">
                    a>
                li>
                <li class="thumbs-item">
                    <a href="javascript:;">
                        <img src="img/6.jpg" alt="">
                    a>
                li>
            ul>
        div>
    div>
    <script src="js/slider.js">script>
    
    <script type="text/javascript">
        var slider = new Slider({
            sliderItem :'slider-item',
            thumbItem:'thumbs-item'
        })
    script>
body>
html>

// var thumbItem = document.getElementsByClassName('thumbs-item');
// // console.log(thumbItem);
// var sliderItem= document.getElementsByClassName('slider-item');
// // console.log(sliderItem);

// for(var i=0;i
//     (function(k){
//         thumbItem[k].onclick = function(){
//             for(var j=0;j
//                 sliderItem[j].className = 'slider-item';
//                 thumbItem[j].className='thumbs-item';
    
//         }
//         sliderItem[k].className+= ' active';
//         this.className += ' cur';
//         }
//     })(i);
// }


;(function(){
    var Slider = function(opt){
        this.sliderItem = document.getElementsByClassName(opt.sliderItem);
        this.thumbItem= document.getElementsByClassName(opt.thumbItem);
        this.bindClick();
    }
    Slider.prototype = {
        bindClick: function(){
            var slider = this.sliderItem,
                thumbs = this.thumbItem;
            for (var  i = 0; i < thumbs.length; i++) {
                (function(j) {
                    thumbs[j].onclick = function(){
                        for(var k = 0;klength;k++){
                            thumbs[k].className = 'thumbs-item';
                            slider[k].className = 'slider-item';
                        }
                        this.className += ' cur';
                        slider[j].className += ' active';
                    }
                })(i);
                
            }
        }
    }
    window.Slider = Slider;
})();

body{
    margin: 0;
}
ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
a{
    text-decoration: none;
}
img{
    width: 100%;
    height: 100%;
}
.slider-wrap{
    width: 996px;
    height: 480px;
    margin: 50px auto;
    border: 1px solid #000;
}

.slider{
    float: left;
    position: relative;
    width: 853px;
    height: 480px;
  
}

.slider .slider-item{
    display: none;
    position: absolute;
    left: 0;
    top:0;
    height: 480px;
}
.slider .slider-item.active{
    display: block;
}
.thumbs{
    float: left;
    width: 142px;
    height: 480px;

}
.thumbs-item{
    height: 80px;
    opacity: .5;
}
.thumbs .thumbs-item.cur{
    opacity: 1;
}

实现切换栏

tab.css

body{
    margin: 0;
}

a{
    text-decoration: none;
}
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.tab-wrap{
    width: 500px;
    /* height: 500px; */
    /* border: 1px solid #000; */
    margin: 50px auto;

}
.tab .tab-item a{
    display: block;
    width: 100%;
    text-align: center;
    line-height: 50px;
    color: #000;
}
.tab .tab-item{
    width: 100px;
    float: left;
    height: 50px;

}
.tab .tab-item.cur{
    background-color: #000;
    
}
.tab .tab-item.cur a{
    color:#fff;
}
.page{
    position: relative;
    height: 450px;
    border: 1px solid #000;
}
.page .page-item{
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align:center;
    line-height: 450px;
    color:100px;
    font-size: 100px;
}
.page .page-item.active{
    display: block;
}

tab.js

// var tabItem = document.getElementsByClassName('tab-item');
// var pageItem = document.getElementsByClassName('page-item');

// // console.log(tabItem,pageItem);
// for(var i =0 ;i
//     (function(k){
//         tabItem[k].onclick=function(){
//             for(var j=0;j
//                 tabItem[j].className='tab-item';
//                 pageItem[j].className = 'page-item';
//             }
//             this.className+=' cur';
//             pageItem[k].className ='page-item active';
            
//         }
//     })(i)

// }


;(function(){

    var Tab = function(opt){
        this.tabs = document.getElementsByClassName(opt.tabItem)
        this.pages = document.getElementsByClassName(opt.pageItem)
        this.bindClick(opt.tabItem,opt.pageItem,opt.cur,opt.active)
    }
    Tab.prototype={
        bindClick : function(tabItem,pageItem,cur,active){
            var tabs = this.tabs;
            var pages= this.pages;
            for(var i =0 ;ilength;i++){
                (function(j){
                    tabs[j].onclick=function(){
                        for(var k=0;klength;k++){
                            tabs[k].className = tabItem;
                            pages[k].className =pageItem;
                        }
                        this.className= tabItem+' '+cur;
                        pages[j].className= pageItem+' '+active;
                    }
                })(i);
            }
        }
    }
    window.Tab = Tab;
})();

tab.html

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="css/tab.css">
head>
<body>
    <div class="tab-wrap">
        <div class="tab clearfix">
            <div class="tab-item cur">
                <a href="javascript:;">选项卡1a>
            div>
            <div class="tab-item">
                <a href="javascript:;">选项卡2a>
            div>
            <div class="tab-item">
                <a href="javascript:;">选项卡3a>
            div>
        div>
        <div class="page">
            <div class="page-item active">
                1
            div>
            <div class="page-item">
                2
            div>
            <div class="page-item">
                3
            div>
        div>
    div>
    <script type="text/javascript" src="js/tab.js">

    script>
    <script tyoe="text/javascript">
        var tab = new Tab({
            tabItem:'tab-item',
            pageItem:'page-item',
            cur:'cur',
            active:'active'
        })
    script>
body>
html>

getElementsByClassName和getElementsByTagName选择出来的都是一个数组，都是需要加上[index]的

 class="box">1231234
<div class="box">2342345div>
<script type="text/javascript">
    // console.log(document);
    // document是最上层的
    var boxes = document.getElementsByClassName('box');
    console.log(boxes);
    //IE8及以下没有getElementsByClassName
    // boxes.style.color = 'red'

getElementsByname

"text" name="username">
<div name="box">div>
<script type="text/javascript">
    var username = document.getElementsByName('username');
    var box = document.getElementsByName('box');
    console.log(username,box);

querySelectorAll 缺点：1.性能 2.不实时


    <div>123div>
    <div>456div>
    <div>789div>
    <script type="text/javascript">
        //性能
        //不实时
        var divs=document.getElementsByTagName('div')
        var div= document.querySelectorAll('div');
        console.log(div);
        div[0].remove();
        // querySelectorAll选择的节点，无法随着节点移除，而跟着移除，不实时

        console.log(div);
        console.log(divs);
        
    script>

遍历节点树

<ul>
    <li>123
      
            <a href="">我是超链接标签a>
            23<p>我是段落标签p>12
            <h1>我是标题标签h1>
        456
    li>
ul>

//遍历节点树-元素节点树
//节点包含元素  -》元素节点 = DOM节点
//parentNode
//childNodes
//1.元素节点=1
    // 2.属性节点 =2
        // 3.文本节点 =3
            // 4.注释节点=8
                // 5.document =9
                    // 6.DocumentFragment=11
// var li  = document.querySelector('li');
// console.log(li.parentNode);
// li.parentNode.parentNode.parentNode.parentNode.parentNode ->null

var li  = document.querySelector('li');
var p  =document.getElementsByTagName('p')[0];
// console.log(li.childNodes);
// console.log(li.firstChild);//123
// console.log(li.lastChild);//456
// console.log(p.previousSibling);//23
// console.log(p.nextSibling);//12

遍历元素节点树


// 遍历元素节点树
        //parentElement 元素
        //选择子元素
        //children
        // childElementCount = children.length
        // firstElementChild - lastElementChild
        // nextElementSibiling previousSElementSibiling
        // console.log(p.parentElement);
        // console.log(p.parentElement.parentElement.parentElement);
        // console.log(li.firstElementChild);
        // console.log(li.lastElementChild);
        
        console.log(p.nextElementSibling);
        console.log(p.previousElementSibling);

nodeName 节点都有节点属性

nodeName —-元素节点的nodeName大写只读属性

innerHTML渲染页面



   <ul id="list">ul>
   <script type="text/javascript">
       // //innerHTML   innerText
       // //innerHTML->  Element.prototype
       // //HTMLElement.prototype里面
       // var  div =document.getElementsByTagName('div')[0]
       // console.log(div.innerHTML);
       // console.log(div.innerHTML = 123);
       // console.log(div.innerHTML = div.innerHTML + '456');
       // console.log(div.innerHTML+= 456);
       
       // div.innerHTML = '我是红色超链接'

       var list = document.getElementById('list'),
       item,
       data=[
           {
               "title":'天下乌贼',
               "area":'中国'
           },{
               "title":'复仇者联盟',
               "area":'美国'
           },{
               "title":'咒怨',
               "area":'日本'
           }
       ]

   for(var i =0;ilength;i++){
       var item = data[i];
       var li = document.createElement('li');
       var p= document.createElement('p');
       var h2 = document.createElement('h2');
       // console.log(item);

       h2.innerHTML = '电影名称:'+item.title+'';
       p.innerHTML = '地区:' + item.area;

       li.appendChild(h2);
       li.appendChild(p);
       list.appendChild(li)
   }




       list.innerHTML+=''+
           '电影名称:'+item.title+'
'+
               '地区：'+item.area+'
'+
               '
';
   }

replaceChild

  class="box1">
    <h1>123h1>
    <p>234p>
    <a href="">345a>
  

<script type="text/javascript">
// parent.replaceChild(new,origin)
        var div= document.getElementsByTagName('div')[0];
        var h1 =document.getElementsByTagName('h1')[0];
        var h2 =document.createElement('h2');
        h2.innerHTML='6666'
        div.replaceChild(h2,h1);

        //innerText
        console.log(div.innerText);
        console.log(div.innerText =123);
        console.log(div.innerText+= 456);

script>

字符实体可以直接识别html文本

//setAttribute
div.setAttribute('id','box');
// 给元素设置属性和属性值
var attr = div.getAttribute('class');
console.log(attr);

setAttribute

    


    <div class="running">
        系统正常运行中....
    div>
    <script type="text/javascript">
        var div = document.getElementsByTagName('div')[0];
        function setSystemStatus(status){
            div.setAttribute('class',status)
            switch(status){
                case 'running':
                    div.innerHTML ='系统正常运行中';
                    break;
                case 'warning':
                    div.innerHTML = '系统运行中有告警异常';
                    break;
                case 'danger':
                    div.innerHTML = '系统存在危险';
                    break;
                default:
                    div.innerHTML = '系统处于未知状况';
            }
        }
        setSystemStatus('danger');
        setSystemStatus('warning');
     script>

自定义属性


    我叫爱宵夜


"javascript:;" data-uri="txwz" data-sort="free">天下无贼</a>
>
 <a href="javascript:;" data-uri="fczlm" data-sort="pay">复仇者联盟a><br/>
 <a href="javascript:;" data-uri="olbbg" data-sort="free">欧罗巴报告a><br/>
 <a href="javascript:;" data-uri="plmxs" data-sort="pay">普罗米修斯a><br/>
 <script type="text/javascript">
     var link = document.getElementsByTagName('a');
     for(var i =0;ilength;i++){
         (function(j){
            link[j].onclick = function(){
             var sort = this.dataset.sort;
             var uri = this.dataset.uri;
             if(sort === 'free'){
                 window.open('http://www.baidu.com/'+uri)
             }else{
                 alert('这是付费影片')
             }
            } 
         })(i)
     }
 script>

createDocumentFragment

"list">
   

<script type="text/javascript">
    //document.createDocumentFragment()//不存在节点树里面
    //创建文档片段（碎片）
    // object对象oUl
    var oUl = document.getElementById('list');
    var oFrag = document.createDocumentFragment();
    for(var i =0;i<10000;i++){
        var oLi= document.createElement('li');
        oLi.innerHTML = i+'这是第'+i+'个项目';
        // oLi.className = 'list-item';
        oLi.setAttribute('class','list-item')
        // oUl.appendChild(oLi);
        oFrag.appendChild(oLi);
    }
    oUl.appendChild(oFrag)
script>

var oUl =document.getElementById('list'),
         list = '';
     for(var i = 0;i<10000;i++){
         list += '' + i+ '
'
     }
     oUl.innerHTML = list;

重写insertAfter

DOCTYPE html>


    
    
    Document

日期对象 Date()

//实例化
        var date = new Date();

        // //getDate()返回当前是一个月的第几天   1-31  返回几号
        console.log(date.getDate());//11
        // //getDay()返回当前是一周中的第几天  0-6
        // //星期天是第一天  0  是星期天
        console.log(date.getDay());//5
        // Date.prototype.getWeekDay = function(lang){
        //     var day = new Date().getDay();
        //     switch (day) {
        //         case 0:
        //             return lang==='chs'?'星期天':'Sunday';
        //             break;
        //             case 1:
        //             return lang==='chs'?'星期一':'Monday';
        //             break;
        //             case 2:
        //             return lang==='chs'?'星期二':'Sunday';
        //             break;
        //             case 3:
        //             return lang==='chs'?'星期三':'Sunday';
        //             break;
        //             case 4:
        //             return lang==='chs'?'星期四':'Sunday';
        //             break;
        //             case 5:
        //             return lang==='chs'?'星期五':'Friday';
        //             break;
        //             case 6:
        //             return lang==='chs'?'星期六':'Saturday';
        //             break;
        //     }
        // }
     
        // console.log(date.getWeekDay('chs'));
        // console.log(date.getWeekDay());

//getMonth 返回当前为第几个月  0-11  +1
//getFullYear 返回当前为第几年
console.log(date.getMonth()+1);
console.log(date.getFullYear());//2025
console.log(date.getYear());//2025-1900=125


//getHours()  getMinutes()  getSeconds();
//计时  new Date()
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
console.log(date.getSeconds());
// 计时  new date  ---->每一次都要去new  date

//date.getMilliseconds获取毫秒
console.log(date.getMilliseconds());
console.log(date.getMilliseconds());
console.log(date.getMilliseconds());
// console.log(date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate());

// getTime()
        //时间戳  TImeStamp
        //2018年  6666年  纪元时间

        //纪元时间  1970年1月1日0点0分0秒  过了 多少毫秒

        //从 1970年1月1日0点0分0秒 到现在过了多少毫秒，这个毫秒数就是当前时间的时间戳
        console.log(date.getTime());

        var start = new Date().getTime();
        for(var i=0;i<1000;i++){
            document.write(i+' ');
        }
        var end = new Date().getTime();
        console.log(end - start);
        
        // var date = new Date();
        // var dateTime = new Date(1527782400000);
        // console.log(dateTime);
        // console.log(date.getTime());
        // var date1 = new Date(2018,5,7,20,24,35);
        // console.log(date1);

        // var date2 = new Date('2017-5-1 23:35:35');
        // var date3 = new Date('2017-5-1 2:3:3');
        // var date3 = new Date('2017/5/1 2:3:3');
        // console.log(date2);
        // console.log(date3);

//setInterval()  计时器-》 window.setInterval()
   // //每个特定的毫秒数时间执行一次内部函数
   // window.setInterval(function(){
   //     console.log(1);
       
   // },1000);


   // setInterval(test,1000);
   // setInterval('test()',1000);
   // setInterval('console.log(2)',1000);

   // function test(){
   //     console.log(1);
       
   // }
   
   // var time = 1000;
   // setInterval(function(){
   //     console.log(2);
       
   // },time)
   // time=10;//更改不了

计算器练习


       已进行0秒
   
   <script type="text/javascript">
       //1秒=1000毫秒
       // var oH1 = document.getElementsByTagName('h1')[0];
       // var oSpan = oH1.getElementsByTagName('span')[0];
       // sec = 0;
       // setInterval(function(){
       //     oSpan.innerHTML=++sec;
       // },1000)

       // var timer = setInterval(function(){},1000);
       // var timer2 = setInterval(function(){},1000);
       // console.log(timer);//唯一标识1
       // console.log(timer2);//唯一标识2
       // clearInterval清除计时器


       
       // var a = 0;
       // var timer=setInterval(function(){
       //     a++;
       //     console.log(a);
       //     if(a>5){
       //         clearInterval(timer);
       //     }
       // })


       //setTiemout 延时器
       //延迟特定的时间执行一次函数
       // window.setTimeout

       // setTimeout(test,2000);
       // function test(){
       //     console.log('登录成功');
       // };

延时器练习


<script type="text/javascript">
    const btn = document.getElementsByTagName('button')[0];
    btn.onclick=function(){
        this.innerHTML='加载中......';
        let self =this;
        window.setTimeout(function(){
            console.log(self);
            self.innerHTML='获取更多数据'
        },2000)
    }



    // clearTimeout
    
    
script>

clearTimeout

DOCTYPE html>


    
    
    Document


    5秒跳转百度....

在原型上写遍历一个父元素的子元素节点



    <h1>我是标题标签h1>
    <p>我是段落标签p>
    <a href="#">我是超链接标签a>

在原型上写找出一个元素的第N层父级元素


       <ul>
           <li>
               <p><a href="">a>p>
           li>
       ul>
   
   <script type="text/javascript">
       //在原型上写找出一个元素的第N层父级元素
       var  a =document.getElementsByTagName('a')[0];
       Element.prototype.elemParent = function(n){
           var type = typeof(n);
               elem = this;
           if(type === 'undefined' || type !== 'number'){
               return elem.parentNode;
           }else if(n<0){
               return undefined;
           }
           while(n){
               if(elem.nodeName==='HTML'){
                   elem =null;
                   return null
               }
               elem = elem.parentNode;
               n--;
           }
           return elem;
       }
       console.log(a.elemParent(6));
       
   script>

写寻找兄弟元素节点，参数’+’找之参数’-‘找之前 0 找自己

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div>
        <p>p>
        <h1>h1>
        <a href="">a>
        <strong>strong>
        <em>em>
        <h2>h2>
    div>
    <script type="text/javascript">
        //写寻找兄弟元素节点，参数'+'找之后
        //                  参数'-'找之前
        //                  0   找自己
        var oStrong = document.getElementsByTagName('strong')[0];
        Element.prototype.elemSibling = function(n){
            var elem  = this;
            // console.log(elem);
            // if(n>0){
            //     while(n){
            //         elem=elem.nextElementSibling;
            //         n--;
            //     }
               
            // }else if(n<0){
            //     while(n){
            //         elem  = elem.previousElementSibling;
            //         n++;
            //     }
                
            // }

            // while(n){
            //     if(n>0){

            //         elem = elem.nextElementSibling;
            //         n--;
            //     }else if(n<0){
            //         elem = elem.previousElementSibling;
            //         n++;
            //     }
            // }
            // return elem
            
            // while(n){
            //     if(n>0){
            //         if(elem.nextElementSibling){
            //             elem=elem.nextElementSibling;
            //         }else{
            //             for(elem=elem.nextSibling;elem && elem.nodeType !== 1 ;elem = elem.nextSibling);
            //         }
            //         n--;
            //     }else if(n<0){
            //                if(elem.previousElementSibling){
            //             elem=elem.previousElementSibling;
            //         }else{
            //             for(elem=elem.previousSibling;elem && elem.nodeType !== 1 ;elem = elem.previousSibling);
            //         }
            //         n++;
            //     }
            // }
            // return elem;

            while(n){
                if(n>0){
                    elem = elem.nextSibling;
                    while(elem && elem.nodeType !==1){
                        elem= elem.nextSibling;
                    }
                    n--;
                }else if(n<0){
                    elem = elem.previousSibling;
                    while(elem && elem.nodeType !== 1){
                        elem = elem.previousSibling;
                    }
                    n++;
                }
            }
            return elem;
        }
        // div.elemSibling()
        console.log(oStrong.elemSibling(-2));
        console.log(oStrong.elemSibling(-3));
        console.log(oStrong.elemSibling(-4));
        console.log(oStrong.elemSibling());
        console.log(oStrong.elemSibling(1));

        
    script>
body>
html>

递归遍历所有元素节点

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>

head>
<body>
    <div class="box">
        <ul>
            <li>
                <h1>1111h1>
                <a href="">2222a>
                <p>3333p>
                <div>
                    <ul>
                        <li>4444li>
                        <li>
                            <h2>55555h2>
                            <a href="">66666a>
                            <p>77777p>
                        li>
                    ul>
                div>
            li>
        ul>
        <div>
            <p>
                <a href="">8888a>
            p>
            <h1>
                <strong>9999strong>
                <span>000000span>
            h1>
        div>

    div>
body>
<script type="text/javascript">
    var box = document.getElementsByClassName('box')[0];
    getFullChildren(box)
    function getFullChildren(node){
        var children = node.childNodes,
            len = children.length,
            item;
        if(node && node.nodeType ===1){
            console.log(node);
        }
        for(var i=0;i
            item = children[i];
            getFullChildren(item)

        }
    }
script>
html>

倒序输出元素节点

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>

head>
<body>
    <div>
        <h1>1111h1>
        <a href="">222222a>
        <p>333333p>
        <strong>444444strong>
    div>
    <script type="text/javascript">
        var div = document.getElementsByTagName('div')[0],
            children = div.childNodes,
            len = children.length
        while(len--){
            div.appendChild(children[len])
        }
    script>
body>
html>

时钟

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <p>p>
    <script type="text/javascript">
        var p = document.getElementsByTagName('p')[0];
        Date.prototype.getDateTime = function(){
            var year=this.getFullYear(),
                month = this.getMonth()+1,
                day = this.getDate(),
                hours = this.getHours(),
                minutes = this.getMinutes(),
                seconds = this.getSeconds();

                function setZero(num){
                    if(num<10){
                        num = '0'+num
                    }
                    return num;
                }
                return year + '-' + setZero(month) + '-'+setZero(day)+' '+setZero(hours)+':'+setZero(minutes)+':'+setZero(seconds)
        }
       
        setInterval(function(){
 p.innerHTML =new Date().getDateTime()
        },1000)
    script>
body>
html>

倒计时

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <p>p>
    <script type="text/javascript">
        var oPara = document.getElementsByTagName('p')[0],
            endTime = new Date(2025,4,14,20,59,59).getTime();
        t = setInterval(function(){
            oPara.innerHTML = new Date().countDown(endTime,t)
        },1000)
        Date.prototype.countDown = function(endTime){
            var nowTime = this.getTime();
            var leftTime = (endTime-nowTime)/1000;
            var h,d,m,s;
            if(leftTime >= 0){
                d = Math.floor(leftTime/60/60/24)
                h=Math.floor(leftTime/60/60%24)
                m=Math.floor(leftTime/60%60)
                s=Math.floor(leftTime%60)
            }else{
                clearInterval(t)
            }
            h= h<10?'0'+h:h;
            m = m<10?'0'+h:h;
            s = s<10?'0' + s : s;
            return d+'天'+h+'小时'+ m+'分钟'+ s+'秒';
            
        }

        
// Math.round()四舍五入  (除外-6.5  --> -6)
// Math.ceil()向上取整
// Math.floor()向下取整

    script>    
body>
html>

pageXoffset/pageYoffset 查看滚动条的距离

DOCTYPE html>


    
    
    Document

获取浏览器可视区域的尺寸 window.innerWidth/innerHeight




    
    
    课时8

getBoundingClientRect()获取元素位置和尺寸信息

DOCTYPE html>


    
    
    Document

offsetTop和offsetParent

DOCTYPE html>


    
    
    Document

style读写样式


    <script type="text/javascript">
        // DOM间接操作CSS
        var oDiv = document.getElementsByTagName('div')[0];
        // oDiv.style.width='200px';
        // oDiv.style.height='200px';
        //复合值一定拆解赋值
        // oDiv.style.border = "12px solid #000"
        oDiv.style.borderWidth = '30px';
        oDiv.style.borderStyle = 'solid';
        oDiv.style.borderColor = '#444';
        
        oDiv.style.backgroundColor='green';

        //保留字前面加CSS
        oDiv.style.cssFloat='left';

        // elem.style.xxx   ->  可读可写
        //小驼峰写
        //值  ->  字符串
        //复合值一定拆解赋值

        //保留字前面加CSS


        // 查看css属性的方法
        // oDiv.style
        // console.log(oDiv.style);

查看计算属性

//查看计算属性
       console.log(getComputedStyle(oDiv,null));
       console.log(getComputedStyle(oDiv,null)['height']);//200px
       
       //IE8及以下不支持
       //elem.currentStyle   ->IE8及以下支持
       // console.log(oDiv.currentStyle.borderColor);
       
       function getStyles(elem,prop){
           if(window.getComputedStyle){
               if(prop){
                   return window.getComputedStyle(elem,null)[prop];
               }else{
                   return window.getComputedStyle(elem,null)
               }
           }else{
               if(prop){
                   return elem.currentStyle[prop];
               }else{
                   return elem.currentStyle;
               }
           }

       }

       
       console.log(getStyles(oDiv,"height"));//200px

offsetWidth和offsetHeight访问物理宽度和高度

   //offsetWidth和offsetHeight访问物理宽度和高度
    console.log(oDiv.style.height);//200px
    console.log(oDiv.style.width);//200px
    
    console.log(oDiv.offsetHeight);//459px
    console.log(oDiv.offsetWidth);//359px
    
    // offsetWidth会计算padding值
    console.log(oDiv.offsetWidth);//122px

    //Js运动计算
    oDiv.onclick = function(){
        //getStyles不会计入padding值
        var width=parseInt(getStyles(oDiv,'width'));
        console.log(width);
        this.style.width = width+10+'px'
    }

获取伪元素的高度和宽度




    
    
    Document

读写样式_练习下拉列表

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style type="text/css">
        a{
            text-decoration: none;
        }
        ul{
            padding: 0;
            margin:0 ;
            list-style:none;
        }
        .dropdown{
            position: relative;
            width: 200px;
            height: 50px;
            background-color: #000;
        }
        .dropdown::after{
            content: "";
            display: table;
            width: 15px;
            height: 15px;
            position: absolute;
            top: 18px;
            right: 15px;
            background-image: url(img/icon.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .dropdown.up::after{
            background-image: url(img/jd_logo.png);
        }
        /* .dropdown:hover .list{
            display: block;
        } */
        .dropdown .list{
            display: none;
        }
        .dropdown .a{
             display: block;
        }
        .dropdown .main{
            height: 100%;
            text-align: center;
            line-height: 50px;
            color: #fff;
            padding-left: 40px;
        }
        .dropdown .item{
            height: 40px;
            background-color: #333;
        }
        .dropdown .item:hover{
            background-color: #000;
        }
        .dropdown .item a{
            padding-left: 40px;
            height: 100%;
            color: #999;
            text-align: center;
            line-height: 40px;
            
        }
    style>
head>
<body>
    <div class="dropdown">
        <a href="javascript:;" class="main">下拉菜单a>
        <ul class="list">
            <li class="item"><a href="">第1个项目a>li>
            <li class="item"><a href="">第2个项目a>li>
            <li class="item"><a href="">第3个项目a>li>
            <li class="item"><a href="">第4个项目a>li>
            <li class="item"><a href="">第5个项目a>li>
        ul>
    div>
    <script type="text/javascript">
        var dropdown = document.getElementsByClassName('dropdown')[0];
        var oList = elemChildren(dropdown)[1];
        console.log(oList);
        
        dropdown.onmouseenter = function(){
            oList.style.display = 'block';
            this.className += ' up'
        }
        dropdown.onmouseleave = function(){
            oList.style.display = 'none';
            this.classList = 'dropdown'
        }
        function elemChildren(node){
            var temp ={
                'length':0,
                'push':Array.prototype.push,
                'splice':Array.prototype.splice,
            };
            var children = node.childNodes,
                len = children.length,
                item;
            for(var i=0;i
                item = children[i];
                if(item.nodeType===1){
                    temp.push(item);
                }
            }
            return temp;
        }
    script>
body>
html>

事件

绑定事件的处理程序事件处理函数

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        /* div{
            width: 100px;
            height: 100px;
            background-color: green;
        } */
        button{
            outline:none
        }
        .loading{
            background-color: #ddd;
            color: green;
        }
    style>
head>
<body>
    
     <button onclick="console.log(2)">加载更多button>
    <script type="text/javascript">
        //事件

        
        //吃饭-> 长胖


        //onclick = function(){//事件的反馈}
        //绑定事件的处理程序   事件处理函数

        //绑定（点击，拖拽）事件  = 绑定事件的处理函数/处理程序

        // var oDiv = document.getElementsByTagName('div')[0];
        // oDiv.onclick = function(){
        //     this.style.backgroundColor = 'orange';
        // }
        // 事件源-> 对象
        

        //事件 + 事件的反馈 = 前端交互  交互体验

        //如何绑定事件的处理函数
        //elem.onclick = function(){}
        var btn = document.getElementsByTagName('button')[0];
        btn.onclick=function(){
            this.innerHTML= '加载中....';
            this.className = 'loading';
            var self = this;
            setTimeout(function(){
                self.innerHTML="加载更多";
                self.className='';
            },2000)
        }
        btn.onclick = function(){
            console.log('加载更多数据');
        }

        // onclick的一个元素的处理事件，只能绑定一个函数
        //onclick内联事件监听器

        


    script>
body>
html>

事件监听器

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
         button{
            outline:none
        }
        .loading{
            background-color: #ddd;
            color: green;
        }
    style>
head>
<body>
    <button>加载更多button>
    <script type="text/javascript">
        var oBtn = document.getElementsByTagName('button')[0];
        //elem.addEventListener(事件类型，事件处理函数，false);
        // oBtn.onclick = function(){}

        //IE9以下不兼容，W3C规范
        //注册时间监听器===绑定事件监听器
        // oBtn.addEventListener('click',function(){
        //     this.innerHTML = '加载中....';
        //     this.className = 'loading';

        //     var self = this;
        //     setTimeout(function(){
        //         self.innerHTML='加载更多';
        //         self.className ='';
        //     },2000)
        // },false)

        // oBtn.addEventListener('click',function(){
        //     console.log('加载更多数据');
            
        // },false)


        // oBtn.addEventListener('click',function(){
        //     console.log(1);
            
        // },false);
        // oBtn.addEventListener('click',function(){
        //     console.log(2);
            
        // },false)

        // oBtn.addEventListener('click',test,false);
        // oBtn.addEventListener('click',test,false);
        // function test(){
        //     console.log(1);
            
        // }
        //他们指向同一个事件函数，所以只执行一次

        // IE8及以下的绑定方法
        //elem.attachEvent(事件类型，事件处理函数)

        // oBtn.attachEvent('onclick',function(){
        //     //this ->window
        //     oBtn.innerHTML = '加载中....';
        //     oBtn.className = 'loading';
        //     setTimeout(function() {
        //         oBtn.innerHTML = '加载更多';
        //         oBtn.className = '';
        //     }, 2000);
        // })

        


    script>
body>
html>

事件处理程序的运行环境

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        button{
            outline: none;
            border: none;
            width: 100px;
            height: 30px;
            background-color: red;
            color: #fff;
        }
        .got{
            background-color: #ddd;
        }
    style>
head>
<body>
    <button>领取优惠卷button>
    
    <script type="text/javascript">
        //事件处理程序的运行环境  -> this
        var oBtn = document.getElementsByTagName('button')[0];

        // oBtn.onclick = function(){
        //     console.log(this);
        // }

        // oBtn.addEventListener('click',function(){
        //     console.log(this);
            
        // },false);


        // oBtn.attachEvent('onclick',function(){
        //     //this ->  window
        //     test.call(oBtn);

        // });
        // function test(){
        //     // this->oBtn
        //     console.log(this);
        // }


        //封装事件处理函数
        // addEvent(oBtn,'click',function(){
        //     console.log(1);
        // });

        function addEvent(el,type,fn){
            if(el.addEventListener){
                el.addEventListener(type,fn,false)
            }else if(el.attachEvent){
                el.attachEvent('on'+type,function(){
                    fn.call(el);
                })
            }else{
                el['on'+type]=fn;
            }
        }
       
    script>
body>
html>

面试题

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>

    style>
head>
<body>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>5li>
    ul>
    <script type="text/javascript">
        var oLi =document.getElementsByTagName('li'),
            len = oLi.length,
            item;
        for(var i =0;i
            (function(i){
                item = oLi[i];
                item.onclick = addEventListener('click',function(){
                    console.log(i);
                },false)
            })(i);
        }
    script>
body>
html>

解除事件处理程序

//解除事件处理程序
       //elem.onclick = null/false

       //elem.removeEventListener('click',fn,false);
       //elem.addmoveEventListener('click',fn,false);

       //elem.detachEvent('onclick',test);

       // oBtn.onclick = function(){
       //     this.className= 'got';
       //     this.innerHTML = '已领取';
       //     this.onclick = null
       // }
       oBtn.addEventListener('click',test,false)
       
       function test(){
           this.className='got';
           this.innerHTML = '已领取';
           oBtn.removeEventListener('click',test,false)
       }
       


       //严格模式下不可以使用
       // oBtn.addEventListener('click',function(){
       //     this.className='got';
       //     this.innerHTML = '已领取';
       //     oBtn.removeEventListener('click',arguments.callee,false);
       // })



 // IE8及以下
       // oBtn.detachEvent('onclick',test);
       // oBtn.attachEvent('onclick',test);

内联样式无法嵌套

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style type="text/css">
        a{
            display: block;
        }
        [href="http://www.baidu.com"]{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        [href="http://www.taobao.com"]{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    style>
head>
<body>
    
     
    <a href="http://www.baidu.com">
        baidu<a href="http://www.taobao.com">淘宝a>
    a>
    <script type="text/javascript">
        //事件处理程序的运行环境  -> this
        var oBtn = document.getElementsByTagName('button')[0];
script>
body>
html>

冒泡和捕获

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style type="text/css">
        .wrapper{
            width: 300px;
            height: 300px;
            background-color: green;
        }
        .outer{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    style>
head>
<body>
    <div class="wrapper">
        <div class="outer">
            <div class="inner">div>
        div>
    div>
    <script type="text/javascript">
        var wrapper  =document.getElementsByClassName('wrapper')[0];
        var outer = wrapper.getElementsByClassName('outer')[0];
        var inner = outer.getElementsByClassName('inner')[0];
        console.log(wrapper,outer,inner);
        // wrapper.addEventListener('click',function(){
        //     console.log('wrapper');
        // },false)
        // outer.addEventListener('click',function(){
        //     console.log('outer');
        // },false)
        // inner.addEventListener('click',function(){
        //     console.log('inner');
        // },false)
        //冒泡：我只关心你有没有和我相同的事件函数，有我就触发
        //true事件捕获  ,    false事件冒泡
        wrapper.addEventListener('click',function(){
            console.log('bubblewrapper');
        },false)
        outer.addEventListener('click',function(){
            console.log('bubbleouter');
        },false)
        inner.addEventListener('click',function(){
            console.log('bubbleinner');
        },false)

        wrapper.addEventListener('click',function(){
            console.log('wrapper');
        },true)
        outer.addEventListener('click',function(){
            console.log('outer');
        },true)
        inner.addEventListener('click',function(){
            console.log('inner');
        },true)
        //先捕获，后冒泡
    script>
body>
html>

取消冒泡

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .wrapper{
            position: relative;
            width: 300px;
            height: 300px;
            background-color: green;
        }
        .apply{
            position: absolute;
            bottom: 15px;
            right:15px;

            width: 80px;
            height: 30px;
            background-color: red;
            color: #fff;
            line-height: 30px;
            text-align :center;
        }
    style>
head>
<body>
    <div class="wrapper">
        <div class="apply">立即申请div>
    div>
    <script type="text/javascript">
        //取消冒泡
        //W3C,e.stopPropagetion()
        var wrapper= document.getElementsByClassName('wrapper')[0];
        var apply = document.getElementsByClassName('apply')[0];
        wrapper.addEventListener('click',function(){
            console.log('详情');
        },false)
        apply.addEventListener('click',function(e){
            // 填e,ev,event,事件对象:说明事件的详细信息
            // IE8  window.event

            var e = e|| window.event;
// console.log(e.stopPropagation);
            // console.log(e);
            // e.stopPropagation();//阻止事件冒泡
            // e.cancelBubble = true;
            cancelBubble(e)
            console.log('已申请');
        },false)
        
        
        //封装取消冒泡
        function cancelBubble(e){
            var e = e||window.event;
            if(e.stopPropagation){
                e.stopPropagation();
            }else{
                e.cancelBubble = true;
            }
            
        }
    script>
body>
html>

取消默认事件

thhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    

    
    
    
    <a href="http://www.baidu.com">百度一下a>
    <script type="text/javascript">
        //取消默认事件
        document.oncontextmenu =function(e){
            //打开右键菜单----oncontextmenu
            // return false;//阻止默认事件
            // e.preventDefault()
            //W3C的方法：e.preventDefault()  IE9及以下不兼容
            //IE9以下
            // e.returnValue = false;

        }
        // addEventListener里面使用return false，不会生效
        var a =document.getElementsByTagName('a')[0];
        a.onclick = function(e){
            e.preventDefault();
            
        }
    script>
body>
html>

事件流

珈的个人博客

DOM

<script type="text/javascript"> var person = document.getElementsByTagName('person')[0]; console.log(person); var uname = person.getElementsByTagName('uname')[0]; console.log(uname.innerHTML); script>

DOM无法操作css,只是覆盖了css，操作的是style

实现slider图的切换

实现切换栏

getElementsByClassName和getElementsByTagName选择出来的都是一个数组，都是需要加上[index]的

getElementsByname

querySelectorAll 缺点：1.性能 2.不实时

遍历节点树

遍历元素节点树

nodeName 节点都有节点属性

innerHTML渲染页面

电影名称:'+item.title+'

replaceChild

字符实体 可以直接识别html文本

setAttribute

自定义属性

createDocumentFragment

重写insertAfter

日期对象 Date()

计算器练习

已进行0秒

延时器练习

clearTimeout

在原型上写遍历一个父元素的子元素节点

在原型上写找出一个元素的第N层父级元素

写寻找兄弟元素节点，参数’+’找之 参数’-‘找之前 0 找自己

递归遍历所有元素节点

倒序输出元素节点

时钟

倒计时

pageXoffset/pageYoffset 查看滚动条的距离

获取浏览器可视区域的尺寸 window.innerWidth/innerHeight

getBoundingClientRect()获取元素位置和尺寸信息

offsetTop和offsetParent

style读写样式

查看计算属性

offsetWidth和offsetHeight访问物理宽度和高度

获取伪元素的高度和宽度

读写样式_练习 下拉列表

事件

绑定事件的处理程序 事件处理函数

事件监听器

事件处理程序的运行环境

面试题

解除事件处理程序

内联样式无法嵌套

冒泡和捕获

取消冒泡

取消默认事件

事件流

<script type="text/javascript">
var person = document.getElementsByTagName('person')[0];
console.log(person);
var uname = person.getElementsByTagName('uname')[0];
console.log(uname.innerHTML);

script>

字符实体可以直接识别html文本

写寻找兄弟元素节点，参数’+’找之参数’-‘找之前 0 找自己

读写样式_练习下拉列表

绑定事件的处理程序事件处理函数