JS Web API(W3C标准)

主要涉及DOM   BOM   事件绑定   Ajax  存储

1、dom是哪种数据结构

树形结构

2、dom操作的API

获取DOM节点，以及节点的propery和attribute、获取父节点，获取子节点、新增节点、删除节点

3、attr和property的区别

property是DOM中的属性，修改的是js中标准的属性。例如：对象中的name,age,addresss。attribute是HTML标签上的特性，修改的是Html标签的特性。例如：width,height,class,attr-name

4、dom（文档对象模型）的本质

DOM可以理解为浏览器把拿到的html代码，结构化一个浏览器能识别并且js可操作的一个模型。

5、一次性插入多个dom节点，考虑性能

      const list = document.getElementById("list");
      // 创建文件片段,此时还没有插入到DOM结构中
      const frag = document.createElementFragment();
      for (let i = 0; i < 10; i++) {
        const li = document.createElement("li");
        li.innerHTML = `this is ${i}`;
        // 先插入文档片段中
        frag.appendChild(li);
      }
      list.appendChild(frag);

6、如何识别浏览器的类型

 navigator.userAgent

7、编写一个一个通用的事件监听函数和阻止冒泡，阻止默认行为

//绑定事件，可重复绑定('事件名称'必须加引号)
function bind(obj, evname, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evname, fn, false);
        if (evname == 'mousewheel') {
            obj.addEventListener('DOMMouseScroll', fn, false);
        }
    } else {
        obj.attachEvent('on' + evname, function () {
            fn.call(obj);
        });
    }
};

//取消绑定，可重复取消('事件名称'必须加引号)
function unbind(obj, evname, fn) {
    if (obj.removeEventListener) {
        obj.removeEventListener(evname, fn, false);
        if (evname == 'mousewheel') {
            obj.removeEventListener('DOMMouseScroll', fn, false);
        }
    } else {
        obj.detachEvent('on' + evname, fn);
    }
};
//绑定的方式阻止事件冒泡
function cBub(ev) {
    var ev = ev || window.event;
    if (ev.stopPropagation) ev.stopPropagation(); //标准
    ev.cancelBubble = true; //ie
};

//绑定的方式阻止默认事件
function pDef(ev) {
    var ev = ev || window.event;
    if (ev.preventDefault) ev.preventDefault(); //标准
    ev.returnValue = false; //ie
};

9、无限下拉的图片列表，如何监听每一个图片的点击

可以利用事件代理，事件冒泡来处理

10、手写ajax

      // readyState状态说明 
      // 0还没调用send    1正在发送请求   
      // 2已经接受全部相应内容    3解析相应内容   
      // 4解析完成，可以客户端调用
      const xhr = new XMLHttpRequest();
      xhr.open("POST", "/api", true); // true 表示异步
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            alert(xhr.responseText);
          } else {
            console.log("失败");
          }
        }
      };
      const sendData = {
        a: 1,
      };
      xhr.send(JSON.stringify(sendData)); // get不用发送数据直接null，如果有数据直接丢进去