JavaScript-day13------>主要内容DOM,DOM的基本操作;页面的几种宽高,以及返回顶部,到达底部;获取元素,标签的内容操作;点击切换效果和选项卡等。

1.DOM

 DOM : document object model    操作页面标签和css

         DOM实际上是BOM的一部分

        DOM基本操作

console.log(document) ;

console.log(document.documentElement) ;  //html

console.log(document.body) ;  //body

console.log(document.head) ;  //head

console.log(document.title) ;  //title

document.title = '百度一下'  //title 是可读可写的

2.页面的几种宽高

clientWidth / clientHeight        浏览器的可视宽高

scrollWidth /  scrollHeight        浏览器的实际宽高

scrollTop /      scrollLeft        页面被卷去的宽高

console.log(document.documentElement.clientWidth) ;
console.log(document.documentElement.clientHeight) ;

console.log(document.documentElement.scrollWidth) ;
console.log(document.documentElement.scrollHeight) ;

console.log(document.documentElement.scrollTop) ;
console.log(document.documentElement.scrollLeft) ;


//低版本IE的写法
//console.log(document.body.scrollTop) ;

//使用短路赋值
var root = document.documentElement || document.body  ;

3.返回顶部

css样式部分:

   <style>
        body{
            height: 3000px;
        }
        .a{
            width: 130px;
            height: 130px;
            background-color: #f00;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>

主要部分:

<body>

    <div class="a"></div>

    <script>
        //获取元素
        //    ByClassName 得到的一定是一个数组,即使只有一个值也是数组
        var oDivs = document.getElementByClassName('a');
        console.log(oDivs) ;
        console.log(oDivs[0]) ;

        oDivs[0].onclick = function () {
            var t = setInterval(function () {
                document.documentElement.scrollTop -= 20 ;
                // 滚动条所在的位置不一定能被20除
                if(document.documentElement.scrollTop <= 0) {
                    clearInterval(t) ;
                }
            } , 10)
        }
    </script>
</body>

 防抖:

        var oDivs = document.getElementsByClassName('a') ;
        console.log(oDivs);
        console.log(oDivs[0]);
    
        var t ;
        oDivs[0].onclick = function () {  
            clearInterval(t)
             t = setInterval(function () {  
                document.documentElement.scrollTop -= 20 ;
                // 滚动条所在的位置不一定能被20整除
                if(document.documentElement.scrollTop <= 0) {
                    clearInterval(t)
                }
            },10)
        }

节流:

        var flag = true ;
        oDivs[0].onclick = function () { 
            if(flag) {
                flag = false ;
                var t = setInterval(function () {  
                document.documentElement.scrollTop -= 5 ;
                // 滚动条所在的位置不一定能被20整除
                if(document.documentElement.scrollTop <= 0) {
                    clearInterval(t);
                    flag = true
                }
                },1)
            } 
            
        }

4.判断到达底部

css样式:

    <style>
        body{
            height: 3000px;
        }
        p{
            position: fixed;
            bottom: 0;
            width: 100%;
            text-align: center;
            display: none;
        }
    </style>

主要内容:

<body>

    <p id="p">已经到达最底部了</p>


    <script>
        //拿对象
        var oP = document.getElementbyId('p') ;
        
        //这个计算如果写在事件里面每次触发都要不断的来计算,写在外部可以有效的减少计算的时间
        //优化性能
        //最大的滚动高度 = 页面的实际高度 - 浏览器的可视高度
        var maxHeight = document.documentElement.scrollHeight ;
        document.documentElement.clientHeight - 20 ;

        //判断到达底部
        var t ;
        widow.onscroll = function () {
            clearTimeout(t) ;
            t = setTimeout(function () {
                if(document.documentElement.scrollTop >= maxHeight){
                    console.log('到达底部了');
                }
                else{
                    oP.style.display = 'none' ;
                }
            },300) 
        }

    </script>
    
</body>

5.获取元素

document.getElementById        获取一个元素

document.getElementByClassName         class是关键字  ClassName  获取一个元素集和

document.getElementsByName        通过name属性获取元素集和(一般只有表单元素才有name属性)

document.getElementsByTagName()        通过标签名获取元素集合

ES6新增的方法

    queryselectorAll()        获取所有的元素集合   

     querySelector()           获取第一个元素

    var oInps = document.getElementsByName('a') ;
    console.log(oInps); 
    
    var oInps = document.querySelectorAll('input') ;
    console.log(oInps);
    
    var oDivs = document.querySelectorAll('.a') ;
    console.log(oDivs) ;

    var oDivs = document.querySelectorAll('div');

    console.log(oDivs);
    

    var oInp = document.querySelector('input:nth-child(2)') ;
    console.log(oInp) ;

6.标签

标签内容

        value   输入框的内容

        innerHTML  标签的内容   识别标签

        innerText  标签的内容       不识别标签 --- 把标签当做了内容的一部分

        var oDiv = document.querySelector('.a') ;
        var content = '<span>呵呵<span>';
        // oDiv.innerHTML = content;
        oDiv.innerText = content;

标签的属性

获取标签的属性

        获取所有的属性        attributes

        获取指定的属性        getAttribute(' 属性名 ')

        添加指定的属性值        setattribute(' 属性名  ' , ' 属性值 ')

        删除指定的属性            removeAttribute('属性名' )

        

        简写

                自有属性可以简写        oDiv.id        oDiv.className

                自定义属性不能简写

        var oDiv = document.querySelector('#a') ;
        // attribute 属性:包括自有属性和自定义属性
        // console.log(oDiv.attributes);

        // console.log(oDiv.attributes.id);   // id='a'

        // console.log(oDiv.attributes.class);  // class='b'

        // console.log(oDiv.attributes.aa);  // aa='a'


        // 获取具体属性点 方法

        console.log(oDiv.getAttribute('id'));   // a
        console.log(oDiv.getAttribute('class'));  // b
        console.log(oDiv.getAttribute('aa'));   // a


        // 添加属性
        //    setAttribute('属性名' , '属性值')  如果已经存在,就会产生覆盖
        oDiv.setAttribute('class' , 'q')

        // 删除属性
        oDiv.removeAttribute('aa')


        // 自有属性可以直接使用
        console.log(oDiv.id);
        oDiv.id = 'h'


        console.log(oDiv.className);  // class需要替换成className


        // 自定义属性不能直接使用
        // console.log(oDiv.vv);  

特殊标签的属性:

        表单上的自有属性也可以直接简写

          disabled = true / false

          checked = true / false

          selected = true / false

        var oInp1 = document.querySelector('.inp1');
        var oInp2 = document.querySelector('.inp2');
        var oInp3 = document.querySelector('#a');
        var oOptions = document.querySelectorAll('option');

        setTimeout(function () {  
            oInp1.disabled = false
            oInp2.checked = false
            oOptions[1].selected = true
        },1000)

标签的类名

       className 是一个字符串

        classList  是一个伪数组

           .add()  添加类名

           .remove()  删除类名

           .replace()  替换类名

    <style>
        .on{
            color: red;
        }
    </style>
    <div class="aon b">66</div>

    <script>

         var oDiv = document.querySelector('.b') ;
        console.log(oDiv.className);


       

        // oDiv.onclick = function () { 
        //     var arr = oDiv.className.split(' ') ;
        //     console.log(arr);
        //     // 方法1:判断数组中是否存在这个类名,如果存在就要删除  indexOf  splice
        //     if(arr.includes('on')) {
        //         // 方法2:把不包含on的值存入新的数组
        //         var arr2 = [] ;
        //         for(var i in arr) {
        //             if(arr[i] !== 'on') {
        //                 arr2.push(arr[i])
        //             }
        //         }
        //         this.className = arr2.join(' ')
        //     } 
        //     else {
        //         this.className += ' on' ;
        //     }
        // }


        // var list = oDiv.classList ;
        //   .add()
        //   .remove()
        //   .replace()

        oDiv.onclick = function () {  
            if(this.className.includes(' on')) {
                this.classList.remove('on')

            } else {
                this.classList.add('on')
            }
        }
    </script>

标签的样式操作

        样式操作

          1 获取样式

               getComputedStyle(obj)['color']

               如果是行内样式  就可以直接获取   obj.style.color

          2 设置样式

               obj.style.color = 'red' ;

               obj.style.cssText = 'color:red;width:100px;'  --- 会覆盖之前的行内样式(不想覆盖就+=)

        var oDiv = document.querySelector('.a') ;

        // js动态添加的样式会以行内样式的形式出现
        oDiv.style.color = 'red'
        // 改为驼峰
        oDiv.style.fontSize = '20px'
        // js只能拿到行内样式
        console.log(oDiv.style.color);

        console.log(oDiv.style.height);  // 非行内样式无法获取

        // cssText给标签添加多个样式,但是会覆盖之前的行内样式
        // oDiv.style.cssText += 'width:100px;height:100px;color:blue;'


        // console.log(getComputedStyle(oDiv).height);

        // console.log(getComputedStyle(oDiv)['height']);

        // console.log(getComputedStyle(oDiv).color);

        // currentStyle 只在IE8及以下可以识别
        // console.log(oDiv.currentStyle.color);


        function css(obj , prop) {
            if(getComputedStyle) {
                return getComputedStyle(obj)[prop]
            } 
            return obj.currentStyle[prop]
        }


        console.log(css(oDiv , 'color'));

给标签设置样式

        给标签添加样式

          1 通过cssText添加

          2 直接加类名

          一般主要通过第二种方式更为方便

    <style>
        .a{
            color: red;
            width: 100px;
            height: 100px;
            background-color: #ff0;
        }
    </style>
        var oH1 = document.querySelector('h1') ;

        // oH1.style.cssText = 'color:red;width:100px;height:100px;background-color:#ff0';

        oH1.classList.add('a')

点击切换效果

css样式

    <style>
        p{
            display: flex;  
        }
        span{
            width: 40px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #000;
            margin: 10px;
            cursor: pointer;
        }
        .active{
            border-color: red;
            color: red;
        }
    </style>

主体内容:

<body>

    <p>
        <span>S</span>
        <span>M</span>
        <span>L</span>
        <span>XL</span>
    </p>


    <script>
        var oSpans = document.querySelectorAll('span') ;

        // 循环绑定事件
        // for(var i = 0 ; i < oSpans.length ; i++) {
        //     oSpans[i].onclick = function () {  
        //         // 清除所有
        //         for(var j = 0 ; j < oSpans.length ; j++) {
        //             oSpans[j].classList.remove('active')
        //         }
        //         // 给当前对象添加
        //         this.classList.add('active') ;
        //     }
        // }


        for(var i = 0 ; i < oSpans.length ; i++) {
            oSpans[i].onclick = function () {  
                if(this.className.includes('active')) {
                    this.classList.remove('active')
                } else {
                    this.classList.add('active') ;
                }
            }
        }

        
    </script>
    
</body>

7.全选和反选

    <input type="checkbox" class="all">
    <br>
    <input type="checkbox" class="one">
    <input type="checkbox" class="one">
    <input type="checkbox" class="one">


    <script>

        var oAll = document.querySelector('.all') ;
        var oOnes = document.querySelectorAll('.one') ;

        oAll.onclick = function () {  
            
            // if(oAll.checked === true) {
            //     oOnes[0].checked = true ;
            //     oOnes[1].checked = true ;
            //     oOnes[2].checked = true ;
            // } else {
            //     oOnes[0].checked = false ;
            //     oOnes[1].checked = false ;
            //     oOnes[2].checked = false ;
            // }

            for(var i = 0 ; i < oOnes.length ; i++) {
                oOnes[i].checked = oAll.checked ;
            }
        }






        // 反选
        // 循环绑定点击事件
        // for(var i = 0 ; i < oOnes.length ; i++) {
        //     oOnes[i].onclick = function () {  
        //         // 每一个单选都选中 全选才选中
        //         if(oOnes[0].checked && oOnes[1].checked && oOnes[2].checked) {
        //             oAll.checked = true
        //         } else {
        //             oAll.checked = false
        //         }
        //     }
        // }


        // for(var i = 0 ; i < oOnes.length ; i++) {
        //     oOnes[i].onclick = function () {  
        //         var flag = true ;
        //         for(var j = 0 ; j < oOnes.length ; j++) {
        //             if(!oOnes[j].checked) {
        //                 flag = false ;
        //                 break ;
        //             }
        //         }
        //         // if(flag){
        //         //     oAll.checked = true ;
        //         // } else {
        //         //     oAll.checked = false ;
        //         // }
        //         oAll.checked = flag ;
        //     }
        // }


        // for(var i = 0 ; i < oOnes.length ; i++) {
        //     oOnes[i].onclick = function () {  
        //         for(var j = 0 ; j < oOnes.length ; j++) {
        //             if(!oOnes[j].checked) {
        //                 break ;
        //             }
        //         }
        //         // oAll.checked = j === oOnes.length ? true : false ;
        //         oAll.checked = j === oOnes.length
        //     }
        // }


        
        for(var i = 0 ; i < oOnes.length ; i++) {
            oOnes[i].onclick = function () {  
                var count = 0 ;
                for(var j = 0 ; j < oOnes.length ; j++) {
                    if(oOnes[j].checked) {
                        count++ ;
                    } else {
                        break ;
                    }
                }
                oAll.checked = count === oOnes.length
            }
        }








    </script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值