dom实例

目录

    ##拖动效果##
    ##滚动对象的位置##
    ##window的滚动##
    ##指定滚动条滚动到某一个位置##
    ##固定导航##
    ##返回顶部##
    ##触底加载更多##
    ##二级联动##
    ##三级联动##

拖动效果

        <div class="box"></div>
        var box = document.querySelector('.box')
        // 1:在box上按下:长按
        box.onmousedown = function (e) {
            // 获取鼠标点击位置 在元素上的坐标
            var x = e.offsetX
            var y = e.offsetY
            // 2:浏览器窗口中移动
            window.onmousemove = function (e) {
                console.log('11111111');
                // 求元素移动的位移
                var movex = e.clientX - x
                var movey = e.clientY - y
                // 让元素动起来
                box.style.left = movex + 'px'
                box.style.top = movey + 'px'
            }
        }
        // 3:松开鼠标
        box.onmouseup = function () {
            window.onmousemove = null
        }
        // 预留bug:元素移动的范围不能超过浏览器

滚动对象的位置

        <div class="content"></div>
        var content = document.querySelector('.content')
        for (let i = 0; i < 100; i++) {
            var h1 = document.createElement('h1')
            h1.innerHTML = '滚动位置测试' + i
            content.appendChild(h1)

        }
        // 元素:滚动条 高度 内容高度
        // 内容高度 =滚动条滚动最大高度+高度
        // el.scrollHeight = el.scrollTop(最大) +height
        window.onscroll = function (e) {
            var ev = e || window.event
            var page=document.documentElement||document.body
            console.log(page.scrollTop);//滚动条滚动的高度 
            console.log(page.scrollHeight);//内容高度
            console.log(getComputedStyle(box,null).height);//元素高度
        }

window的滚动

        <div class="content"></div>
        var content = document.querySelector('.content');
        for (let i = 0; i < 100; i++) {
            var h1 = document.createElement('h1');
            h1.innerHTML = '滚动位置测试' + i;
            content.appendChild(h1)
        }
        window.onscroll = function(){
            console.log(scrollY);
        }

指定滚动条滚动到某一个位置

    <button id="btn">指定滚动位置</button>
    <div class="content"></div>
        var content = document.querySelector('.content');
        for (let i = 0; i < 100; i++) {
            var h1 = document.createElement('h1');
            h1.innerHTML = '滚动位置测试' + i;
            content.appendChild(h1)
        }
        window.onscroll = function(){
            console.log(scrollY);
        }

        btn.onclick = function(){
            /**
             * scrollTo(x,y) scrollBy(x,y)
             * 作用：指定滚动条滚动到某一个位置
             * 参一：x  控制横向滚动条
             * 参二：y  控制纵向滚动条
             */
            // scrollTo(0,300)
            scrollBy(0,300)
        }

        // 常见效果：返回顶部

固定导航

    <div class="navbar"></div>
    <nav>
        <ul>
            <li><a href="#">导航001</a></li>
            <li><a href="#">导航002</a></li>
            <li><a href="#">导航003</a></li>
            <li><a href="#">导航004</a></li>
            <li><a href="#">导航005</a></li>
        </ul>
    </nav>
    <div class="content"></div>
        var content = document.querySelector('.content');
        for (let i = 0; i < 100; i++) {
            var h1 = document.createElement('h1');
            h1.innerHTML = '滚动位置测试' + i;
            content.appendChild(h1)
        }

        // 思路：
        // 当滚动条滚动太某一个位置时候，动态更改固定定位的top

        var nav = document.querySelector('nav');
        var navBar = document.querySelector('.navbar');
        // 作用控制动画执行的
        var flag = true;

        // 1：监听滚动台哦
        window.onscroll = function () {

            // 2：获取滚动滚动位置
            var y = document.documentElement.scrollTop || document.body.scrollTop;
            // 3：找到 滚动到哪里，nav固定定位
            var isHeight = parseFloat(getComputedStyle(navBar, null).height || navBar.currentStyle.height);
            if (y > isHeight) {
                console.log('11111111111');
                // 设置 nav固定顶部
                nav.style.position = 'fixed';
                nav.style.top = 0 + 'px';
                var top = -80;
                // 当滚动条大于300 动画出现导航条只能走一次
                if (flag) {
                    flag = false;
                    var timer = setInterval(function () {
                        top = top + 1;
                        nav.style.top = top + 'px';
                        if (top >= 0) {
                            nav.style.top = 0 + 'px';
                            clearInterval(timer);
                        }
                    }, 16.7)
                }

                // bug 滚动定时器运行次数太多了
                // console.log(timer);

            }else{
                nav.style.position = '';
                nav.style.top = '';
                flag = true;
            }
        }

