api总结

最新推荐文章于 2021-09-13 14:37:33 发布

ddlovebaby

最新推荐文章于 2021-09-13 14:37:33 发布

阅读量201

点赞数

本文链接：https://blog.csdn.net/ddlovebaby/article/details/89479302

版权

api总结

DOM（documen object model）
dom树。

节点操作

获取dom接点

document.getElementById(‘id’)//元素id
document.getElementByTagName(‘div’)//集合
document.getElementByClassName(’.bannerName’)//集合
document.querySelectorAll(‘p’)//集合
…
attr属性（针对HTML标签）

var pList=document.querySelectorAll(‘p’)
var p = pList[0]
p.getAttribute(‘dataname’)
p.setAttribute(‘dataname’,‘othername’)
p.getAttribute(‘style’,‘othername’)
p.setAttribute(‘style’)
DOM结构操作

新增节点

appendChild()

获取父元素

parentElement()

获取子元素

childNodes()

删除节点

removeChild()

property属性(对JS对象的属性的修改)

var pList=document.querySelectorAll(‘p’)
var p = pList[0]
console.log(p.style.width)//获取样式
p.style.width=‘999px’//修改
console.log(p.className)//获取类名
p.className=‘otheName’//修改
//获取nodeName和NodeType
console.log(p.nodeName)
console.log(p.nodeType)

BOM操作（browser boject model）
浏览器类型
URL

navigator

var ua = navigator.userAgent
var isChrome=ua.indexOf(‘Chrome’)
console.log(isChrome)
screen

console.log(screen.width)
console.log(screen.height)
location

console.log(location.href)
console.log(location.protocol)//http
console.log(location.pathname)/demo/demo
console.log(location.search)
console.log(location.hash)

history

history.back()
history.forward()
事件
事件监听函数

var btn = document.getElementById(‘btn1’)
btn.addEventListener(‘click’,function(event)
{
var target
if(selector){
target=e.target
if(target.matches(selector))
{
fn.call(target,e)
}
}
else{
fn{e}
}
})

function bindEvent(elem,type,selector,fn)
{
if(fn==null){
fn=selector
selector=null
}
}
var a = document.getElementById(‘link1’)
bindEvent(a,‘click’,function(e){
e.preventDefault()
alert(‘clicked’)
})

事件冒泡

触发子事件，父事件也会触发

var p1=document.getElementById(‘p1’)
var body = document.body
bindEvent(p1,‘click’,function(e){
e.stopPropagation()//阻止冒泡事件
alert(‘激活’)
})
bindEvent(body,‘click’,function(e){
alert(‘取消’)
})
代理

代码简洁

减少浏览器内存使用

a1 a2 a3 a4

var div1=document.getElementById('div1') div1.addEventListener('click',function(e){ var target=e.target if(target.nodeName==='A') { alert(target.innerHTML) } }) e.preventDefault()//阻止默认行为

Ajax
手写ajax
var xhr=new XMLHttpRequest()
xhr.open(“GET”,"/url/demo",false)//false 为异步不填默认同步
xhr.onreadystatechange = function()
{
if(xhr.readyState4&&xhr.status200){//成功了且服务端返回成功
console.log(xhr.responseText)//服务端返回内容
}
}
xhr.send()
*IE兼容性问题（了解）

状态码（readyState）
0:未初始化，还没有调用send()方法

1:载入，正在发送请求

2:载入完成，已经接收到响应请求

3:交互, 正在解析响应内容

4:完成，解析完成，可以在客户端调用了

status
2xx—表示成功处理请求

3xx—需要在重定向，浏览器直接跳转

4xx—客户端请求错误，404

5xx—服务器端错误

跨域
浏览器有同源策略，不允许ajax访问其他域接口

协议，端口，域名

跨域注意事项