js API

阅读量：5142 次

发布时间：2019-06-13

本文共 4705 字，大约阅读时间需要 15 分钟。

从基础知识JS-web-API

js基础知识：ECMA 262标准

js-web-API: w3c标准

W3c标准中关于js的规定有

DOM操作、BOM操作、事件绑定、ajax请求（包括http协议）、存储

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

1、js基础知识（ECMA262标准）

2、JS-Web-API（w3c标准）

一、DOM操作

知识点：DOM本质、DOM节点操作、DOM结构操作

1、DOM本质树

DOM就是Document+Object+Model（文档对象模型）。

2、DOM节点操作

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

（1）、获取DOM节点

var div1 = document.getElementById('div1');//元素var divList = document.getElementsByTagName('div');//集合console.log(divList.length);console.log(divList[0]);var containerList = document.getElementsByClassName('.container');var pList = document.querySelectorAll('p');//集合

(2)、property 属性

var pList = document.querySelectorAll('p');var p = pList[0];console.log(p.style.width);//获取样式p.style.width = '100px';//修改样式console.log(p.className);//获取classp.className = 'p1';//修改class//获取nodeName和nodeTypeconsole.log(p.nodeName);console.log(p.nodeType)

(3)、Attribute 属性

var pList = document.querySelectorAll('p');var p = pList[0];p.getAttribute('date-name');p.setAttribute('date-name','imooc');p.getAttribute('style');p.setAttribute('style','font-size:30px')

3、DOM结构操作

新增节点、获取父元素、获取子元素、删除节点

（1）、新增节点

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);

（2）、获取父元素和子元素

var div1 = document.getELementById('div1');var parent = div1.parentElement;//父元素var child = div1.childNodes;//子元素div1.removeChild(child[0]);//删除节点

解题

1、DOM是哪种基本的数据结构

2、DOM操作的常用API有哪些

获取DOM节点、以及节点的property和attribute；

获取父元素，获取子元素

新增节点，删除子元素

3、DOM节点的Attribute和property有何区别

property只是一个js对象的属性的修改

Attribute是对html标签属性的修改

二、BOM

Brower object model 浏览器对象模型

知识点

navigator(浏览器)、screen(屏幕)、location(地址)、history(历史)

（1）、navigator & screen

//navigatorvar ua = navigator.userAgent;var isChrome = ua.indexOf('chrome');console.log(isChrome)//screenconsole.log(screen.width);console.log(screen.height);

(2)、location & historylocation.href //地址

location.protocal //'http' 'https'location.host //集合location.pathname //'/learn/199'路径location.search //?参数location.hash //#//historyhistory.back()history.forward()

解题

如何检测浏览器的类型

var ua = navigator.userAgent;  var isChrome = ua.indexOf('chrome');  console.log(isChrome)

三、事件绑定

知识点：通用事件绑定；事件冒泡；代理

1、通过事件绑定

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低版本的兼容性

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

2、事件冒泡


        
     激活
    
     激活
    
     激活
    
     激活
    
        
     取消
    
     取消
    
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(e){    alert('取消')})

3、代理


        
     a1    
     a2

完善通用绑定事件的函数


        
     a1    
     a2

解题

简述事件冒泡流程

DOM树形结构->事件冒泡 --> 阻止冒泡 --> 冒泡的应用

四、ajax

知识点:XMLHttpRequest、状态码说明、跨域

1、XMLHttpRequest

var xhr = XMLHttpRequest;xhr.open('GET','api',false);xhr.onreadystatechange = function(){    //这里的函数异步执行，可参考之前js基础的异步模块    if(xhr.readyState == 4){        if(xhr.status == 200){            alert(xhr.responseText)        }    }}xhr.send(null);//IE兼容问题;//IE低版本使用ActiveXObject和w3c标准不一样