JS-WEB-API 整理

Posted 2020-11-04 言叶以上のBLOG

JS-WEB-API

常说的JS（浏览器执行的JS）包含两部分：

• JS基础知识：ECMA 262标准
• JS-WEB-API：W3C标准

W3C标准中关于JS的规定有：

• DOM操作
• BOM操作
• 事件绑定
• Ajax请求（包括HTTP协议）
• 存储

例如：页面弹窗是 window.alert(123)，浏览器需要做：

1. 定义一个 window 全局变量，对象类型
2. 给它定义一个 alert 属性，属性值是一个函数

获取元素 document.geiElementById(id)，浏览器需要：

1. 定义一个 document 全局变量，对象类型
2. 给它定义一个 geiElementById 属性，属性值是一个函数

Document Object Model (DOM)

• DOM是哪种基本的数据解构？ 树形结构的文档对象模型
• DOM操作常用API有哪些？
• DOM 节点的attr 和 propery 有何区别？

 

DOM节点操作

1、获取

var a = document.getElementById("div1");
var b = document.getElementsByTagName(‘div‘);
var c = document.getElementsByClassName(‘.container‘);
var d = document.querySelectorAll(‘p‘);

 

2、property

修改的是JS对象的标准属性

3、attribute

修改获取的是html文档中标签的属性

 

DOM结构操作

新增节点，添加节点

var div1 = document.getElementById(‘div1‘);
//添加新节点
var p1 = document.createElement("p");
p1.innerHTML = ‘this is p1‘;
div1.appendChild(p1); //添加创建的新元素
//移动已有节点
var p2 = document.getElementById("p2");
div1.appendChild(p2);

 

获取父元素与子元素、移除节点

var div1 = document.getElementById("div1");

var parent = div1.parentElement;
var child = div1.childNodes;
//移除节点
div1.removeChild(child[0]);

 

 

BOM操作（Browser Object Model)

• 检测浏览器类型
• 拆解 url 各部分

知识点

• navigator & screen

• //检测浏览器类型
  var ua = navigator.userAgent;
  var isChrome = ua.indexOf(‘Chrome‘);
  console.log(isChrome);
  
  //screen  获取屏幕大小
  console.log(screen.width);
  console.log(screen.height);

   loaction & history

• //拆解URL各部分
  //loaction
  console.log(location.href);        //当前域名
  console.log(location.host);        //当前域名
  console.log(location.protocol);    //协议 http:
  console.log(location.pathname); //当前分目录名
  console.log(location.search);    //    查询部分：‘？’之后部分
  console.log(location.hash);    //‘#’ 后面的字符
  
  //history
  history.back();
  history.forward();

   

 

事件

• 编写一个通用的事件监听函数
• 描述事件冒泡流程
• 对于一个无限下拉加载图片的页面，如何给每个图片绑定事件

 

通用事件绑定

var btn = document.getElementById(‘btn1‘);
btn.addEventListener(‘click‘,function(event){
    console.log(‘clicked‘);
});

function bindEvent(elem,type,fn){
    elem.addEventListener(type,fn);
}

var a = document.getElementById(‘link1‘);
bindEvent(a,‘click‘,function(e){
    e.preventDefault();
    alert(‘clicked‘);
})

 

IE低版本使用 attachEvent 绑定事件，和 w3c 标准不一样

事件冒泡

按照DOM树形结构，由子级到祖级的顺序传播

案例：点击p1弹出激活，点击其他的弹出取消

<div id="div1">
    <p id="p1">激活</p>
    <p id="p2">取消</p>
    <p id="p3">取消</p>
    <p id="p4">取消</p>
</div>
<div id="div2">
    <p id="p5">取消</p>
    <p id="p6">取消</p>
</div>

<script type="text/javascript">
    var p1 = document.getElementById(‘p1‘);
    var body = document.body;
    function bindEvent(elem,type,fn){
        elem.addEventListener(type,fn);
    }

    bindEvent(p1,‘click‘,function(e){
        e.stopPropagation();
        alert(‘激活‘);
    })
    bindEvent(body,‘click‘,function(){
        alert(‘取消‘);
    })

 

 

事件代理

事件代理就是在祖级DOM元素绑定一个事件，当触发子孙级DOM元素的事件时，利用事件流的原理来触发绑定在祖级DOM的事件。

<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <!-- 会随时新增更多的 a 标签 -->
</div>

<script type="text/javascript">
    var div1 = document.getElementById(‘div1‘);
    div1.addEventListener(‘click‘,function(e){
        //target属性返回触发该事件的节点
        var target = e.target;
        //nodeName返回的标签名都是大写
        if(target.nodeName == ‘A‘){
            alert(target.innerHTML);
        }
    })
</script>

 

 

完善通用绑定事件函数

function bindEvent(elem,type,selector,fn){
    if(fn == null){
        fn = selector;
        selector = null;
    }
    elem.addEventListener(type,function(e){
        var target;
　　　　//使用代理
        if (selector){
            target = e.target;
　　　　　　//如果target是指定的选择器
            if(target.matches(selector)){
　　　　　　　　//让target使用fn的方法，修改this的指向
                fn.call(target,e);
            }
　　　　//不使用代理
        }else{
            fn(e);
        }
    })
}

//使用代理
var div1 = document.getElementById(‘div1‘);
bindEvent(div1,‘click‘,‘a‘,function(e){
    console.log(this.innerHTML);
})

//不使用代理
var a = document.getElementById(‘a‘);
bindEvent(div1,‘click‘,function(e){
    console.log(a.innerHTML);
})

 

 

代理的好处

• 代码简洁
• 减少浏览器内存占用（因为绑一次事件浏览器会计一次）