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

DOM节点统计

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

  1. <html>
  2.   <head></head>
  3.   <body>
  4.     <div>
  5.       <span>f</span>
  6.       <span>o</span>
  7.       <span>o</span>
  8.     </div>
  9.   </body>
  10. </html>

会得出这样一个对象：

  1. {
  2.   totalElementsCount: 7,
  3.   maxDOMTreeDepth: 4,
  4.   maxChildrenCount: 3
  5. }

我的答案

  1. const obj={}
  2. class Ele{
  3.     constructor(ele){
  4.         this.ele=ele;
  5.         this.funum=1;
  6.     }
  7.     //取当前节点的元素深度
  8.     getEleDepth(){
  9.         let fuele=this.ele.parentNode;
  10.         if(fuele!==document){
  11.             this.funum++;
  12.             this.ele=fuele;
  13.             return this.getEleDepth();
  14.         }else{
  15.             return this.funum;
  16.         }
  17.     }
  18.     //去当前节点的子元素个数
  19.     getEleSubNum(){
  20.         let zieles=this.ele.childNodes,zinum=0;
  21.         for(let i=0;i<zieles.length;i++){
  22.             if(zieles[i].nodeName!=='#text'){
  23.                 zinum++;
  24.             }
  25.         }
  26.         return zinum;
  27.     }
  28. }
  29. const totalElements=document.getElementsByTagName("*")
  30. obj.totalElementsCount=totalElements.length;//dom中的所有节点数量
  31.  
  32. let eleDepthArr=[];
  33. let eleSubArr=[];
  34. for(let i=0;i<totalElements.length;i++){
  35.     eleDepthArr.push(new Ele(totalElements[i]).getEleDepth())
  36.     eleSubArr.push(new Ele(totalElements[i]).getEleSubNum())
  37. }
  38. eleDepthArr=eleDepthArr.sort((a,b)=>(b-a))
  39. eleSubArr=eleSubArr.sort((a,b)=>(b-a))
  40. obj.maxDOMTreeDepth=eleDepthArr[0]//元素节点的最大嵌套深度
  41. obj.maxChildrenCount=eleSubArr[0]//最大子元素个数
  42.  
  43. console.log(obj)

按图完成布局和拖动效果

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

效果图：

给点html：

  1. <html>
  2.   <head>
  3.     <title>按图完成布局和拖动效果</title>
  4.   </head>
  5.   <body>
  6.     <div class="container">
  7.      <div class="left">left<div class="drag"></div></div>
  8.       <div class="right">right</div>
  9.     </div>
  10.   </body>
  11. </html>

给定部分css：

  1. .container {
  2.   width: 100%;
  3.   height: 500px;
  4.   min-width: 500px;
  5.   overflow: scroll;
  6. }
  7. .left,
  8. .right {
  9.   border: 1px solid #ccc;
  10.   font-size: 22px;
  11.   color: #333;
  12.   font-weight: bold;
  13.   text-align: center;
  14.   line-height: 500px;
  15. }
  16. .right {
  17.   border-left: 0 none;
  18. }

我的改动：

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

  1. .container {
  2.     width: 100%;
  3.     height: 500px;
  4.     min-width: 500px;
  5.     overflow: scroll;
  6.     /*--*/
  7.     display: flex;
  8.     justify-content: flex-start;
  9.  
  10. }
  11. .left,.right {
  12.     border: 1px solid #ccc;
  13.     font-size: 22px;
  14.     color: #333;
  15.     font-weight: bold;
  16.     text-align: center;
  17.     line-height: 500px;
  18. }
  19. .right {
  20.     border-left: 0 none;
  21.  
  22.     width: 100%;
  23. }
  24. /*--*/
  25. .left{
  26.     max-width: 300px;
  27.     min-width: 100px;
  28.     position: relative;
  29. }
  30. .drag{
  31.     height: 100%;
  32.     width: 10px;
  33.     float: right;
  34.     margin-right: -5px;
  35. }
  1. <div class="container">
  2.     <div id="left" class="left">
  3.         left
  4.         <div id="drag" class="drag"></div>
  5.     </div>
  6.     <div class="right">right</div>
  7. </div>
  1. const drag=document.getElementById("drag");
  2. const left=document.getElementById("left");
  3. drag.onmousedown=function(e){
  4.     // console.log(e.clientX)
  5.     let mx=e.clientX
  6.     this.onmousemove=function(){
  7.         let cw=left.clientWidth;
  8.         console.log(e.clientX)
  9.     }
  10.     this.onmouseup=function(){
  11.         console.log(3)
  12.         this.onmousemove=null;
  13.         this.onmouseup=null;
  14.     }
  15. }

