原生js大总结七

061、如何获取父级节点、上一个子级节点、下一个子级节点

 

 nextElementSibling  后一个兄弟元素  （如果没有是null）

 

 previousElementSibling  前一个兄弟元素  （如果没有就是null）

 

 parentNode 获取当前节点的父节点

 

062、元素节点的创建、添加、删除、替换、克隆

 

1、创建：document.createElement('元素名');

  

2、添加：appendChild()====>插入到最后       insertBefore()====>插入到最前面    

  用法：

          function append(obj,newEle){

              var achildren = obj.children;

              if(achildren.length>=1){

                return  obj.insertBefore(newEle,achildren[0])

               } else{

                return   obj.appendChild(newEle)

               }

          }

3、删除：box.removeChild(node) 从元素中移除某个子元素

  用法：  先找到父级节点然后在去删除子级节点

 

4、替换：box.replaceChild(子元素，父元素)

 

  用法：

      父元素.replaceChild(被替换成的元素,替换元素)

 

5、克隆：clone()

     元素.clone();

     如果里面传true的话会吧整个标签的所有节点都克隆，如果没有加true,只会克隆当前元素

 

 

063、浅谈关于文档碎片的理解

 

1、js操作dom时发生了什么？

     

   每次对dom的操作都会触发"重排"，这严重影响到能耗，一般通常采取的做法是尽可能的减少dom操作来减少"重排"

 

2、什么是文档碎片？

  

    document.createDocumentFragment()

    一个容器，用于暂时存放创建的dom元素

    （其实这个跟咱们上课说那个先让到一个元素中，然后最后appendchild一样）

     

3、文档碎片有什么用？

  

   将需要添加的大量元素  先添加到文档碎片  中，再将文档碎片添加到需要插入的位置，大大减少dom操作，提高性能

 

064什么是回流和重绘

 

当渲染树中的一部分或者全部因为元素的尺寸、布局、隐藏等改变而需要重新构建的时候，这时候就会发生回流。

 

每个页面都至少发生一次回流，也就是页面第一次加载的时候。

 

在回流的时候，浏览器会使渲染树中受到影响的元素部分失效，并重新绘制这个部分的渲染树，完成回流以后，浏览器会重新绘制受到影响的部分元素到屏幕中，这个过程就是重绘

 

 

什么时候会发生回流？

     1、添加或者删除可见的DOM元素的时候

 

     2、元素的位置发生改变

 

     3、元素尺寸改变

 

     4、内容改变

 

     5、页面第一次渲染的时候

 

065、关于offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY的区别

 

 

offsetX、offsetY:

     鼠标相对于事件源元素（srcElement）的X,Y坐标

 

clientX、clientY:

     鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。

 

pageX、pagey:

     类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性

 

screenX、screenY:

     鼠标相对于用户显示器屏幕左上角的X,Y坐标。

 

 

 

066、如何在当前视窗的可见范围看见当前元素

 

scrollIntoView()

 

067、关于onkeydown和onkeypress的区别以及如何获取按下键盘的键盘码？

 

onkeydown:

            1、所有的英文字符都是大写

            2、功能键也会被识别

onkeypress

            1、所有英文字符大小写都支持

            2、所有功能键都不会被识别

            3、组合键ctrl+回车的code值是10

 

 

e.keyCode || e.which

 

068、什么是事件流？ 什么是事件冒泡？ 什么是事件捕获？

 

什么是事件流？

 

     当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播的过程叫做DOM事件流

 

元素触发事件时，事件的传播过程称为事件流，过程分为捕获和冒泡两种

 

冒泡事件：微软提出的   事件由子元素传递到父元素的过程，叫做冒泡

 

捕获事件：网景提出的   事件由父元素到子元素传递的过程，叫做事件捕获

 

069、什么是浏览器默认行为？如何组织浏览器默认行为？

 

例如：右键菜单  点击超链接跳转  图片拖拽

 

组织默认行为

 

     return false  

    

     preventDefault是一个方法：e.preventDefault();

    

     returnValue的值是一个常量：e.returnValue = false;

 

070、如何组织右键菜单？

 

document.oncontextmenu = function(e){

 

     e.preventDefault()

    

}