js API

2019/02/17 22:51
阅读数 14
  • 从基础知识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);//获取class
p.className = 'p1';//修改class
//获取nodeName和nodeType
console.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

//navigator
var ua = navigator.userAgent;
var isChrome = ua.indexOf('chrome');
console.log(isChrome)
//screen
console.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 //#
//history
history.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、事件冒泡

<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>
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、代理

<div id="div1">
	<a href="#">a1</a>
	<a href="#">a2</a>
	<!-- 会随时新增更多a标签 -->
</div>
<script>
	var div1 = document.getElementById('div1');
	div1.addEventListener('click',function(e){
		var target = e.target;
		if(target.nodeName === 'A'){
			alert(target.innerHTML)
		}
	})
</script>

完善通用绑定事件的函数

<div id="div1">
	<a href="#">a1</a>
	<a href="#">a2</a>
	<!-- 会随时新增更多a标签 -->
</div>
<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;
				if(target.matches(selector)){
					fn.call(target,e)
				}
			}else {
				fn(e);
			}

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

解题

简述事件冒泡流程

  • 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标准不一样

2、readyState 状态码说明

  • 0---(未初始化)还没有调用send()方法
  • 1--- (载入)已调用send方法,正在发送请求
  • 2---(载入完成)send()方法执行完成,已经接收到全部响应内容
  • 3---(交互)正在解析内容
  • 4---(完成)响应内容解析完成,可以在客户端调用了

3、status状态码说明

  • 2xx --- 表示成功处理请求,如200;
  • 3xx --- 需要重定向,浏览器直接跳转;
  • 4xx --- 客户端请求错误,如404
  • 5xx --- 服务端错误

4、跨域

  • 什么是跨域、JSONP、服务器端设置http header

(1)、什么是跨域?

  • 浏览器有同源策略,不允许ajax访问其他域接口
  • http://www.yourname.com:80/page1.html
  • http端口80 https端口默认443
  • 跨域条件:协议、域名、端口有一个不同就算跨域

(2)、可以跨域的三个标签

  • 有三个标签允许跨域加载资源
  • <img src="xxx" />
  • <link href="xxx" />
  • <script src="xxx" />

(3)、三个标签的场景

  • <img>用于打点统计,统计网站可能是其他域
  • <link>``<script>可以使用CND、CND的也是其他域
  • <script>可以用JSONP

(4)、跨域注意事项

  • 所有的跨域请求都必须经过信息提供方允许,如果未经允许即可获取,那是浏览器同源策略出现漏洞

(5)、JSONP实现原理

  • 加载http://www.baidu.com/classindex.html

  • 不一定服务器端有一个classindex.html文件

  • 服务器可以根据请求,动态生成一个文件返回

  • 同理于<script src="http:www.baidu.com/api.js">

      <script>
      	window.callback = function(data){
      		//这里我们跨域得到信息
      		console.log(data)
      	}
      </script>
    

(6)、服务器端设置http header

  • 另外一个解决跨域的简洁方法,需要服务端来做,但是作为交互方,我们必须知道这个方法,是将解决跨域问题的一个趋势。

五、存储

  • 知识点:cookie、locationStorage 和sessionStorage

1、cookie

  • 本身用于客户端和服务端通信
  • 但是它有本地存储的功能,于是就被“借用”;
  • 使用document.cookie = ... 获取和修改即可

(1)、cookie用于存储的缺点

  • 存储量太小,只有4kb
  • 所有http请求都带着,会影响获取资源的效率
  • API简单,需要封装才能用document.cookie = ...

(2)、locationStorage和sessionStorage

  • HTML5专门为存储而设计,最大容量5M(兆)
  • API简单易用
  • localStorage.setItem(key,value)
  • localStorage.getItem(key,value)
  • ios safar隐藏模式下 localStorage.getItem会报错
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
在线直播报名
返回顶部
顶部