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")
})
事件冒泡
节点事件触发时,如果其父节点都绑定相同的事件,则事件会从节点依次向外传递。
激活
取消
代理:在父节点绑定事件(并加入对子节点的判断),而不需要对每个子节点都绑定事件(且支持动态增删)
- 代码简洁
- 减少浏览器内存占用
使用代理完善通用绑定事件函数:
详见《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的区别。