今天是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）