现在所说的JavaScript包含了三个部分
ECMAScript：js的语法规范DOM：操作网页的功能BOM：操作浏览器的功能DOM 是 W3C（万维网联盟）的标准。 （1）W3C DOM 标准被分为 3 个不同的部分： ① 核心 DOM - 针对任何结构化文档的标准模型 ② XML DOM - 针对 XML 文档的标准模型 ③ HTML DOM - 针对 HTML 文档的标准模型
（2）XML DOM： XML 文档对象模型定义访问和操作XML文档的标准方法。 DOM 将 XML 文档作为一个树形结构，而树叶被定义为节点。
（3）HTML DOM： HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
（4）常见概念 文档：document指的是整个页面，网页视为一个对象 节点：页面中任何内容（标签，属性，文字等等）都是节点 元素：element指的是网页中的标签 DOM又被称为文档树模型：能够查找该节点的父、子、亲戚
（1）通过id获取
document.getElementById('id')参数：参数是string类型，是获取元素的id 返回值：获取到的元素，没有获取到元素返回null （2）通过标签名获取
document.getElementsByTagName('div')参数：标签名(div p) 返回值：伪数组（类数组对象） （3）通过类名获取
document.getElementByClassName('className')参数：类名（className） 返回值：伪数组 存在兼容性问题：IE678不支持 （4）通过name属性获取
document.getElementByName('name')该方法只支持表单元素，因为只有表单元素才有name属性 参数：name属性 返回值：伪数组 （5）通过选择器获取一个元素
document.querySelector('.className')参数：选择器（div .className） 返回值：获取到的元素的第一个，没有获取到元素返回null （6）通过选择器获取一组元素
document.querySelectorAll('.className')参数：选择器（div .className） 返回值：伪数组
（1）事件的三要素： ① 事件源，像按钮button ② 事件名，例如点击click ③ 事件处理程序：默认不执行，待触发
（2）注册事件的语法： ① 事件源.on事件名 = function(){ } // 存在覆盖问题 ② addEventListener(event, fn); // 解决使用on存在的覆盖问题 参数：event（事件名）、fn（事件处理函数）、useCapture（是否使用事件捕捉，默认值为false） 解绑：removeEventLIstener(event, fn, useCapture) 注意：要想解绑不能写匿名函数，一定要写函数名(fn为函数名) ③事件中的this：指向了触发事件的当前元素
// 通过点击事件改变图片路径 var pic = document.getElementById('pic'); var pic = document.getElementById('btn'); btn.onclick = function(){ pic.src = '改变后的路径'; }（3）常见事件 ① onclick 点击事件 ② ondblclick 双击事件 ③ onmouseover 鼠标移入事件 ④ onmouseout 鼠标离开事件 ⑤ onfoucs 聚焦事件 ⑥ onblur 失焦事件 ⑦ onmousedown 鼠标按下事件 ⑧ onmouseup 鼠标抬起事件 ⑨ onmousermove 鼠标移动事件 ⑩ onkeydown 键盘按下事件（获取上次内容） ⑪ onkeyup 键盘弹起事件（可以获取完整内容） ⑫ onscroll 滚动条滚动事件 ⑬ onresize 页面大小改变事件 （4）事件对象：存储了和事件相关的信息 获取事件对象： ① ie：window.event ② 给事件对象指定一个形参，通过形参获取事件对象 兼容性解决：e = e || window.event （5）事件的三个阶段 ① 事件的捕获阶段（从外到里） ② 事件的目标阶段（触发自己的事件） ③ 事件的冒泡阶段（从里到外） 阻止事件传播：
// 阻止冒泡事件的兼容性处理 function stopBubble(e) { if(e && e.stopPropagation) { // 非IE ，必须从事件对象上获取该方法进行调用 e.stopPropagation(); } else { //IE window.event.cancelBubble = true; } } // 阻止默认浏览器动作 function preventDefa(e){ if(window.event){ // IE中阻止函数器默认动作的方式 window.event.returnValue = false; } else{ // 阻止默认浏览器动作 e.preventDefault(); }阻止a链接的跳转： ① 给a注册click事件，在事件处理函数里面return false ② a的href属性值设置为javascript：void(0);
（1）标签的内容属性 ① innerText 不能识别标签（IE，推荐使用） ② innerHTML 可以识别标签（W3C规范） ③ textContent 不能识别标签（火狐浏览器提出）
// 兼容性问题 function getTxt(element){ if(typeof element.innerText == 'string'){ return element.innerText; }else{ return element.textContent; } }（2）设置属性和获取属性（settAttribute和getAttribute）
element.setAttribute("title","HelloWorld"); element.getAttribute("title");（3）document的特殊属性 ① document.body ② document.head ③ document.title ④ document.documentElement =>获取HTML
（1）选择器（class属性）操作样式 class是关键字，所以在dom对象中，对应的是className属性
object.className = classname // 修改class属性的属性值（2）行内样式（style属性）操作样式 ① style为标签中的固有属性，dom对象中也有该属性 ② dom对象中style属性值是一个对象 ③ style对象存储着元素的所有的行内样式 ④ style去获取样式，只会获取到行内样式 ⑤ style去设置样式，设置的也是行内样式
element.style.width = 100px // 修改元素的宽度节点：任何内容（标签，属性，注释，文本） 节点常用属性： ① nodeType：节点类型，数字表示，元素（标签）节点的值为1 ② nodeName：节点名称 ③ nodeValue：节点值 （1）节点的查找 childNodes：子节点 children：子元素 firstChild：第一个子节点 firstElementChild：第一个子元素 lastChild：最后一个子节点 lastElementChild：最后一个子元素
previousSibling：上一个兄弟节点 previousElementSibing：上一个兄弟元素 nextSibling：下一个兄弟节点 nextElementSibling：下一个兄弟元素
parentNode：父节点、父元素
children和querySelectorAll的区别： ① children获取的元素是动态的集合，随着元素的增加或删除，获取的元素是会发生改变的； ② querySelectorAll获取的元素是静态集合，随着元素的增加或删除，获取的元素是不会发生改变的
（2）添加节点 ① parent.appendChild(child) // 类似剪切的效果 parent:：指定的父元素 child：指定的子元素，添加到父元素最后面 ② parent.insertBefore(child, refChild) // 俩个参数都必须写 parent：父元素 child：需要添加的节点 refChild：添加在该参数的签名
var box = document.querySelector('#box'); // 获取父元素 var h2 = document.querySelector('h2'); var p = document.querySelector('p'); box.insertBefore(p, h2); // 将p元素添加到h2元素前面共同点：这俩个方法必须是父元素去调用
（3）克隆节点 语法：node.cloneNode(deep) node：克隆的节点 deep：布尔类型的值 true：表示深拷贝（拷贝标签及标签里面的标签和内容） false：克隆出来的元素，在内存中（需要自己添加到页面） 注意：克隆出来的元素，需要对克隆出来的元素做id修改
var p = document.querySelector('p'); var newP = p.cloneNode(true); newP.id = 'box2'; // 修改克隆元素id（4）删除节点 语法：parent.removeChild(child) 该方法必须由parent父元素去调用，参数为需要删除的子元素。
removeChild和display : none;的区别： display : none;只是看不见了，在dom树中还是存在的
（5）创建节点 ① document.write() 不用，会重新加载文档流 ② innerHTML 可创建标签节点(通过识别内容里的标签） 存在覆盖问题，会把标签之前的内容给覆盖掉； 存在效率问题，innerHTML在操作量大了以后性能下降 存在安全问题，XSS攻击 ③ createElement(tagName) 常用 语法：document.createElement(tagName); 参数：标签名 返回值：创建好的标签，存在内存中
var box = document.querySelector('#box'); // 获取父元素 var h1Node = document.createElement('h1'); h1Node.innerText = '这是设置的内容'; box.appendChild(h1Node); // 在box标签后面内添加创建的h1标签