js基础知识：基于ECMA 262标准（规定基础语法、规则）
--变量类型和计算
--原型和原型链
--闭包和作用域
--异步和单线程
--其他（如日期、Math、各种常用API）
特点：表面看来并不能用于工作中开发代码内置函数：Object Array Boolean String...内置对象：Math JSON...
js-web-API：基于W3C标准（在规则上怎么用）
w3c标准中关于JS的规定有：
--DOM操作（增删改查，修改网页的结构，页面的动态效果）
--BOM操作（获取浏览器特性、当前屏幕尺寸宽高、当前地址栏地址）
--事件绑定（click，keyon，mouseenter，mouseup等）
--ajax请求（包括http协议）
--存储
浏览器即要遵循浏览器对js的运行的定义，又要遵循ECMA262，又要遵循w3c标准。
1.页面弹框是 window.alert(123);,浏览器需要做：
--定义一个window全局变量，对象类型--给它定义一个alert属性，属性值是一个函数
2.获取元素document.getElementById(id);浏览器需要：
--定义一个document全局变量，对象类型--给它定义一个getElementById的属性，属性值是一个函数
3.W3C标准没有规定任何Js基础相关的东西
--不管什么变量类型、原型、作用域和异步（ECMA 262）--只管定义用于浏览器中JS操作页面的API和全局变量
4.js内置的全局函数和对象有哪些：(可以拿来直接用的)
--之前讲过的 Object Array Boolean String Math JSON等--刚刚提到的 window document --未定义的全局变量，如：navigator.userAgent
5.常说的JS（浏览器执行的JS）包含两部分：
--JS基础知识（**ECMA262标准**）--JS-Web-API（**W3C标准**）
/--------------DOM操作--------------
Document Object Model
1.DOM是哪种基本的数据结构？
--树
2.DOM操作的常用API有哪些？
--获取DOM节点，以及节点的property和Attribute--获取父节点，获取子节点--新增节点，删除节点
3.DOm节点的attr和property有何区别？
--property只是一个JS对象的属性的修改--Attribute是对html标签属性的修改
1、DOM的本质
（浏览器把拿到的html代码，结构化成浏览器可识别、js可操作的一个模型而已）
--XML可扩展的描述语言，可以描述任何结构化的数据树，有一个主干，有很多分支，分支在有分支；
<?xml version="1.0" encoding="UTF-8"><note><to>Tove</to><from>Jani</from><heading>Reminder</heading><boby>Don't forget me this weekend!</body><other><a></a><b></b></other></note>--html是XML的一种特殊类型，是一种特殊结构，和XML一样的规则<!DOCTYPE html><html><head><meta charset ="UTF-8"><title>Document</title></head><body><div><p>this is p!</p></div></body></html>
2、DOM节点操作
--获取DOM节点
var div1 = document.getElementById('div1');//元素var divList =document.getElementsByTagName('div'); //集合 console.log(divList.length);console.log(divList[0]);var containerList = document.getElementsByClassName('.container');//集合var pList = document.querySelectorAll('p');//集合--property(改的是js对象的一个标准属性)eg:1.var pList = document.querselectorAll('p');var p = pList[0];console.log(p.style.width); //获取样式p.style.width = '100px'; //修改样式console.log(p.className); //获取classp.className = 'p1'; //修改class//获取nodeName 和 nodeType console.log(p.nodeName);console.log(p.nodeType);eg:2. x是obj的一个propertyvar obj = {x:100,y:200};console.log(obj.x); // 100 nodeName是p的一个propertyvar p = document.getElementsByTagName('p')[0];console.log(p.nodeName); // P// propertyvar div = document.getElementById('div1');console.log(div1.className);div1.className = 'abc';console.log(div1.className);--Attribute(改的html代码文档里面的标签的属性)var pList = document.queryselectorAll('p');var p = pList[0];p.getAttribute('data-name');p.setAttribute('data-name','imocc');p.getAttribute('style');p.setAttribute('style','font-size:30px');
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.appendChild(p2);
--获取父元素--获取子元素--删除节点
var div1 = document.getElementById('div1');var parent = div1.parentElement;var child = div1.childNodes;console.log(child[0].nodeType); // text 3console.log(child[1].nodeType); // div 1 console.log(child[0].nodeName); // text #textconsole.log(child[1].nodeName; // div div div1.removeChild(child[1]);
/---------------BOM的操作--------------------
Browser Object Model 浏览器对象模型
1.如何检测浏览器的类型
2.拆解url的各部分
1.navigator
2.screen
3.location
4.history
eg：1、navigator & screen
//navigatorvar ua = navigator.userAgent;var isChrome = ua.indexOf('chrome');console.log(isChrome); //screenconsole.log(screen.width);console.log(screen.height);
2.location & history
//locationconsole.log(location.href); //获取页面的地址location.href = ''; //修改页面的地址console.log(location.protocol); //协议 'http:' 'https:'console.log(location.host); //域名 ''console.log(location.pathname); //路径 '/learn/199.html'console.log(location.search); //url的？后面查询字符串、参数 ?cid=99&a=bconsole.log(location.hash); //url中#后面的参数 #mid=100//historyhistory.back(); //返回history.forward(); //前进后退
