js基础知识

我们通常说的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()
复制代码