Js-web-API（一）

回顾Js基础知识：

• 变量类型和计算
• 原型和原型链
• 闭包和作用域
• 异步和单线程
• 其他（如日期、Math、各种常用API）

特点：表面看起来并不能用于再工作中开发代码
内置函数：Object，Array，Boolean，String….
内置对象：Math JSON ……..
我们连再网页中弹出一句hello word都不能实现

Js基础部分：ECMA 262标准
JS-Web-API：W3C标准

获取元素 document.getElementById(id) , 浏览器需要：
定义一个 document全局变量，对象类型
给它定义了一个getElementById(id)的属性，属性值是一个函数。

但是w3c标准没有规定任何js基础相关的东西
不管什么变量类型、原型、作用域和异步
只管定义用于浏览器中Js操作页面的API和全局变量

全面考虑，JS内置的全局函数和对象有哪些
之前讲过的，Array，Math，Object，Boolean，String，JSON
刚刚提到的window，document
接下来还有继续讲到的所有未定义的全局变量，如navigator.userAgent(获取浏览器特性)

总结：常说的js（浏览器执行的JS）包含两部分：
JS基础知识（ECMA262标准）
JS-Web-API（W3C标准）

DOM:
document object model

题目 ：
1、DOM是哪种基本的数据结构
2、DOM操作的常用API有哪些
3、DOM节点的attr和property有何区别

知识点：
1、DOM的本质
2、DOM节点操作
3、DOM结构操作

1、DOM的本质
xml：可扩展的结构类型
树；
DOM就是浏览器将拿到的html代码，结构化成了一个浏览器能识别并且js能操作的一个模型。什么叫做js可识别的东西，DOM结构化操作体现了这种可识别。

DOM节点操作
1、获取节点操作
2、prototype
3、Attribute

1、获取节点操作

var div1 = document.getElementById('div1')//元素
var divList = document.getElementsByTagName('div')//集合
console.log(divList.length)
console.log(divList[0])

var containerList = document.getElementByClassName('.container')//集合
var pList = document.querySelectorAll('p')//集合

property：
修改js标准属性

var pList = document.querrySelectorAll('p')
var p = PList[0]
cosnole.log(p.style.width) // 获取样式
p.style.width = '100px' //修改样式
console.log(p.className)//获取className
p.className = 'p1' //修改className

//获取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('dataname','immoc')
p.getAttribute('style')
p.setAttribute('style','font-size:30px')

DOM结构操作
1、新增节点
2、获取父元素
3、获取子元素节点
4、删除节点

1、新增节点

var div1 = document.getElementById('div1')
//添加新节点
var p1 = document.creatElement('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
div1.removeChild(child[0])

删除节点：

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

解答：
1、DOM是那种基本的数据结构
树。
2、DOM操作中常用的API有哪些

（1）、获取DOM节点，以及节点的property和Attribute
（2）、获取父节点，获取子节点，插入节点，删除节点等

3、DOM节点的Attribute和property有何区别

property只是一个js对象属性的修改
Attribute 是对一个标签的属性的获取与修改

BOM操作
Browser Object Model

题目：
1、如何检测浏览器的类型
2、拆解url的各部分

知识点：
navigator
screen
location
history

navigator：

var ua = navigator.userAgent
//获取浏览器类型
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)

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

location&history

//location
console.log(location.href)//整个路径
console.log(location.href = '')//改变路径地址
console.log(location.host)//主机名
console.log(location.protocol)//协议http: , https:
console.log(location.pathname) //路径'/learn/199'
console.log(location.search)// ？之后的参数
console.log(location.hash)//哈希值


//history
history.back()//返回
history.forward()//前进