第五章 js-web-api 上

5-1 从基础知识到web-api

• JS基础知识：ECMA 262 标准
• JS-Web-API：W3C 标准

W3C标准中关于 JS 的规定有：

1. DOM 操作
2. BOM 操作
3. 事件绑定
4. ajax 请求（包括 http 协议）
5. 存储

页面弹框是 window.alert(123)，浏览器需要做：

1. 定义一个 window 全局变量，对象类型
2. 给它定义一个 alert 属性，属性值是一个函数

获取元素 document.getElementById(id)，浏览器需要：

1. 定义一个 document 全局变量，对象类型
2. 给它定义一个 getElementById 的属性，属性值是一个函数

但是W3C标准没有规定任何JS基础相关的东西

• 不管什么变量类型、原型、作用域和异步
• 只管定义用于浏览器中JS操作页面的API和全局变量

全面考虑，JS内置的全局函数和对象有哪些？

1. 之前讲过的 Object Array Boolean String Math JSON 等
   2.刚刚提到的 window document
2. 接下来还有继续讲到的所有未定义的全局变量，如 navigator.userAgent

常说的JS（浏览器执行的JS）包含两部分：

1. JS基础知识（ECMA262标准）
2. JS-Web-API（W3C标准）

5-2 DOM本质

问题

DOM是哪种基本的数据结构

树

DOM操作的常用API是什么

获取DOM节点，以及节点的property和Attribute
获取父节点，获取子节点
新增节点，删除节点

DOM节点的attr和property有何区别

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

知识点

1.DOM 本质

浏览器把拿到的html代码，结构化成一个浏览器能识别并且js可操作的一个模型

2.DOM节点操作

获取dom节点

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

document.getElementsByClassName('.container') //集合
docuement.querySelectorAll('p') //集合

prototype（js对象的一个标准属性，指向html的一个节点）

var plist = docuement.querySelectorAll('p') //集合
var p = plist[0]
console.log(p.style.width) // 获取样式
p.style.width = '100px' //修改样式
console.log(p.className) //获取class
p.className = 'p1' //修改 class

//获取 nodeName 和 nodeType
console.log(p.nodeName)
console.log(p.nodeType)

Attribute（html文档标签的一个属性）

var plist = document.querySelectorAll('p)
var p = plist[0]
p.getAttrobute('data-name')
p.setAttribute('data-name', 'abc')
p.getAttribute('style')
p.setAttribute('style', 'font-size: 10px;')

DOM节点的Attribute 和 property 有何区别

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

3.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.paddendChild(p2)

 // 获取子元素和父元素
 var div1 = docuement.getElementById('div1')
 var parent = div1.parentElement

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

 //删除节点
 var div1 = docuement.getElementById('div1')
 var child = div1.childNodes
 div1.removeChild(child[0])

5-3 BOM

题目

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

知识点

• navigator
• screen
• location
• history

// navigator
var ua = navigator.userAgent
var isChorme = us.indexof('chorme')
console.log('isChorme')

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

//location  拆解url的各部分
console.log(location.href)
console.log(location.protocol)  // http https
console.log(location.pathname)  // /learn/100
console.log(location.search)
console.log(location.hash)

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