JS进阶 - JS 、JS-Web-API与DOM、BOM

1.JS 与 JS-Web-API

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

(1) JS基础语法：ECMA 262 标准（规定基础语法，包括类型变量、原型、作用域、异步）
(2) JS-Web-API：W3C 标准 （定义用于浏览器中JS操作页面的API和全局变量，规定浏览器让开发者做的事情， W3C 没有规定JS相关基础语法）

浏览器运行JS既要遵循 ECMA 262 标准 又要遵循 W3C 标准

知识补充：

JS内置全局函数和对象：
全局对象：window，document等 
全局变量：所有未定义可以直接用的全局变量，例：navigator（var ua = navigator.userAgent 获取浏览器特性）

2.DOM（文档对象模型 Document Object Model）

XML：可扩展的描述语言，描述结构化数据（标签名自定义，数据结构是树）
HTML：XML的特殊类型（HTML代码就是一个字符串）

DOM的基本数据结构：树
DOM的本质：浏览器把拿到的HTML代码结构化成浏览器可识别，JS可识别可操作的模型

DOM节点操作：

(1) 获取DOM节点:

    var div1 = document.getElementById('div1') //获得元素
    var divList = document.getElementsByTagName('div') //获得集合（JS对象）
    console.log(divList[0])
    var containerList = document.getElementByClassName('.container') //获取集合
    var pList = document.querySelectorAll('p') // 获取集合

(2) prototype 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

(3）Attribute HTML文档标签属性获取与修改:

    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) 新增节点:

    var div1 = document.getElementById('div1')
    
    方法1 - 添加新节点：
    var p1 = document.creatElement('p')
    p1.innerHTML = 'this is p1'
    div1.appendChild(p1) //添加新创建的元素
    
    方法2 - 移动已有节点（原先位置不再存在该节点）：
    var p2 = document.getElementById('p2')
    div1.appendChild(p2)
    
(2) 获取父元素：
 
    var div1 = document.getElementById('div1')
    var parent = div1.parentElement //元素
    
(3) 获取子元素节点：
 
    var div1 = document.getElementById('div1')
    var child = div1.childNodes //获取集合（childNodes包括空文本 text）
    console.log(div1.childNodes[1].nodeName) // #P
    console.log(div1.childNodes[1].nodeType) // 1 (一般类型为1，text为3)
    
(4) 删除节点
    var div1 = document.getElementById('div1')
    var child = div1.childNodes
    div1.removeChild(child[0])
    

3.BOM（浏览器对象模型 Browser Object Model）

1.检测浏览器类型：

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

2.解析url的各部分

location:

console.log(location.href) //整个路径(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) // #哈希值

知识补充：

screen 屏幕：
console.log(screen.width)
console.log(screen.height)

history 历史：
history.back()//返回
history.forward()//前进