DOM 的继承关系，图谱

htmlelement->divelement 这个不是很清楚

答案：
image.png

获取元素中 get 系和 query系有什么区别

get class返回数组 多个
query返回第一个

答案：
query不是实时的

1.性能
2.不实时 有增删dom操作时不能实时更新

client 尺寸， offset 尺寸，scroll 尺寸 相关的尺寸分别代表的是什么

client窗口大小
offset xy偏移，滚动条滚动距离
scroll 窗口大小加上xy偏移

事件源 e.target , e.currentTarget 有什么区别，事件流的方式？onclick, addEventListener 有什么区别

e.target是事件源
e.currentTarget不是很清楚，是冒泡的当前元素

正解

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div id="test1">
  10.         <div id="test2">test</div>
  11.     </div>
  12. </body>
  13. <script>
  14.     var test1 = document.getElementById("test1");
  15.     var test2 = document.getElementById("test2");
  17.     test1.onclick = function(e) {
  18.         console.log(e.target);//div test2
  19.         console.log(e.currentTarget);//div test1
  20.         console.log(this);
  21.         console.log(e.target === e.currentTarget);
  22.         console.log(e.target === this);
  23.         console.log(e.currentTarget === this);
  24.         console.log('---------1')
  25.     };
  27.     test2.onclick = function(e) {
  28.         console.log(e.target);
  29.         console.log(e.currentTarget);
  30.         console.log(this);
  31.         console.log(e.target === e.currentTarget);
  32.         console.log(e.target === this);
  33.         console.log(e.currentTarget === this);
  34.         console.log('---------2')
  36.     };
  37. </script>
  38. </html>

currentTarget会返回绑定了事件绑定的元素，与this一样，xx.onclick this 谁调用就指向谁，不一定是事件源
target返回冒泡的点击元素，事件源
image.png

冒泡 事件源向绑定了该事件的父级传递，事件源想父级传递
捕获 父级向事件源传递

onclick只能绑定一个事件，因为是句柄的写法
addEventListener 能绑定多个事件 还能控制冒泡或者捕获

client 尺寸， offset 尺寸，scroll 尺寸

client 尺寸， offset 尺寸，scroll 尺寸 相关的尺寸分别代表的是什么，clientWidth, clientHeight, clientLeft, clientTop, offsetWidth, offsetHeight,…. 等等是什么，

scrollWidth， scrollHeight, scrollLeft, scrollTop, pageXOffset, pageYOffset, scrollX, scrollY

综合资料

clientWidth = padding-left + width + padding-right
clientHeight = padding-top + height + padding-bottom

offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width;
offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width

参考答案

offsetWidth offsetHeight

与padding border有关 ，与margin无关，因为margin不算元素的大小

offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width; （width+padding宽度+border宽度）
offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Title</title>
  6.         <style>
  7.             #box {
  8.                 width: 200px;
  9.                 height: 150px;
  10.                 background-color: red;
  11.                 padding: 10px;
  12.                 border: 5px solid #ddd;
  13.                 margin: 10px;
  14.             }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <div id="box" style="width: 100px;height: 100px;"></div>
  19.         <!-- <div id="box" ></div> -->
  21.         <script>
  22.             var box = document.getElementById('box');
  23.             //offsetHeight = 内容高 + 上下内边距 + 边框
  24.             console.log(box.offsetWidth,box.offsetHeight);
  25.             console.log(box.style.width, box.style.height);
  26.             // 可以设置大小
  27.             // box.style.width = 500 + 'px';
  28.             // 不可以设置大小
  29.             box.offsetWidth = 100 + 'px';
  30.         </script>
  32.     </body>
  33. </html>

image.png

offsetLeft offsetTop

是顶部到算上border的顶点为标椎的距离，
border、padding、width都是元素的一部分，当边框border加粗时，元素右下移动，但边界不变，边界是以算上border的，border的外层
如有父级是定位元素，就是相当于父级的距离

offsetTop

offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离

offsetLeft

offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  8.                 padding: 0;
  9.                 margin: 0;
  10.             }
  11.             #father{
  12.                 width: 400px;
  13.                 height: 400px;
  14.                 background-color: red;
  15.                 /* position: relative; */
  16.                 margin: 40px;
  17.             }
  18.             #son {
  19.                 width: 200px;
  20.                 height: 100px;
  21.                 background-color: green;
  22.                 padding: 10px;
  23.                 /* border: 5px solid #DA70D6; */
  25.         border: 5px solid #DA70D6;
  27.                 margin-left: 20px;
  28.             }
  29.         </style>
  30.     </head>
  31.     <body>
  32.         <div id="father">
  33.             <div id="son"></div>
  34.         </div>
  35.         <script type="text/javascript">
  36.             var box = document.getElementById('son');
  37.             //如果有父级定位元素
  38.             console.log(box.offsetLeft);//20
  39.             console.log(box.offsetTop); //0
  40.             //如果无父级定位元素
  41.             console.log(box.offsetLeft);//60
  42.             console.log(box.offsetTop); //40
  43.         </script>
  44.     </body>
  45. </html>

与父物体的padding有关，与子物体的margin有关，是元素边界到服务体padding顶端，就是border末端的距离，就是padding与border的交界处的距离
元素边界算上border、pading的大小，是不可分割的一部分

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  8.                 padding: 0;
  9.                 margin: 0;
  10.             }
  11.             #father{
  12.                 width: 400px;
  13.                 height: 400px;
  14.                 background-color: red;
  15.                 position: relative;
  16.                 margin: 40px;
  17.                 border: 30px solid blue;
  18.                 padding: 10px;
  19.             }
  20.             #son {
  21.                 width: 200px;
  22.                 height: 100px;
  23.                 background-color: green;
  24.                 padding: 10px;
  25.                 /* border: 5px solid #DA70D6; */
  27.                 border: 20px solid #DA70D6;
  29.                 margin-left: 20px;
  30.                 /* margin: 9px; */
  31.             }
  32.         </style>
  33.     </head>
  34.     <body>
  35.         <div id="father">
  36.             <div id="son"></div>
  37.         </div>
  38.         <script type="text/javascript">
  39.             var box = document.getElementById('son');
  40.             //如果有父级定位元素
  41.             console.log(box.offsetLeft);//30
  42.             console.log(box.offsetTop); //10
  43.             //如果无父级定位元素
  44.             console.log(box.offsetLeft);//100
  45.             console.log(box.offsetTop); //80
  46.         </script>
  47.     </body>
  48. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Title</title>
  6.         <!-- <style>
  7.             #box {
  8.                 width: 200px;
  9.                 height: 150px;
  10.                 background-color: red;
  11.                 padding: 10px;
  12.                 border: 5px solid #ddd;
  13.                 margin: 10px;
  14.             }
  15.         </style> -->
  16.     </head>
  17.     <body>
  18.         <div id="box" style="width: 100px;height: 100px; padding: 10px; 
  19.         background-color: red; padding: 10px; border: 30px solid #ddd; margin: 10px;" ></div>
  20.         <!-- <div id="box" ></div> -->
  22.         <script>
  23.             var box = document.getElementById('box');
  24.             //offsetHeight = 内容高 + 上下内边距 + 边框
  25.             console.log(box.offsetWidth,box.offsetHeight);//180 算上border padding
  26.             console.log(box.style.width, box.style.height);//100px
  27.             console.log(box.clientWidth,box.clientHeight);//120 算上padidng 不算border
  28.             // 可以设置大小
  29.             // box.style.width = 500 + 'px';
  30.             // 不可以设置大小
  31.             box.offsetWidth = 100 + 'px';
  32.         </script>
  34.     </body>
  35. </html>

