BOM和DOM和ECMAscript的关系：
BOM是运行平台，BOM规则建立在ECMAscript的规则之上
DOM是运行在平台上的页面
ECMAscript是用来操作平台或运行在平台上的页面的工具
BOM:浏览器对象模型(Browers Object MOdel)
window是js中的顶层对象，所有的全局都属于window;window窗口：提供了浏览器的窗口之间的操作。
window对象的常见方法：
alert(要显示的文本); 弹出信息框
prompt(提示对话框信息); 弹出输入框，点击确定，返回字符串，点击取消，返回null
confirm(提示文字); 点击确定返回true，点击取消返回false
open(url,name,feature,replace);
open('http://www.baidu.com','_blank','width=300,height=300')
//谷歌会默认把系统自动打开的新网页阻止掉，但不阻止通过事件打开的网页
close();关闭浏览器。
window对象下内置的子对象：
history对象：该对象包含浏览器访问过的url。
该对象的属性：
history.length;返回历史记录的数量
该对象的方法：
history.back();后退，加载前一个url。
history.forward();前进，需要后退一下之后，才有前进的方向
history.go(num);参数为正，前进相应的数目，为负，后退相应的数目，为0，刷新
location对象：包含当前url的相关信息，而history对象不能具体反映url的相关信息。
该对象的属性：
location.href;设置或返回完整的url
location.search;返回url?后面的查询部分
location.hash;是一个可读写的字符串，是url的锚部分（从#开始的部分）哈希
该对象的方法：
location.reload();刷新页面的方法，一般情况下，传递一个true，不使用缓存刷新。缓存？
location.assign(url);加载新页面，当url为空字符时，加载当前页面
window.onload / onscroll／onresize 事件
onload当文档加载完成后执行一些操作
1 window.onload = function(){ 2 console.log("页面加载完成") 3 }
onscroll当页面发生滚动时执行一些操作
1 window.onload = function(){ 2 console.log(1) //当页面发生滚动时，打印1 3 }
onresize当窗口大小发生改变时执行一些操作
1 window.onresize = function(){ 2 console.log(1) //当窗口大小发生改变时，打印1 3 }
DOM：文档对象模型(Document Object MOdel )
改变元素的内容(innerHTML)，属性(value)，样式(width,height,background)
DOM中的选择器
元素节点选择器：
id:返回的是单个对象;document.getElementById( )
class：返回的是数组对象，如果要使用其中的元素，通过索引解析；document.getElementsByClassName( )
tagname：返回的是数组对象，如果要使用其中的元素，通过索引解析;document.getElementsByTagName( )
name:返回的是数组对象，如果要使用其中的元素，通过索引解析;document.getElementsByName( )
querySelector：返回的是单个对象;document.querySelector( )
querySelectorAll：返回的是数组对象，如果要使用其中的元素，通过索引解析;document.querySelectorAll( )
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>选择器</title> 7 </head> 8 <body> 9 <div id="box">1</div> 10 <div id="box">2</div> 11 <div id="box">3</div> 12 <div class="msg"> 13 <div class="sbox"> 14 <h2>标题3</h2> 15 <h2>标题4</h2> 16 </div> 17 <h2>标题1</h2> 18 <h2>标题2</h2> 19 20 </div> 21 <div class="cont">4</div> 22 <div class="cont">5</div> 23 <div class="cont">6</div> 24 <span>7</span> 25 <span>8</span> 26 <span>9</span> 27 <input type="text" name="user"> 28 <input type="text" name="user"> 29 <input type="text" name="pass"> 30 </body> 31 <script> 32 //id 33 var box = document.getElementById("box"); 34 console.log(box); 35 //class 36 var acont = document.getElementsByClassName("cont"); 37 console.log(acont); 38 console.log(acont[0]); 39 console.log(acont[0].innerHTML); 40 console.log(acont.innerHTML); 41 //tagName 42 var aspan = document.getElementsByTagName("span"); 43 console.log(aspan); 44 console.log(aspan[0]); 45 //name 46 var auser = document.getElementsByName("user"); 47 console.log(auser); 48 //querySelector 49 var ele = document.querySelector("#box"); 50 var ele = document.querySelector(".cont"); 51 var ele = document.querySelector("span"); 52 var ele =document.querySelector(".msg h2"); 53 var ele =document.querySelector(".msg>h2") 54 console.log(ele); 55 //querySelectorAll 56 var ele = document.querySelectorAll("#box"); 57 var ele = document.querySelectorAll(".cont"); 58 var ele = document.querySelectorAll("span"); 59 var ele = document.querySelectorAll(".msg h2"); 60 var ele = document.querySelectorAll(".msg>h2"); 61 console.log(ele); 62 // 父选子：获得子元素节点的集合，不包含空白节点 63 var omsg = document.querySelector(".msg"); 64 console.log(omsg.children); 65 // 子选父：获得父元素节点 66 var osbox = document.querySelector(".sbox"); 67 console.log(osbox.parentNode); 68 // 第一个子 69 var omsg = document.querySelector(".msg"); 70 console.log(omsg.firstElementChild) 71 // 最后一个子 72 var omsg = document.querySelector(".msg"); 73 console.log(omsg.lastElementChild) 74 // 上一个兄弟 75 var omsg = document.querySelector(".msg"); 76 console.log(omsg.previousElementSibling) 77 // 下一个兄弟 78 var omsg = document.querySelector(".msg"); 79 console.log(omsg.nextElementSibling) 80 </script> 81 </html>
其他节点选择器：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <span>qwe</span> 11 <div class="box"><span>1</span> 12 <p>2</p> 13 hello 14 <!-- 这是注释 --> 15 <em>3</em> 16 </div> 17 <span>zxc</span> 18 </body> 19 <script> 20 // 其他节点选择器: 21 // 关系： 22 // 父选子：获得所有子节点的集合，包括空白节点 23 // var obox = document.querySelector(".box") 24 // console.log(obox.childNodes) 25 // 上一个兄弟： 26 // var obox = document.querySelector(".box") 27 // console.log(obox.previousSibling) 28 // 下一个兄弟： 29 // var obox = document.querySelector(".box") 30 // console.log(obox.nextSibling) 31 // 第一个子： 32 // var obox = document.querySelector(".box") 33 // console.log(obox.firstChild) 34 // 最后一个子： 35 var obox = document.querySelector(".box") 36 console.log(obox.lastChild) 37 </script> 38 </html>
DOM属性的基本操作：
元素的属性：内置、非内置
非内置属性需要通过一些节点的方法进行操作，注意：节点的方法，前缀一定是节点
getAttribute() ：获取 元素的属性
setAttribute()：设置／修改 元素的属性，低版本的IE不兼容;接收两个参数，属性名和属性值
removeAttribute()：删除 元素的属性，低版本的IE不兼容
节点：
通过遍历所有子节点，将空白节点过滤掉，得出所有的元素节点；
文档节点：整个文档；ownerDocument：获取该节点的文档根节点，相当与 document
元素节点：每个HTML标签
文本节点：包含在HTML元素中的文本
属性节点：每一个HTML属性；attributes：获得所有属性节点，返回一个数组
注释节点：注释
节点类型(nodeType) 节点名字(nodeName) 节点值(nodeValue)
元素节点 1 标签名 null
文本节点 3 #text 文本
注释节点 8 #comment 注释的文字
文档节点 9 #document null
属性节点 2 属性名 属性值
DOM元素的基本操作
创建：createElement() 配合 appendChild() 将创建好的元素，插入到某个标签内的最后
删除：removeChild() 配合 parentNode； remove() 直接删除当前元素
document.body.removeChild(div)；
样式：
1 获取非行内样式（兼容问题） 2 function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值 3 if(obj.currentStyle){ //针对ie获取非行间样式 4 return obj.currentStyle[attr]; 5 }else{ 6 return getComputedStyle(obj,false)[attr]; //针对非ie 7 }; 8 };
尺寸类样式：
clientWidth/clientHeight：可视内容区域的宽高
scrollWidth/scrollHeight：包括滚动区域的宽高
offsetWidth/offsetHeight：可视边框区域的宽高
offsetLeft/offsetTop：元素相对于包含块偏移的位置
scrollLeft/scrollTop：滚动的left和top
offsetParent：获取当前元素的包含块