【web前端】面题整理（2）_html-js-css

概述今天是520，单身狗在这里祝各位520快乐！ DOM节点统计 DOM 的体积过大会影响页面性能，假如你想在用户关闭页面时统计（计算并反馈给服务器）当前页面中元素节点的数量总和、元素节点的最大嵌套深度以及最大子元素个数，请用 JS 配合原生 DOM API 实现该需求（不用考虑陈旧浏览器以及在现代浏览器中的兼容性，可以使用任意浏览器的最新特性；不用考虑 shadow DOM）。比如在如下页面中运行后

今天是520，单身狗在这里祝各位520快乐！

DOM节点统计

DOM 的体积过大会影响页面性能，假如你想在用户关闭页面时统计（计算并反馈给服务器）当前页面中元素节点的数量总和、元素节点的最大嵌套深度以及最大子元素个数，请用 Js 配合原生 DOM API 实现该需求（不用考虑陈旧浏览器以及在现代浏览器中的兼容性，可以使用任意浏览器的最新特性；不用考虑 shadow DOM）。比如在如下页面中运行后

<HTML>  <head></head>  <body>    <div>      <span>f</span>      <span>o</span>      <span>o</span>    </div>  </body></HTML>

会得出这样一个对象：

{  totalElementsCount: 7,maxDOMTreeDepth: 4,maxChildrenCount: 3}

我的答案

const obj={}class Ele{    constructor(ele){        this.ele=ele;        this.funum=1;    }    //取当前节点的元素深度    getEleDepth(){        let fuele=this.ele.parentNode;        if(fuele!==document){            this.funum++;            this.ele=fuele;            return this.getEleDepth();        }else{            return this.funum;        }    }    //去当前节点的子元素个数    getEleSubNum(){        let zIEles=this.ele.childNodes,zinum=0;        for(let i=0;i<zIEles.length;i++){            if(zIEles[i].nodename!==‘#text‘){                zinum++;            }        }        return zinum;    }}const totalElements=document.getElementsByTagname("*")obj.totalElementsCount=totalElements.length;//dom中的所有节点数量let eleDepthArr=[];let eleSubarr=[];for(let i=0;i<totalElements.length;i++){    eleDepthArr.push(new Ele(totalElements[i]).getEleDepth())    eleSubarr.push(new Ele(totalElements[i]).getEleSubNum())}eleDepthArr=eleDepthArr.sort((a,b)=>(b-a))eleSubarr=eleSubarr.sort((a,b)=>(b-a))obj.maxDOMTreeDepth=eleDepthArr[0]//元素节点的最大嵌套深度obj.maxChildrenCount=eleSubarr[0]//最大子元素个数console.log(obj)

按图完成布局和拖动效果

在已提供的HTML片段的基础上继续编写 CSS 和 Js，已完成如下效果图所演示的效果，且要求左侧left部分最小宽度100px，最大宽度300px。提示：可以使用 mousedown,mouseup,mousemove 几个事件来组合处理拖动效果，也欢迎使用其他方案。
已知HTML片段：

效果图：

给点HTML：

<HTML>  <head>    <Title>按图完成布局和拖动效果</Title>  </head>  <body>    <div class="container">     <div class="left">left<div class="drag"></div></div>      <div class="right">right</div>    </div>  </body></HTML>

给定部分CSS：

.container {  wIDth: 100%;  height: 500px;  min-wIDth: 500px;  overflow: scroll;}.left,.right {  border: 1px solID #ccc;  Font-size: 22px;  color: #333;  Font-weight: bold;  text-align: center;  line-height: 500px;}.right {  border-left: 0 none;}

我的改动：

有些未完成。。。暂时想到是这个思路

.container {    wIDth: 100%;    height: 500px;    min-wIDth: 500px;    overflow: scroll;    /*--*/    display: flex;    justify-content: flex-start;}.left,.right {    border: 1px solID #ccc;    Font-size: 22px;    color: #333;    Font-weight: bold;    text-align: center;    line-height: 500px;}.right {    border-left: 0 none;    wIDth: 100%;}/*--*/.left{    max-wIDth: 300px;    min-wIDth: 100px;    position: relative;}.drag{    height: 100%;    wIDth: 10px;    float: right;    margin-right: -5px;}

<div class="container">    <div ID="left" class="left">        left        <div ID="drag" class="drag"></div>    </div>    <div class="right">right</div></div>

const drag=document.getElementByID("drag");const left=document.getElementByID("left");drag.onmousedown=function(e){    // console.log(e.clIEntX)    let mx=e.clIEntX    this.onmousemove=function(){        let cw=left.clIEntWIDth;        console.log(e.clIEntX)    }    this.onmouseup=function(){        console.log(3)        this.onmousemove=null;        this.onmouseup=null;    }}