返回顶部

    <div class="content"></div>
    <button >返回顶部</button>
        var content = document.querySelector('.content');
        var btn = document.querySelector("button");
        btn.style.display = 'none'
        for(var i = 0;i<100;i++){
            var h1 = document.createElement('h1');
            h1.innerHTML = '文本内容' + i;
            content.appendChild(h1)
        }
        var  Y = 0; // 记录滚动条滚动位置
        // 1：如何实现监听滚动条的位置
        window.onscroll = function(e){
            // console.log(scrollY);
            Y = scrollY
            if(scrollY>400){
                // alert('位置到了')
                btn.style.display = 'block'
            }else{
                btn.style.display = 'none'
            }
        }
        btn.onclick = function(){
            // 如何实现指定滚动条滚动到哪一个位置 
            // 如何实现过度返回顶部？
            console.log(Y);
            // 如何随时获取滚动条，当前滚动的高度
            var move = Y;;
           var timer = setInterval(function(){
                move = move - 10
                if(move<=0){
                    move = 0;
                    scrollTo(0,move);//参数为x方向和y方向
                    clearInterval(timer)
                }
                console.log(move);
                scrollTo(0,move);
            },1)
        }
<!-- 
    1: 当滚动条滚动到某个位置时候；显示返回顶部阿牛
    2：小于该位置时候按钮隐藏
    3：点击【返回顶部】按钮；滚动条滚动的位置为0
    4: 过度返回顶部
 -->
 <!-- 
     如何设置初始化样式

     返回顶部录屏时间 15分
  -->

触底加载更多

    <div class="list">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script src="./data.js"></script>
        // 触底加载更多
        // 1: 查找滚动到底的条件
        // --> 滚动条滚动高度 + 窗口高度 > 页面高度  重点
        /* 
            console.log(scrollY);//已经滚动的高度
            console.log(innerHeight);//浏览器内容显示部分高度(导航栏到浏览器底部)
            console.log(document.documentElement.scrollHeight);//浏览器所有内容高度
            //以上三者关系:scrollY+innerHeight=document.documentElement.scrollHeight 
            
        */
        // 2: 到底后更新数据  （1s后更新数据）
        // 3：更新页面
        // ----> bug:没等数据更新结束，出现多次触底问题。
        // ----> 预期效果：数据更新完毕；页面更具数据渲染完毕；才能出现再次触底现象
        // ----> 防抖节流 
        var list = data;
        var items = document.querySelectorAll('.item');
        for (var i = 0; i < items.length; i++) {
            items[i].innerHTML = list[i];
        }

        var flag = true; // true 表示允许执行到底 false 禁止执行到底
        // 1:监听滚动条位置
        window.addEventListener('scroll', function () {
            // 是否到底的条件表达式
            var isSole = scrollY + innerHeight >= document.documentElement.scrollHeight - 10;
            // console.log(isSole);
            if (isSole && flag) { // 到底了
                console.log('到底了');
                flag = false
                setTimeout(function () {
                    var data = [
                        'dfadsfasf', 'fasdfas', 'fasfdsdf', 'fasdfasd', 'fasdere', 'fasdfsa'
                    ]
                    // 到底后；更新 list 数组
                    list = list.concat(data)
                    console.log(list);
                    // 根据list 实现渲染页面
                    render(list)

                    // 页面渲染结束后；释放开关
                    flag = true;

                }, 1500)


            }
        })

        // 根据list数组长度渲染item
        function render(data) {
            var list_dom = document.querySelector(".list");
            // 清空 list_dom;
            var str = ''
            for (var i = 0; i < data.length; i++) {
                str = str + `
                <div class="item">${data[i]}</div>
                `
            }
            list_dom.innerHTML = str;
        }

二级联动

<select name="" id="province"></select>
    <select name="" id="city"></select>
    <!-- 
        如何实现联动效果

     -->
    <script src="./area.js"></script>
        //  初始化省
        //  1: 将省数据渲染到 页面中
        var pro = document.querySelector('#province')
        //  console.log(area);
        //  for(let k in area){
        //      var option = document.createElement("option")
        //      option.innerHTML = k;
        //      option.value = k
        //      pro.appendChild(option)
        //  }

        renderOpt('#province', area)
        //  pro.options[3].selected= true
        //  初始化市；
        // 1：获取当前初始化省？
        // 如何获取 select 中选中了是哪个option

        // for(let i = 0;i<pro.options.length;i++){
        //     if(pro.options[i].selected){ // 表示呗选中的 option
        //         // 获取选中的option中value值
        //         var provice_init = pro.options[i].value;
        //         console.log(provice_init);
        //         break;
        //     }
        // }
        // console.log(provice_init);

        var seletOpt = filterOptSelted(pro);
        var provice_init = seletOpt.value;

        // 2：根据当前的省，获取市
        var city_data = area[provice_init]
        console.log(city_data[0]);

        // 3：将获取到市数据渲染到页面上
        // var city_dom = document.querySelector("#city");
        // for(let k in city_data[0]){
        //     var option = document.createElement("option")
        //      option.innerHTML = k;
        //      option.value = k
        //      city_dom.appendChild(option)
        // }
        renderOpt('#city', city_data[0])

        // 2:用户选择的发生变化时候，市也变化
        pro.addEventListener('change', function (e) {
            console.log('change run');
            var opt = filterOptSelted(pro);
            var opt_val = opt.value;
            //  根据当前选中的省更新市数据
            var city_data = area[opt_val];
            //  重新渲染市的 select
            renderOpt('#city',city_data[0])

        })

        // 根据数据；往某个select元素中添加option
        // 参一：id选择器 stirng 
        // 参二：渲染的数据
        // 返回值：无
        function renderOpt(str, data) {
            var selet = document.querySelector(str);
            // 先清空 select; (解决bug：累加option)
            selet.innerHTML = '';
            for (var k in data) {
                var option = document.createElement('option');
                option.innerHTML = k;
                option.value = k;
                selet.appendChild(option);
            }
        }

        // 过滤某个select 选中了哪一个option元素
        // 参一：selet 元素 
        // 返回值:被选中的option
        function filterOptSelted(selet) {
            for (let i = 0; i < selet.options.length; i++) {
                if (selet.options[i].selected) {
                    // 返回 选中的option元素
                    return pro.options[i]
                }
            }
        }
    <!-- 
        直播注意事项：
        1：将代码片段封装为函数，新建文件重新写
     -->

