六 BOM 和 DOM
1.BOM 浏览器对象
与浏览器交互的方法和接口
-
window对象
alert
confirm
prompt
open
close
-
window内置对象
history
history.go() 函数 -- 前进或后退指定的页面数 history.go(-1) 后退 history.go(0) 刷新 history.go(1) 前进 history.back() 函数 -- 后退一页 history.forward() 函数 -- 前进一页location
location常用属性和方法: location.href 属性 -- 返回当前文档的完整URL或设置当前文档的URL(常用于实现页面跳转) location.href = 'http://www.baidu.com';; location.reload() 刷新页面 location.reload(true) 函数 -- 刷新页面 （清除缓存）navigator
navigator中最重要的是userAgent属性，返回包含浏览器版本等信息的字符串 ，常用于判断浏览器版本及使用设备（PC或者移动端) -
window事件
window.onload 事件
window.onload = function(){ } 当所有的资源加载完毕以后再执行的一些代码， 唯一性，只能出现一window.onscroll 事件
1、滚动条事件 onscroll window.onscroll = function(){ //页面滚动时做什么事（高频率触发 ） } 2、获取滚动条的距离 1、距离顶部的距离（常用），存在兼容性 1、document.documentElement.scrollTop 2、document.body.scrollTop 元素.scrollTop 2、距离左边的距离（不常用） 1、document.documentElement.scrollLeft 2、document.body.scrollLeft //chrome2.DOM
-
DOM的基本操作(自查/修改/创建/删除)
1.访问/获取节点 document.getElementById(id);           //返回对拥有指定id的第一个对象进行访问 document.getElementsByName(name);       //返回带有指定名称的节点集合   注意拼写:Elements (不常用) document.getElementsByTagName(tagname);    //返回带有指定标签名的对象集合  注意拼写：Elements document.getElementsByClassName(classname); //返回带有指定class名称的对象集合 注意拼写：Elements （IE8以下不兼容） ES5：新增获取元素： document.querySelector(); //获取单个元素 类名 例：document.querySelector(" .box ") document.querySelector(" #id > .box ") ( IE8以下不兼容，不包括IE8 ) document.querySelectorAll() //获取对应的全部元素 返回数组 ， 父节点.parentNode属性返回某个节点的父节点。 2.创建节点/属性 document.createElement(eName);   //创建一个元素节点 document.createTextNode(text);    //创建文本节点 3.添加节点 父节点.appendChild(newNode);         //给某个节点添加子节点 4.复制节点 cloneNode(true | false);  //复制某个节点 参数：是否复制原节点的所有后代(如果为true则会复制子节点) 5.删除节点 父节点.removeChild(node);  //删除某个节点的子节点 node是要删除的节点(通过父节点删除子节点) 父节点.remove() ; //删除节点 -
DOM 元素类型
childNodes childNodes 属性返回节点的子节点集合，以 NodeList 对象。 childNodes和children的区别 childNodes 包括元素节点,也包括文本节点 children 只能获取元素节点 对于浏览器来讲， 标签和文本都可以看做整个文档(DOM)树上的一个节点。 节点一共分为3种类型： 1 元素节点 <span></span> <span></span> 2 属性节点 <span id="xxxx"></span> 3 文本节点 <span>xxxxxx</span> 通过nodeType这个属性查看节点的类型 nodeType == 1 元素 nodeType == 2 属性 nodeType == 3 文本节点 -
高级获取
1/查找节点 父元素.firstChild;  //获取第一个节点，包括文本节点（ie8及以下不会获取到文本节点） 父元素. lastChild;  //获得一个节点的最后一个节点，与firstChild一样也可以进行递归使用 parentObj.lastChild.lastChild..... 父元素.firstElementChild //获取第一个元素节点 父元素.lastElementChild //获取最后一个元素节点 2/获取相邻的节点 curtNode.previousSibling; //获取已知节点的相邻的上一个节点（可以获取到文本节点） curtNode.previousElementSibling (获取相邻的上一个元素节点) curtNode.nextSibling;   // 获取已知节点的下一个节点(可以获取文本节点) curtNode.nextElementSibling; // 获取已知节点的下一个元素节点 3/替换节点 replaceChild(newNode,oldNode); 4/ownerDocument 获取该节点的根节点，相当与 document 5/attributes 获取当前元素节点的所有属性节点集合 扩展： document.getElementById('box').attributes // 获取所有，该节点的属性信息； document.getElementById('box').attributes.length;//返回属性节点个数 document.getElementById('box').attributes[0]; //返回第一个属性节点 document.getElementById('box').attributes[0].nodeType; //2，属性 document.getElementById('box').attributes[0].nodeValue; //属性值 document.getElementById('box').attributes['id']; //返回属性为 id 的节点 -
自定义属性(getAttribute)
1、什么是自定义属性？ 用户自己定义的属性（元素本身没有的） 常用于保留数据 2、标签中的自定义属性 一般自定义属性使用data-开头 <div data-url="imgs/large.jpg"></div> 自定义属性不能通过元素直接访问 元素.属性名 3、js中的自定义属性 获取 元素.getAttribute('data-url') 设置： 节点.setAttribute('属性名称'，’修改后的属性值‘) 删除 元素.removeAttribute('data-url')
-
-
innerHTML /innerText
innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 -
获取和设置行间样式(不熟)
获取: 元素.属性 (元素.innerHTML)(元素.className) 自定义属性: 元素.getAttribute('属性') 元素.getAttribute('data-url') 设置: 元素.属性 = 属性值 节点.setAttribute('属性名称','修改后的属性值') -
获取非行间样式(兼容问题)
css样式设置: 第一种方法: 节点.style.属性 = '属性值' 第二种方法: 通过类名添加样式 节点.className = 'box'; 第三种方法: 通过cssText添加样式 节点.style.cssText ="border:4px solid blue"; 获取非行间样式 getComputedStyle(元素,null).属性; //存在兼容问题 对象.currentStyle[attr](对象.currentStyle.属性) //针对ie的 -
insertBefore
insertBefore() 方法在您指定的已有子节点之前插入新的子节点。 语法: 父节点.insertBefore(new,node) console.log(oS.insertBefore(createP,aDiv[1])); -
文档碎片
var fragment = document.createDocumentFragment(); fragment 是一个对空文档对象 DocumentFragment 对象的引用。 -
offetWidth
offsetWidth 这个宽度包括border和padding值 offsetHeight offsetLeft (距离左侧的距离值left+margin值) offsetTop (距离左侧的距离值top+margin值) offsetParent 拓展: clientWidth clientHeight (不包括border不包括滚动条 ) clientLeft clientTo（获取的值就是border的单边的宽度 ）
