今天是 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;
- }
- }
来源: https://www.cnblogs.com/wuhairui/p/10891957.html