三级联动

    <select name="" id="province"> </select>
    <select name="" id="city"></select>
    <select name="" id="district"></select>
    <script src="./area.js"></script>
        /**
         * renderOpt() 
         * 作用：根据数据，给某个select 渲染option
         * 参一：select元素  类型:elementObjeck
         * 参二：数据 obj
         * 返回值:无
         */
        function renderOpt(select, data) {
            select.innerHTML = ''; // 先清空select
            if (data.constructor === Object) {//判断类型
                for (var k in data) {  // 添加option
                    var option = document.createElement("option"); // 创建一个option
                    option.innerHTML = k; // 给option添加文本内容
                    option.value = k;   // 给optiont添加value值
                    select.appendChild(option) // 将创建option添加到 select上
                }
            } else if (Array.isArray(data)) {//判断类型
                for (var i in data) {
                    // data[i]
                    for (var k in data[i]) {
                        var option = document.createElement("option");
                        option.innerHTML = k; 
                        option.value = k;
                        select.appendChild(option)
                    }
                }
            }

        }

        /**
         * filterOptSelected()
         * 作用：过滤某个select中选中的option
         * 参一：select元素  类型 elementObject
         * 返回值：选中的option元素 类型：elementObject
         */
        function filterOptSelected(select) {
            var opts = select.options;   // 获取select元素中所有的option集合
            for (var i = 0; i < opts.length; i++) { // 遍历option,为了检查每个option
                var isSeleted = opts[i].selected; // 获取option的selted值，true 选中  false 没选中
                if (isSeleted) { // 当前被选中的option
                    return opts[i] // 将选中的option元素；输出到函数外部
                }
            }
        }
        var province_dom = document.querySelector("#province");
        // 第一步骤：初始化
        // 1.1初始化省数据渲染
        renderOpt(province_dom, area);

        // 1.2初始化市
        // 1.21 获取当前选中是哪个省
        var pro_opt = filterOptSelected(province_dom);
        console.log(pro_opt);
        console.log(pro_opt.value);
        // 1.22 根据省获取获取市的数据
        var city_data = area[pro_opt.value][0]
        console.log(city_data);

        // 1.23 根据市数据渲染.渲染市
        var city_dom = document.querySelector("#city")
        renderOpt(city_dom, city_data)

        // 1.3初始化区
        // 1.31 获取选中那个市
        var city_opt = filterOptSelected(city_dom)
        console.log(city_opt);
        console.log(city_opt.value);
        // 1.32 根据市，获取区数据
        var district_data = city_data[city_opt.value]
        console.log(district_data);
        // 1.33 根据区数据渲染区
        var district_dom = document.querySelector("#district")
        // ???
        renderOpt(district_dom, district_data)

        // 第二步：当用户更新，省或市

        // 2.1 监听用户是否更改了省
        province_dom.addEventListener('change',function(){
            console.log('province chang run');
            // 2.11 获取更新后的option
            var pro_opt= filterOptSelected(province_dom)
            // 2.12 根据选择的省更新市数据
            city_data = area[pro_opt.value][0];
            console.log(city_data);
            // 2.13 根据市数据更新市
            renderOpt(city_dom,city_data);
            // 2.14 获取当前更新的市，得到获取区数据的索引、
            var city_opt = filterOptSelected(city_dom);
            console.log(city_opt.value);
            // 2.15 根据市索引获取区数据
            district_data = city_data[city_opt.value]
            console.log(district_data);
            // 2.16 根据区数据，渲染去
            renderOpt(district_dom,district_data)
        })

        // 第三步：用户更新市时候
        // 3.1 监听用户更新市
        city_dom.addEventListener('change',function(){
            // console.log('city change run');
            // 3.11 获取更新的是哪个市
            var city_opt = filterOptSelected(city_dom);
            console.log(city_opt.value);
            // 3.12 根据市，获取区数据
            console.log(city_data);
            var district_data  = city_data[city_opt.value]
            console.log(district_data);
            // 3.13 根据区数据，更新区视图
            renderOpt(district_dom,district_data)
        })