关于DOM与BOM的总结

1.什么是BOM，什么是DOM(基本概念)

BOM:　　Browers Object MOdel           浏览器对象模型　　

DOM:　　Document Object MOdel        文档对象模型

2.深入理解BOM与DOM

　　a.BOM与DOM可以理解为一个接口

　　　BOM：让我们使用编程语言控制浏览器行为（跳转，前进，后退,获取屏幕大小 等）；

　　　DOM：让我们使用编程语言操作HTML内容（添加元素，修改元素，删除元素）；

　　b.BOM没有相关标准，DOM遵循W3C

　　c.BOM的根本对象为Windows，DOM根本对象是document　(windows.document)

　　d.BOM与DOM的关系

　　　

3.BOM和DOM对象用法小总结

　　a.windows

　　　　windows.moveTo(100,100);　　　　//移动到指定坐标（针对左上角）

　　　　windows.moveBy(100,200);　　　　//移动指定像素（针对初始位置）

　　　　windows.resizeTo(300,300);　　　   //将窗口调整为指定宽高

　　b.location

　　　　location.protocal　　　　//返回url协议

　　　　location.host　　　　　  //返回当前url的主机名和端口号（www.xxx.com）

　　　　location.hostname　　　//返回当前url的主机名（xxx.com）

　　　　location.port　　　　　  //返回当前url的端口部分(若为默认的80则无返回)

　　　　location.href　　　　　  //跳转

　　c.navigator

　　　　navigator.userAgent　　//声明浏览器用于HTTP请求的用户代理头的值

　　　　重点：利用该属性判断用户使用的是pc还是mobile　　　

 1 <script>
 2         function isMobile() {
 3             var ua = navigator.userAgent;
 4             if(ua.indexOf("Mobile") != -1){
 5                 return true;
 6             }
 7             return false;
 8         }
 9         if( isMobile() ){
10             location.href = 'http://www.cnblogs.com/paradise-zzz/'
11         }else {
12             alert("请使用手机浏览！");
13         }
14     </script>

　　d.node

　　　　nodeType　　　　　　　　  //返回节点类型（元素节点1，属性节点2）

　　　　childNodes　　　　　　　　//返回子节点集合

　　　　children　　　　　　　　　 //非标准属性返回指定元素子节点集合（只返回html节点，不返回文本节点，通常和innerHtml结合使用　　ps:返回注释节点）

　　　　firstChild　　　　　　　　　//返回首个子节点

　　　　nextSibling　　　　　　　　//返回该元素节点的下一个兄弟节点（中间不能有空格，因为空格被算作文本节点　　ps:回车也不行）

　　　　nextElementSibling　　　　 //返回该元素节点的下一个元素兄弟节点（这个可以有空格回车什么的）

　　　　appendChild()　　　　　　 //添加（从列表尾部开始）

　　　　insertBefore()　　　　　　  //添加（从列表头部开始）

　　　　removeChild()　　　　　　 //删除

　　　　replaceChild(new,old)　　    //替换

转载于:https://www.cnblogs.com/paradise-zzz/p/8462429.html