得到偏出量

  1. <div style="padding: 20px;border:1px solid black;position:absolute;">
  2.     <div id="test" style="width:100px; height:100px; margin:10px;background-color: red;"></div>
  3. </div>
  4. <script type="text/javascript">
  5.     var test = document.getElementById('test');
  6.     console.log(getElementLeft(test)); //39px
  7.     console.log(getElementTop(test)); // 39px
  9.     function getElementLeft(ele){
  10.         var actualLeft  = ele.offsetLeft;
  11.         var parent = ele.offsetParent;
  12.         while (parent != null){
  13.             actualLeft = actualLeft + parent.offsetLeft + parent.clientLeft;
  14.             parent = parent.offsetParent;
  15.         }
  16.         return actualLeft + 'px';
  17.     }
  18.     function getElementTop(ele){
  19.         var actualTop  = ele.offsetTop;
  20.         var parent = ele.offsetParent;
  21.         while (parent != null){
  22.             actualTop = actualTop + parent.offsetTop + parent.clientTop;
  23.             parent = parent.offsetParent;
  24.         }
  25.         return actualTop + 'px';
  26.     }
  27. </script>

client

clientWidth = padding-left + width + padding-right；（width+padding宽度）
clientHeight = padding-top + height + padding-bottom；
没有border的长度，不算上border

clientLeft属性返回左边框的宽度
clientTop属性返回上边框的宽度 

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <div id="box" style="width: 200px;height: 200px;
  13.     background-color: red; padding: 20px;border: 1px solid orange;">
  14.     </div>
  15.     <script type="text/javascript">
  16.         var box = document.getElementById('box');
  17.         console.log(box.clientWidth);// 200+ 20+ 20 = 240 不算边框的大小
  18.         console.log(box.clientHeight); //200 + 20 + 20 = 240
  19.         console.log(box.clientLeft);//1 边框大小 
  20.         console.log(box.clientTop);//1
  21.     </script>
  22. </body>
  24. </html>

scroll

滚动宽高

scrollHeight
scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分
scrollWidth
scrollWidth表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分

滚动长度

scrollTop
scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，表示元素上方不可见内容的像素高度
滚动条竖直方向的偏移量
scrollLeft
scrollLeft属性表示被隐藏在内容区域左侧的像素数。元素未滚动时，scrollLeft的值为0，如果元素被水平滚动了，scrollLeft的值大于0，且表示元素左侧不可见内容的像素宽度
滚动条水平方向的偏移量

  1.   <div style="height: 1000px;"></div>
  2.     <div id="test" style="width: 100px;height: 100px;padding: 10px;
  3.     margin: 10px;border: 1px solid black;"></div>
  4.     <script>
  5.         var test = document.getElementById('test');
  6.         //120 120
  7.         console.log(test.scrollHeight,test.scrollWidth);
  8.         //120 120
  9.         console.log(test.clientHeight,test.clientWidth);
  10.         // console.log(document.body.clientHeight);//1132 整个长度
  11.         // console.log(document.body.scrollHeight);//1132 
  12.     </script>
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>滚动条</title>
  7.     <style>
  8.         div {
  9.             width: 200px;
  10.             height: 100px;
  11.         }
  12.     </style>
  13. </head>
  15. <body>
  16.     <div class="s" style="overflow: scroll;">
  17.         盼望着，盼望着，东风来了，春天的脚步近了。
  18.         一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
  19.         小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
  20.         桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。
  21.         “吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响。
  22.         雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。乡下去，小路上，石桥边，有撑起伞慢慢走着的人；还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的，在雨里静默着。
  23.         天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去。“一年之计在于春”，刚起头儿，有的是工夫，有的是希望。
  24.         春天像刚落地的娃娃，从头到脚都是新的，他生长着。
  25.         春天像小姑娘，花枝招展的，笑着，走着。
  26.         春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去.
  27.     </div>
  28. </body>
  29.  <script>
  30.      var text =document.getElementsByClassName('s')[0];
  31.      console.log(text.clientHeight,text.clientWidth)//83 183
  32.      console.log(text.scrollHeight,text.scrollWidth)//1426 183 一共能滚动的距离
  33.      console.log(text.scrollTop,text.scrollLeft)//0 0 如果滚动了 向下滚动就是滚动条的偏移量
  34.  </script>
  35. </body>
  37. </html>

pageXOffset

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

window.scrollX 等价于 window.pageXOffset，window.scrollY 等价于 window.pageYOffset。 如需保证浏览器兼容性，应该尽量使用 window.pageXOffset 与 window.pageYOffset。

滚动条滚动的距离