关于JS基础和JSWebAPI的介绍

JS基础,比如变量,原型,作用域等等这些原理,是由ECMA 262来规定的.那么W3C规定了什么呢?W3C规定了用于浏览器中JS操作页面的API和全局变量

DOM

什么是DOM,DOM就是Document Object Model,即文档对象模型

• DOM是哪种基本的数据结构
• DOM操作的常用API有哪些
• DOM节点的attr和property有何区别

DOM本质

浏览器从服务器将.html的文件获取到将这个文件的代码(其实就是字符串)进行识别,将这个文件的中的代码识别成树状结构,这个树状结构使得JS能够操作.因此DOM就是一个模型

DOM节点操作

• 获取DOM节点

var div1 = document.getElementByid('div1')  //元素
var divList = document.getElemntsByTagName('div')   //集合
console.log(divList.length)
var containerList = document.getElementByClassName('container') //集合

• property

var pList = document.querySelectorAll('p')  //集合
var p = pList[0]
console.log(p.style.width)  //获取样式
consoel.log(p.className)    //获取class
//获取nodeName和nodeType
console.log(p.nodeName)
console.log(p.nodeType)

• Attribute

var pList = document.querySelectorAll('p')  //集合
var p = pList[0]
p.getAttribute('data-name')
p.setAttribute('data-name','greentea')

attribute修改的是HTML文档中的标签,property就是JS中的标准属性

DOM结构操作

• 新增节点

var div1 = document.getElementById('div1')
//添加新节点
var p1 = document.createElement('p')
p1.innerHTML = 'this is 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
child.childNodes[0].nodeType  //text:3  p:1  
child.childNodes[0].nodeName  //text:#text  p:P

• 删除节点

var child = div1.childNodes
div1.removeChild(child[0]) 

BOM

什么是BOM,BOM就是Browser Object Model,即文档对象模型

• 如何检测浏览器的类型
• 拆解URL的各部分

navigator

//navigator
var ua =navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)

screen

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

location

//location
console.log(location.href)
console.log(location.protocol)  //'http:' 'https'
console.log(location.host)      //域名    
console.log(location.pathname)  //'/learn/199'
console.log(location.search)    //参数 
console.log(location.hash)      //#后面的值

history

//history
history.back()
history.forward()