我们通常说的js包含以下两部分内容
-
js语法基础知识:ECMA标准
定义的全局函数和对象有如下:Object Array Boolean String Math JSON 等
-
js-web-api W3C标准 W3C标准中关于js的规定有:
- DOM操作
- BOM操作
- 事件绑定
- ajax请求
- 存储
定义的全局函数和对象有如下:window document navigator 等
什么是dom ?
浏览器把拿到的html代码结构化为一个浏览器能识别并且js可操作的一个模型,是一个树结构类型
常用的dom节点操作方法有以下:
//选择dom元素操作
var p1=document.getElementById("div")
var p2=document.getElementsByTagName("div")
var p3=ocument.getElementsByClassName("div")
var p4=ocument.querySelectorAll("div")
//prototype操作,是对一个js对象的属性修改和读取
var p=p4[0]
console.log(p.style.width)
p.style.width='100px'
console.log(p.className)
p.className='p1'
console.log(p.nodeName)
console.log(p.nodeType)
//attr操作,是对html标签属性的修改和读取
p.getAttribute('data-name')
p.setAttribute('data-name','test')
p.getAttribute('style')
p.setAttribute('style','font-size:10px;')
//添加新创建的节点
var test1=document.getElementById("div")
var test2=document.createElement('p')
test2.innerHTML='this is a test';
test1.appendChild(test2)
//移动已有的节点
var test1=document.getElementById("div")
var test2=document.getElementById("div2")
test1.appendChild(test2)
//获取父元素和子元素以及移除元素
var test1=document.getElementById("div")
var parent=test1.parentElement
var child=test1.childNodes
test1.removeChild(child[0])
BOM对象
//navigator,浏览器相关属性
var ua=navigator.userAgent
var isChrome=ua.indexOf('Chrome')
//screen,屏幕的宽高
console.log(screen.width)
console.log(screen.height)
//location
console.log(location.href)
console.log(location.protocol)//http https
console.log(location.pathname) /getinfo/90
console.log(location.search)//?a=3222
console.log(location.hash)#weer32434
//history
history.back()
history.forward()