关于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()
