基础知识（js-web-api）

一、DOM（document object model)

//获取元素
var div1 = document.getElementById('div1')
var div2 = document.getElementsByTagName('div')
var div3 = document.getElementsByClassName('content')
var div4 = document.querySelectorAll('p')

//设置、获取style，以下为property形式，修改对象属性，尽量使用这种方式
div1.style.width = '20px'
console.log(div1.style.width)

//获取、设置class名称，以下为attribute形式，修改html属性
console.log(div1.className)
div1.className = 6
console.log(div1.getAttribute('class'))
div1.setAttribute('class', 5)

//获取节点类型
console.log(div1.nodeName)
console.log(div1.nodeType)

//操作节点
var div = document.createElement('div')    //新增
var span = document.createElement('span')
span.innerHTML = 'hello'
div.appendChild(span)    //插入

var div5 = document.getElementById('div1')
div.appendChild(div5)       //获取已有节点，然后移动已有节点

div1.childNodes    //获取子元素
div1.parentNode    //获取父元素

注意：减少dom查询

//不采用，耗费性能
for(var i = 0; i< 5;i++){
    var div = document.createElement('div')
    div.innerHTML = 'hello'
    p.appendChild(div)
}

//不采用，耗费性能
for(var i = 0; i < document.getElementById('1').length; i++){
    console.log(1)
}

//采用，一次性插入性能好
var li = document.createDocumentFragment()
for(var i = 0; i< 5;i++){
    var div = document.createElement('div')
    div.innerHTML = 'hello'
    li.appendChild(div)

}
div1.appendChild(li)

//采用，缓存性能好
var length = document.getElementById('1').length
for(var i = 0; i < length; i++){
    console.log(1)
}

 

二、BOM（browser object model）

主要有navigator、screen、location、history

//navigator
let ua = window.navigator.userAgent
let ischrome = ua.indexOf('Chrome')
console.log(ischrome)

//screen
console.log(window.screen.width)
console.log(window.screen.height)

//location
console.log(location.href)    //地址https://www.baidu.com/s?wd=window    
console.log(location.protocol) //域名https
console.log(location.pathname)   //地址路径/s
console.log(location.search)   //参数?wd=window
console.log(location.hash)    //hash路由

//history
history.back()    //后退
history.forward()    //前进

 

三、事件

主要有事件绑定，事件冒泡，事件代理

请查看前端面试题 16、17、18题

 

四、ajax

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

每当 readyState 改变时，就会触发 onreadystatechange 事件，readyState 属性存有 XMLHttpRequest 的状态信息。

注意：// IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

//get请求
let http = new XMLHttpRequest()
http.open('get', '/web?fname=Henry', true)
http.onreadystatechange = function () {
    if (http.readyState == 4) {
        if (http.status == 200) {
            console.log(http.responseText)
        }
    }
}
http.send()

//post请求
let xmlhttp = new XMLHttpRequest()
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

跨域：为了安全，当ajax请求的时候，浏览器要求当前网页和server必需同源

同源：协议、域名、端口三者必需一致（比如http://a.com.cn:8088/和http://b.com.cn/index）

可以跨域的HTML元素有：

img.src = '跨域的图片'    //可以统计打点，可使用第三方统计服务
<link href = '跨域的css'>    //可以使用CDN
<script src = '跨域的js'></script>    //可以使用cdn，可实现jsonp

//jsonp

window.callback = function (data) {
    console.log(data) //打印{name: hello}
}
<script src='http://a.com/a.js'></script> //js返回callback({name: hello})

 

五、存储

主要有cookie、localStorage、sessionStorage

cookie主要用于本地和服务器通信，请求中会带上cookie，存储大小，最大4kb，api 是 document.cookie 

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。