JavaScript高级

2.1 DOM操作

2.1.1 DOM的本质是什么

<!-- DOM树：二叉树 -->
    /*
    <?xml version="1.0" encoding="UTF-8">               // 告诉浏览器以哪一种类型进行解析
    <node>
        <child />
    </node>
     */

    <!DOCTYPE html>                                      // 以html类型进行解析文档内容
    <html>
        <body>

        </body>
    </html>
Copy

2.1.2 DOM操作的常用API有哪些？

节点查找API

document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；
document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持 getElementsByClassName 方法；
document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。
document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。
document.querySelector ：返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。
document.querySelectorAll ：返回一个 NodeList ，IE8+(含）。
document.forms ：获取当前页面所有form，返回一个 HTMLCollection ；

节点创建API

createElement创建元素
createTextNode创建文本节点
cloneNode 克隆一个节点
createDocumentFragment

节点修改API

appendChild
insertBefore
insertAdjacentHTML
Element.insertAdjacentElement()
removeChild
replaceChild

节点关系API

1、父关系API

parentNode ：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment； parentElement ：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element元素，如果不是，则返回null；

2、子关系API

children ：返回一个实时的 HTMLCollection ，子节点都是Element，IE9以下浏览器不支持；

childNodes ：返回一个实时的 NodeList ，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点等；

firstChild ：返回第一个子节点，不存在返回null，与之相对应的还有一个 firstElementChild ；

lastChild ：返回最后一个子节点，不存在返回null，与之相对应的还有一个 lastElementChild ；

3、兄弟关系型API

previousSibling ：节点的前一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。

nextSibling ：节点的后一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。

previousElementSibling ：返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持。

nextElementSibling ：返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持。

元素属性型API

1、setAttribute 给元素设置属性： 2、getAttribute 3、hasAttribute

样式操作API（面试考点）

1、直接修改元素的样式

elem.style.color = 'red';  
elem.style.setProperty('font-size', '16px');  
elem.style.removeProperty('color');
Copy

2、动态添加样式规则

var style = document.createElement('style');  
style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';  
document.head.appendChild(style);
Copy

3、classList获取样式属性

Note

了解dom节点样式(classList)的remove, add, toggle, contains, replace等方法的使用。

4、window.getComputedStyle 通过 element.sytle.xxx 只能获取到内联样式，借助 window.getComputedStyle 可以获取应用到元素上的所有样式，IE8或更低版本不支持此方法。

var style = window.getComputedStyle(element[, pseudoElt]);
Copy

2.1.3 DOM节点的attr和proerty的区别

// proprty------>>>获取nodeName和nodeType（property实际上就是JS对象的一个属性）如：text : 3(#text), p : 1(p)
    console.log(pList[0].nodeName);         // p
    console.log(pList[0].nodeType);         // 1
// attribute------>>> 获取一个HTML标签的属性信息（设置和修改）
    var a = document.getElementsByTagName('a')[0];
    console.log(a.getAttribute('data-origin'));
    console.log(a.getAttribute("href_name"));           // 可以给一个HTML标签设置任意的属性名称，无论这个属性内部是否存在
a.    setAttribute('sex', 'male')
// 区别：
// (JS对象&HTML标签)property实际上是一个普通JS对象本身的基本属性，但是attribute实际上是一个HTML标签上面的属性信息
Copy

Note

区别：(JS对象&HTML标签)property实际上是一个普通JS对象本身的基本属性，但是attribute实际上是一个HTML标签上面的属性信息

2.2 BOM操作

2.2.1 如何检测浏览器的类型？

var ua = navigator.userAgent;
    var isChrome = ua.indexOf('Chrome');
    console.log('is Chrome?', isChrome > 0, navigator.userAgent);
    console.log('电脑屏幕大小：', screen.width, screen.height)
Copy

2.2.2 如何拆解URL的各个部分？

// location
    console.log(location.href);                 // 完整的url地址，http://localhost:8080/JS-Professional/begin/02-%E5%9F%BA%E7%A1%80%E8%BF%9B%E9%98%B6/01-%E4%BB%8E%E5%9F%BA%E7%A1%80%E5%88%B0%E8%BF%9B%E9%98%B6.html?_ijt=i8ctmkc87dvh03tdaf51rn5v1i
    console.log(location.protocol)              // http/https
    console.log(location.host, location.hostname)                  // www.52tech.tech
    console.log(location.pathname);             // host之后的全部内容，JS-Professional/begin/02-%E5%9F%BA%E7%A1%80%E8%BF%9B%E9%98%B6/01-%E4%BB%8E%E5%9F%BA%E7%A1%80%E5%88%B0%E8%BF%9B%E9%98%B6.html
    console.log(location.search);               // search就是？之后的全部内容，?_ijt=i8ctmkc87dvh03tdaf51rn5v1i（包括？）
    console.log(location.hash);                 // #后面的内容（包括#）
Copy

2.3 事件操作

2.3.1 编写一个通用的事件监听函数

function bindEvent(ele, type, selector, fn){
        if (fn == null) {
            fn = selector;
            selector = null;
        }

        // addEventListener 的最后一个参数默认是false, 表示的是事件冒泡，自下向上去捕获事件，true：表示事件捕获，表示事件自外向里的方式
        ele.addEventListener(type, function(e){
            if (selector) {
                // 使用的是代理的方式的话
                if (e.target.matches(selector)){            // 这里需要去判断当前点击的那个对象是不是我点击的那个对象
                    fn.call(e.target, e);
                }
            } else {
                // 不使用代理的话
                fn(e);
            }
        });
    }


    // 这里表示对这个div1 内部的所有的a标签使用事件冒泡
    bindEvent(document.getElementById('div4'), 'click', 'p', function (e) {
        console.log(this.innerHTML + 'hahaah')
    })
版本2：
/**
     * 实现一个通用的事件绑定函数（代码简洁，减少了浏览器的占用）
     * @param element
     * @param type
     * @param selector
     * @param fn
     */
    function bindEvent(element, type, selector, fn) {
        // if (fn === null || fn === undefined)        // 这里可以直接优化为fn == null
        if (fn == null){
            // 只有3个参数的话
            fn = selector;
            selector = null;
        }

        element.addEventListener(type, function (e) {
            var target;
            // 如果selector有的话，说明此事element就是一个代理
            if (selector) {
                target = e.target;
                // 如果当前的target满足这个选择器的话
                // 如果元素被指定的选择器字符串选择，Element.matches()  方法返回true; 否则返回false。
                // document.getElementById('div1').matches('div')    true
                // matches里面的参数实际上是一个HTML标签：a, p, div …………， 内容也是不区分大小写的，有点类似于nodeName 或者nodeType 这样的判断
                if (target.matches(selector)){
                    // 修改this的指向
                    fn.call(target, e);
                }
            }else {
                fn(e);
            }
        });
    }
Copy

2.3.2 描述事件冒泡的流程

Note

"DOM2级事件”规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。

事件冒泡：按照DOM树形结构向上冒泡(p --- >>> div --- >>> body --- >>> document),
事件捕获（document—>—>—>的顺序进行传播的）

2.3.3 对于一个无线下拉图片的页面，如何给每一个图片绑定一个事件

// 代理（div3里面的所有a标签都需要进行事件的监听）
    var div3 = document.getElementById('div3');
    bindEvent(div3, 'click', function (e) {
        e.preventDefault();
        e.stopPropagation()
        // 可以获取真实触发的那个元素
        var target = e.target;
        console.log(target.nodeName, target.nodeType);      // 每一种页面标签实际上都有一个自己专属的nodeName
        // 这里的目的主要是用于过滤，只处理a标签的事件处理
        if ('A' === target.nodeName) {
            //  如果当前点击的a标签就是自己
            alert(target.innerHTML)
        }
    })
Copy

2.4 Ajax操作

2.4.1 手动编写一个ajax，不依赖第三方库

2.4.2 跨域的几种实现方式以及底层的实现原理

服务器端的使用：response.setHeader(Access-Control-Allow-Origin, "http://www.baidu.com, http://www.52tech.tech")允许跨域
使用JSONP

2.4.3 JSONP的实现原理

Note

跨域：浏览器有同源策略，不允许ajax访问其他域接口

跨域条件：协议、域名、端口，有一个不同就是跨域

可以跨域加载资源的3个标签：

<img src="">, <link href="">, <script src="">
Copy

img用途：主要用于打点统计，统计网站可能是其他域
link, script用途：可以使用CDN，可以使用其他域
script用途：可以用于JSONP

2.4.3.1 跨域注意事项:

所有的跨域请求都必须经过信息提供方的允许才可以获取
如果未经允许就可以直接获取，就是浏览器的同源策略出现漏洞

2.4.3.2 浏览器端实现（提前定义一个回调函数）

//封装一个jsonp请求的函数
  function query(opt) {
      let str = ""
      for (let key in opt) {
          str += key + "=" + opt[key] + "&"
      }
      return str
  }
  //设置默认回调函数的名字
  const defaultOptions = {
      callbackName: "callback"
  }
  function jsonp(url, opt, options = defaultOptions) {
      //参数解析  URL为访问的接口 opt为传播的数据  option 为接受参数的回调函数
      return new Promise((resolve, reject) => {
          //判断下这个？是不是存在
          let index = url.indexOf("?");
          url += index != -1 ? query(opt) : "?" + query(opt);
          url = url + `${options.callbackName}=${options.callbackName}`;
          //首先创造一个标签 带有src的
          const scriptDom = document.createElement("script");
          //设置其src属性
          scriptDom.setAttribute("src", url);
          //在window系统上创建一个回调函数用来接受数据
          window[options.callbackName] = (res) => {
              //在接受到了参数动态删除这个script节点和window上面的方法
              delete window[options.callbackName];
              document.body.removeChild(scriptDom)
              //接受成功后调用resolve
              if (res) {
                  resolve(res)
              } else {
                  reject("服务器暂没有获取到数据")
              }
          }
          //动态创建script标记，错误的监听
          scriptDom.addEventListener('error', () => {
              delete window['jsonpCallback'];
              document.body.removeChild(script);
              reject('服务器加载失败！');
          });
          document.body.append(scriptDom)
      })
  }
Copy

2.4.3.3 后端实现

const url = require("url")

router.get("/api", (req, res, next) => {
  //将script标签的src的URL请求转成对象
  const opj = url.parse(req.url, true).query;
  //然后原理就是调用这个回调函数来进行传参
  let {
    callback
  } = opj;
  //如果这个回调函数存在证明是jsonp请求
  if (callback) {
    let resault = JSON.stringify({
      code: 1,
      msg: "express框架传回去的参数"
    });
    res.send(`${callback}(${resault})`)
  }
})
Copy

2.5 本地存储

2.5.1 cookie, sessionStorage, localStorage 的区别

存储量，只有4kb
所有的http请求都会带有cookie，会直接影响获取资源效率
API，document.cookie

localstorage

localstorage.setItem(key, value);localstorage.getItem('key');
存储量5MB
sessionStorage：会话级别

Warning

【坑】IOS safari的隐藏模式下，使用localStorage.getItem('key') 会报错，建议使用try{}catch(e){} 来实现可以防止报错

前端面试(JavaScript高级)

JavaScript高级

2.1 DOM操作

2.1.1 DOM的本质是什么

2.1.2 DOM操作的常用API有哪些？

节点查找API

节点创建API

节点修改API

节点关系API

元素属性型API

样式操作API（面试考点）

2.1.3 DOM节点的attr和proerty的区别

2.2 BOM操作

2.2.1 如何检测浏览器的类型？

2.2.2 如何拆解URL的各个部分？

2.3 事件操作

2.3.1 编写一个通用的事件监听函数

2.3.2 描述事件冒泡的流程

2.3.3 对于一个无线下拉图片的页面，如何给每一个图片绑定一个事件

2.4 Ajax操作

2.4.1 手动编写一个ajax，不依赖第三方库

2.4.2 跨域的几种实现方式以及底层的实现原理

2.4.3 JSONP的实现原理

2.4.3.1 跨域注意事项:

2.4.3.2 浏览器端实现（提前定义一个回调函数）

2.4.3.3 后端实现

2.5 本地存储

2.5.1 cookie, sessionStorage, localStorage 的区别

localstorage

Serverless

热门文章

最新文章

相关电子书

前端面试(JavaScript高级)

JavaScript高级

2.1 DOM操作

2.1.1 DOM的本质是什么

2.1.2 DOM操作的常用API有哪些？

节点查找API

节点创建API

节点修改API

节点关系API

元素属性型API

样式操作API（面试考点）

2.1.3 DOM节点的attr和proerty的区别

2.2 BOM操作

2.2.1 如何检测浏览器的类型？

2.2.2 如何拆解URL的各个部分？

2.3 事件操作

2.3.1 编写一个通用的事件监听函数

2.3.2 描述事件冒泡的流程

2.3.3 对于一个无线下拉图片的页面，如何给每一个图片绑定一个事件

2.4 Ajax操作

2.4.1 手动编写一个ajax，不依赖第三方库

2.4.2 跨域的几种实现方式以及底层的实现原理

2.4.3 JSONP的实现原理

2.4.3.1 跨域注意事项:

2.4.3.2 浏览器端实现（提前定义一个回调函数）

2.4.3.3 后端实现

2.5 本地存储

2.5.1 cookie, sessionStorage, localStorage 的区别

Cookie

localstorage

Serverless

热门文章

最新文章

相关电子书