【web前端】面题整理（2）的更多相关文章

  1. Web前端错题模糊题记录

    title: Web前端错题模糊题记录 toc: true date: 2018-09-20 10:04:36 categories: Web tags: HTML CSS JavaScript HT ...

  2. web前端面试知识点整理

    一.HTML5新特性 本地存储 webStorage websocket webworkers新增地理位置等API对css3的支持canvas多媒体标签新增表单元素类型结构标签:header nav ...

  3. web前端常用meta整理

    标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务. 页面关键词 <meta ...

  4. web前端开发资源整理

    webpack中文文档 http://webpackdoc.com/index.html 饿了么UI http://mint-ui.github.io/#!/zh-cn http://element. ...

  5. WEB 前端开发插件整理

    下拉框插件 1.select http://select2.github.io/ 2.双 select http://loudev.com 3.selectbox http://aui.github. ...

  6. web前端的问题整理

    css实现三列布局?如果中间又是自适应布局怎么做?

  7. Web 前端开发学习之路（入门篇）

    字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.＝＝ ...

  8. 【编码题篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    编写一个方法 求一个字符串的字节长度假设:一个英文字符占用一个字节,一个中文字符占用两个字节 function GetBytes(str){ var len = str.length; var byt ...

  9. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

  10. 1+X Web前端开发（初级）理论考试样题（附答案）

    传送门 教育部:职业教育将启动"1+X"证书制度改革 职业教育改革1+X证书制度试点启动 1+X成绩/证书查询入口 一.单选题(每题 2 分,共 60 分) 1.在 HTML 中, ...

随机推荐

  1. Codeforces 919 行+列前缀和 树上记忆化搜索(树形DP)

    A B C #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) ...

  2. elk搭建的详细步骤以及说明

    一:准备工作 1.准备一台虚拟机 192.168.175.222      elk-node2 2.关闭防火墙以及selinux 命令:systemctl stop firewalld       # ...

  3. C#基础知识之图解TCP IP》读书笔记

    一.网络基础知识 1. 计算机使用模式的演变 2.协议 协议就是计算机与计算机之间通过网络实现通信事先达成的一种“约定”.这种“约定”使那些由不同厂商的设备.不同的CPU以及不同的操作系统组成的计算机 ...

  4. Ubuntu 16.04 orb-slam2配置

    说明:Ubuntu 16.04以及必要的基础软件安装完成之后进行: 1.OpenNI2安装(可选) 安装依赖项: sudo apt--dev freeglut3-dev doxygen graphvi ...

  5. angularjs 代码结构两种写法

    1.当路由中不写controller的时候,controller写在对应的html表单中 2.若要写在路由中,如下 3.转到相应的路由(页面) 1.采用location服务 2.采用 transiti ...

  6. DevExpress WPF v19.1新版亮点：PDF Viewer等控件新功能

    行业领先的.NET界面控件DevExpress 日前正式发布v19.1版本,本站将以连载的形式介绍各版本新增内容.在本系列文章中将为大家介绍DevExpress WPF v19.1中新增的一些控件及部 ...

  7. webpack 热更新

    1.安装webpack npm install webpack -g  //全局安装 npm install webpack --save-dev  //开发环境 2.使用webpack 创建一个we ...

  8. Python之网络编程之并发编程的IO模型，

    了解新知识之前需要知道的一些知识 同步(synchronous):一个进程在执行某个任务时,另外一个进程必须等待其执行完毕,才能继续执行 #所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调 ...

  9. vue项目刷新页面，使数据不丢失（sessionStorage、localStorage、cookie）

    vue项目刷新页面时,存储在vuex中的数据会丢失,把他们存到stroage中可以保证不丢失.

  10. 【NOIP2016提高A组模拟8.19】(雅礼联考day2)公约数

    题目 给定一个正整数,在[1,n]的范围内,求出有多少个无序数对(a,b)满足gcd(a,b)=a xor b. 分析 显然a=b是一定不满足, 我们设\(a>b\), 易得gcd(a,b)&l ...