1.JS-Web-API
1.特点:表面看来并不能用于工作中开发代码
2.内置函数: Object Array Boolean String
3.内置对象: Math JSON
4.我们连在网页弹出一句hello world都不能实现
1.1.W3C标准中关于JS的规定有:
1.DOM操作
2.BOM操作
3.事件绑定
4.jaax 请求(包括http协议)
5.存储
1.页面弹框是window.alert(123) ,浏览器需要怎么做？
2.定义一个window全局变量,对象类型
3.给它定义一个alert属性,属性值是一个函数
4.获取元素document.getElementByld(id) ,浏览器需要怎么做？
5.定义一个document全局变量,对象类型
6.给它定义一个getElementByld的属性,属性值是一个函数
但是W3C标准没有规定任何JS基础相关的东西
不管什么变量类型、原型、作用域和异步
只管定义用于浏览器中JS操作页面的AP1和全局变量
7.全面考虑, JS内置的全局函数和对象有哪些?
之前讲过的Object Array Boolean String Math JSON等
刚刚提到的window document
接下来还有继续讲到的所有未定义的全局变量,如navigator.userAgent
总结：常说的JS (浏览器执行的JS )包含两部分:
1.JS基础知识( ECMA262标准)
2.JS-Web-API (W3C标准)
2.DOM本质
DOM操作：全程 Document Object Model 文档对象模型
2.1.DOM本质
DOM可以理解为:浏览器把拿到的html代码,结构化一个浏览器能识别并且js可操作的一个模型而已。
2.2.DOM节点操作
获取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') //集合
prototype : 原型(属性)
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和nodeType
console.log(p.nodeName)
console.log(p.nodeType)
setAttribute ：属性
var pList = document.querySelectorAll('p')
var p= pList[0]
p.getAttribute('data-name')
p.setAttribute('data-name','imooc')
p.getAttribute('style')
p.setAttribute('style', 'font-size:30px;')
2.3.DOM结构操作
新增节点
var div1 = document.getElementById('div1')
//添加新节点
var p1 = document.createElement('p')
p1.innerHTML = 'this is p1'
div1.appendChild(p1) //添加新创建的元素
console.log (p1.parentElement) //获取p1的父节点(div1)
console.log (div1.parentElement) //获取div1的父节点(body)
console.log(div1.childNodes) //获取div1的子节点
console.log(div1.childNodes[0].nodeType) //text 3
console.log(div1.childNodes[1].nodeType) //p1 1(1代表是常规的HTML标签)
console.log(div1.childNodes[0].nodeName) //text #text
console.log(div1.childNodes[1].nodeName) //p1 P
//综上结论：可以通过 nodeType(获取类型) 和 nodeName 来判断是不是常规的HTML标签
var childNodes = divchildNodes
div1.removeChild(childNodes[1])
//移动已有节点
var p2 = document.getElementById('p2')
div1.appendChild(p2) //移动节点
获取父元素和子元素
var div1 = documenet.getElementById('div1')
var parent = div1.parentElement
var child = div1.childNodes
div.removeChild(child[0])
删除节点
var div1 = document.getWElementById('div1')
var child = div.childNodes
div1.removeChild(child[0])
2.4.DOM是哪种基本的数据结构？
树
2.5.DOM操作的常用API有哪些？
获取DOM节点，以及节点的property 和Attribute
获取父节点，获取子节点
新增节点，删除节点
2.6.DOM节点的attribute 和 property 有何区别？
property 只是一个JS对象的属性的修改
Attribute 是对 html 标签属性的修改
重点总结
DOM本质
DOM节点操作
DOM结构操作
3.BOM操作
BOM操作:全程 Browser Object Model ：浏览器对象模型
navigator & screen
//navigator ：浏览器
var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)
//screen:屏幕
console.log(scrieen.with)
console.log(screen.height)
location & history
//location :地址
console.log(location.href) //URL
console.log(location.protocol) //协议 'http:' 'https:'
console.log(location.pathname) //路径 '/learn/199'
console.log(location.search) //url后面的查询字符串
console.log(location.hash) //url里面的#号
//history
history ：历史(前进，后退)
history.back() 前进
history.forward() 后退
3.1.如何检测浏览器的类型
var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)
3.2.拆解URL的各部分
//location :地址
console.log(location.href) //整个URL
console.log(location.host) //域名
console.log(location.protocol) //协议 'http:' 'https:'
console.log(location.pathname) //路径 '/learn/199'
console.log(location.search) //url里面的 ？后面的查询字符串
console.log(location.hash) //url里面的#号，哈希
https://coding.imooc.com/lesson/115.html?cid=99#mid=5390
https: //协议
coding.imooc.com //域名
/lesson/115.html //路径 pach
?cid=99 //查询字符串
#mid=5390 //哈希#
4.事件
4.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')
})
代理的好处
1.代码简洁
2.减少浏览器内存占用
function bindEvent(elem, type, selector, fn) {
if (fn == null) {
fn = selector
selector = null
}
elem.addEventListener(type, function (e) {
var targetf
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) {
console.log(this.innerHTML)
})
//不使用代理
var a= document.getELementById('a1')
bindEvent(div1, 'click', function (e) {
console.log(a.innerHTML)
})
4.2.事件冒泡
<body>
<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>
<body>
var p1 = document.getElementById('p1')
var body = document.body
bindEvent(p1, 'click', function (e) {
e.stopPropatation() //阻止冒泡
alert('激活')
})
bindEvent(body, 'click', function (e){
alert('取消')
})
4.3.代理
<div id="div1">
<a href="#">a1<a>
<a href="#">a1<a>
<a href="#">a1<a>
<a href="#">a1<a>
<!--会随时新增更多的a标签-->
</div>
var div1= document.getELementById('div1)
div1.addEventListener('click', function (e)
var target = e.target
if (target.nodeName === 'A') {
alert(target.innerHTML)
}
})
4.4.编写一个通用的事件监听函数
最好理解并默写出来
function bindEvent(elem, type, selector, fn) {
if (fn == null) {
fn = selector
selector = null
}
elem.addEventListener(type, function (e) {
var targetf
if (selector) {
target = e.target
if (target.matches(selector)) {
fn.call(target, e)
}
} else {
fn(e)
}
})
}
4.5.描述事件冒泡流程
DOM树形结构
事件冒泡
阻止冒泡
冒泡的应用
4.6.对于一个无线下拉加载图片的页面，如何给每个图片绑定事件
使用代理
知道代理的两个优点
4.7.关于IE低版本的兼容性
IE低版本使用 attachEVENT 绑定事件，和W3C标准不一样
IE低版本使用量已非常少，很多网站都早已不支持
建议对IE低版本的兼容性：了解即可，无需深究
如果遇到对IE低版本要求苛刻的面试，果断放弃。
重点总结
通用事件绑定
事件冒泡
代理
5.Ajax
5.1.XMLHttpRequest
最好理解并默写出来
var xhr = new XMLHttpRequest()
xhr.open ("GET", "/api", false)
xhr.onreadystatechange = function (){
//这里的函数异步执行,可参考之前JS基础中的异步模块
if (xhr.readystate == 4) {
if (xhr.status == 200) {
alert(xhr.responseText)
}
}
}
xhr.send(null)
5.2.状态码
xhr.onreadystatechange = function () {
if (xhr.readystate == 4) {
if (xhr.status == 200) {
alert(xhr.responseText)
}
}
}
5.2.1.readystate
0-(w未初始化)还没有调用 send() 方法
1- (载入) 已调用send()方法，正在发送请求
2-(载入完成) send()方法执行完成，已经接收到全部响应内容
3-(交互)正在解析响应内容
4-(完成)响应内容解析完成，可以在客户端调用了
5.2.2.status
2xx：表示成功处理请求。 如：200
3xx：需要重定向，浏览器直接跳转
4xx：客户端请求错误，如404
5xx：服务器端错误
5.3.跨域
5.3.1什么是跨域？
浏览器有同源策略，不允许 Ajax访问其他域接口
跨域条件：协议、域名、端口，有一个不同就算跨域
http://www.yourname.com/page1.html
http://m.imooc.com/course/ajaxcourserecom?cid=459
默认端口教程：https://blog.csdn.net/ypt523/article/details/79636647
可以跨域的三个标签
但是有三个标签允许跨域加载资源 :用于打点统计，统计网站可能是其他域
：可以使用CDN,CDN的也是其他域
若有收获，就点个赞吧
0 人点赞
