JavaScript 知识点 - Web API
2018-08-28 本文已影响7人
千反田爱瑠爱好者
DOM
便于描述树形结构的文档对象的模型，使浏览器可识别、JS可操作。
DOM属性操作
获取DOM节点：
var div1 = document.getElementById("div1")
var divList = document.getelementsByTagName("div")
var containerList = document.getElementsByClassName(".container")
property：JS对象属性（获取/修改）
var pList = document.querySelectorAll('p')
var p = pList[0]
p.style.width
p.className
p.nodeName
attribute：HTML标签属性（获取/修改）
var pList = document.querySelectorAll('p')
var p = pList[0]
p.getAttribute("data-name")
p.setAttribute("data-name", "ywh")
p.getAttribute("style")
DOM结构操作
// 新增节点
var div1 = document.getElementById("div1")
var p1 = document.createElement("p")
p1.innerHTML = "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
浏览器对象模型
- navigator
- screen
- location
- history
navigator.userAgent
screen.width
screen.height
location.href
location.protocol
location.pathname
location.search
location.hash
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.prevntDefault()
alert("clicked")
})
事件冒泡
节点事件触发时，如果其父节点都绑定相同的事件，则事件会从节点依次向外传递。
<body>
<div id="div1">
<p id="p1">激活</p>
<p id="p2">取消</p>
</div>
<script>
function bindEvent(elem, type, fn) {
elem.addEventListener(type, fn)
}
var p1 = document.getElementById("p1")
var body = document.body
bindEvent(p1, "click", function(e) {
e.stopPropagation() // 阻止点击p1时点击事件传递到body而产生alert("取消")
alert("激活")
})
bindEvent(body, "click", function(e) {
alert("取消")
})
</script>
</body>
代理：在父节点绑定事件（并加入对子节点的判断），而不需要对每个子节点都绑定事件（且支持动态增删）
- 代码简洁
- 减少浏览器内存占用
使用代理完善通用绑定事件函数：
<div id="div1">
<a id="a1">a1</a>
<a id="a2">a2</a>
<a id="a3">a3</a>
<a id="a4">a4</a>
</div>
<script>
function bindEvent(elem, type, selector, fn) {
if (fn === undefined) {
fn = selector
selector = null
}
elem.addEventListener(type, function (e) {
if (selector && e.target && e.target.matches(selector))
fn.call(e.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)
})
</script>
详见《DOM基础总结》
兼容性问题
- IE低版本使用attachEvent绑定事件，和W3C标准不一样；
- IE低版本使用量非常少，很多网站早已不支持（忽略）；
HTTP请求
XMLHttpRequest
readyState：
- 0 未初始化：还没有调用
send()方法； - 1 载入：已经调用
send()方法，正在发送请求； - 2 载入完成：
send()方法执行完成，已经接受到全部响应内容； - 3 交互：正在解析响应内容；
- 4 完成：响应内容解析完成，可以在客户端调用。
status：
- 2xx：成功处理成球
- 3xx：需要重定向，浏览器直接跳转
- 4xx：客户端错误
- 5xx：服务端错误
let xhr = new XMLHttpRequest()
xhr.open("GET", "/api", false)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
alert(xhr.responseText)
}
}
}
xhr.send(null)
兼容性问题
- IE低版本使用ActiveXObject，和W3C标准不一样。
跨域
见《跨域问题及解决方法》
存储
Cookie
- 本身用于客户端和服务端之间通信；
- 具有本地存储功能，
document.cookie可以修改/获取； - 存储量小（4KB）；
- 所有HTTP请求都会带上，影响获取资源的效率。
LocalStorage和SessionStorage
- HTML5专门为存储设计，存储量大（5M）；
- API简单易用，
LocalStorage.setItem(key, value)，LocalStorage.getItem(key)； - SessionStorage在关闭浏览器时会自动清理，LocalStorage则会一直保留。
回答以下问题
- DOM是哪种基本的数据结构？
- DOM操作的常用API有哪些？
- DOM节点的attr和property有何区别？
- 如何检测浏览器类型？
- 拆解url各部分。
- 编写一个通用的事件监听函数。
- 描述事件冒泡流程。
- 对于一个无限下拉加载图片的页面，如何给每个图片绑定事件？
- 手动编写一个ajax，不依赖第三方库。
- 跨域的几种实现方式。
- Cookie，SessionStorage，LocalStorage的区别。
