原生js大总结六

051、如何打印当前浏览器的版本等信息

 

navigator.userAgent

 

返回包含浏览器版本等信息的字符串 ，常用于判断浏览器版本及使用设备（PC或者移动端

 

052 、在浏览器地址栏输入www.baidu.com后按下回车键会发生什么

 

1.域名解析

      把域名解析ip地址   DNS域名解析系统

 

    2.把ip发送到网络供应商  去找那个对应的主机服务器

 

    3.TCP的三次握手 建立连接

 

    4.开始发送请求 取回入口文件index.html

 

    5.开始解析入口文件，并且取回需要的资源sources

 

    6.进行

 

053、window.onload与window.onscroll的区别

 

window.onload:当页面加载完成的时候

 

window.onscroll:当页面滚动的时候

 

054、请简述下关于DOM的增、删、查

 

增---------createElement

var oDiv = document.createElement('div');

document.body.appendChild(oDiv);//只有追加后，页面上才会出现

 

2、删---------removeChild

语法:fatherObj.removeChild(childrenObj)

 

参数解释：

a、fatherObj:要删除子元素的元素对象

b、childrenObj:要被删除的子元素对象

 

3、查---------六种

document.getElementById('');常用

 

document.getElementsByClassName('');(ie9+)常用

 

document.getElementsByTagName('');常用

 

document.getElementsByName('');不常用

 

document.querySelector(选择器)(IE8+)(IE8+)

     根据选择器返回匹配到的第一个元素

 

document.querySelectorAll(选择器);(IE8+)常用

     根据选择器返回匹配到的所有的元素

 

055、请简述下关于Dom节点的分类

 

childNodes：获取所有节点 包括文本节点

 

节点分为3种类型：

 

1、元素节点 <span></span>

 

2、文本节点 <span>xxx</span>

 

3、属性节点 <span id ='xxx'></span>

 

可以通过nodeType这个属性查看节点的类型

nodeType == 1 元素

 

nodeType == 2 属性

 

nodeType == 3 文本节点

 

056、获取非行间样式

 

function getStyle(obj,attr){

     if(obj.currentStyle){

          return obj.currentStyle[attr];

     }else{

         return getComputedStyle(obj,false)[attr]; 

     }

}

 

057、如何获取、设置、删除自定义属性

 

 

 元素.getAttribute(属性名);

 

 元素.setAttribute(属性名,属性值);

 

元素.removeAttribute(属性名);

 

058、innerHTML、innerText和outerHTML、outerText的区别(了解一下 背会就行不需要抄写)

 

- innerHTML 设置或获取位于对象起始和结束标签内的 HTML

 

- outerHTML 设置或获取对象及其内容的 HTML 形式

 

- innerText 设置或获取位于对象起始和结束标签内的文本

 

- outerText 设置(包括标签)或获取(不包括标签)对象的文本

 

innerText和outerText在获取时是相同效果，但在设置时，innerText仅设置标签内的文本，而outerText设置包括标签在内的文本。

 

不同之处:

   简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：

　　1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。

　　2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。

   3）、outhtml innerText(非W3C)

 

059、如何进行DOM节点筛选

 

1、可以通过nodeType

1 代表元素节点   2 代表属性节点 3 代表文本节点

 

function getNode(ele){

     var aNode = ele.childNodes;

     var newArr = [];

     for(var i=0;i<aNode.length;i++){

          if(aNode[i].nodeType == 1){

              newArr.push(aNode[i]) 

          }

     }

     return newArr;

}

 

 

060、 childNodes与children、attributes 的区别

 

如果想获取到子元素的element节点，最好使用children方法，childNodes方法以及firstChild方法在现代浏览器中使用，都会把元素标签中的空白节点检测出来，一般我们使用这两个方法都是为了获取到元素的元素节点，空白节点会给我们造成很多不必要的bug,而children方法则是只检测element元素节点

 

attributes：获取当前元素节点的所有属性节点集合