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

最新推荐文章于 2024-10-30 19:10:39 发布

莫名我

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量505

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_52429998/article/details/122093082

版权

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>