今天是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;
}
} 博客园作者：herry菌，原文链接：
https://www.cnblogs.com/wuhairui/p/10891957.html
朋友，看到这里，关注作者的公众号吧，不漏掉更新哦
【web前端】面题整理（2）