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   

 <script>
function isMobile() {
var ua = navigator.userAgent;
if(ua.indexOf("Mobile") != -1){
return true;
}
return false;
}
if( isMobile() ){
location.href = 'http://www.cnblogs.com/paradise-zzz/'
}else {
alert("请使用手机浏览!");
}
</script>

  d.node

    nodeType          //返回节点类型(元素节点1,属性节点2)

    childNodes        //返回子节点集合

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

    firstChild         //返回首个子节点

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

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

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

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

    removeChild()       //删除

    replaceChild(new,old)      //替换

关于DOM与BOM的总结的更多相关文章

  1. javascript、ECMAScript、DOM、BOM关系

    ECMAScript,正式名称为 ECMA 262 和 ISO/IEC 16262,是宿主环境中脚本语言的国际 Web 标准. ECMAScript 规范定义了一种脚本语言实现应该包含的内容:但是,因 ...

  2. 理清javascript的相关概念 DOM和BOM

    javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异.JavaScript=语法+BOM(含DOM) ...

  3. JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)

    本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param ...

  4. 第六十九天 dom与bom

    1.节点 dom与bom属 // DOM:文档对象模型 =>提高给用户操作document obj的标准接口 // DOM:以document为根,树状展开所有子节点 节点分类 // 节点分类: ...

  5. 【JavaScript】DOM和BOM之我的理解

    2018年12月17日 一.我们能够对html文档和浏览器做的操作 (一)html文档 增.删.改.可以在html中增加.删除.改动元素 (二)浏览器 地址栏:输入.修改地址 历史记录:前进.后退.跳 ...

  6. 前端基础之DOM和BOM

    前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...

  7. Javascript的组成——EMACScript、DOM、BOM

    EMACScript:一种规范,JS必须准守它的约定,JS的核心. DOM:文档对象模型,W3C标准,JS访问HTML文档的接口. BOM:浏览器对象模型,没有统一的标准.JS访问浏览器的接口. EM ...

  8. ECMAscript,DOM,BOM哪个比较重要

    ECMA > DOM > BOM ECMA是JS的核心,语法.变量.对象.各种对象的API.作用域.原型链.闭包.This指向.构造函数等等必须要熟练,有了这些基础你才能去熟练的操作DOM ...

  9. day 52 js学习 DOM 和BOM

    前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  10. DOM 和 BOM

    DOM 和  BOM DOM: DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.换句话说,这是表示和处理一个H ...

随机推荐

  1. 学习总结:libevent--简单入门

    libevent--简单入门 一.简介 libevent是一个c语言写的事件驱动库,轻量级,专注于网络,跨平台特性好,支持多种 I/O 多路复用.支持I/O,定时器和信号等事件,允许设置注册事件优先级 ...

  2. MySQL时间差返回月个数

    select PERIOD_DIFF(date_format(now(),'%Y%m'),date_format('2010-11-30','%Y%m')) 1. MySQL 为日期增加一个时间间隔: ...

  3. ZooKeeper集群的安装、配置、高可用测试

    Dubbo注册中心集群Zookeeper-3.4.6 Dubbo建议使用Zookeeper作为服务的注册中心. Zookeeper集群中只要有过半的节点是正常的情况下,那么整个集群对外就是可用的.正是 ...

  4. PowerShell 异常处理

    在使用 PowerShell 的过程中,发现它的异常处理并不像想象中的那么直观,所以在这里总结一下. Terminating Errors 通过 ThrowTerminatingError 触发的错误 ...

  5. 解决svn--Unable to connect to a repository at URL ‘https://xxxxxx’ 问题

    在checkout项目时,出现如下错误: Error  Unable to connect to a repository at URL 'https://XXXX' Error  Access to ...

  6. z-index是什么样式?

    称作层级样式表 通过 z-index样式,设置重叠样式 z-index 垂直屏幕的层级,数字越大,越上层,可以设置多层样式,效果是俯览 需要联合  position: relative; positi ...

  7. sublime markdown编辑配色

    Boxy package control : install package 选择Boxy theme preferences->settings配置: { "color_scheme ...

  8. HTML5 拖放(Drag 和 Drop)详解与实例

    简介 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 先点击一个小例子:在用户开始拖动 <p> 元素时执行 JavaSc ...

  9. spring boot热部署

    1.pom配置 参考:http://412887952-qq-com.iteye.com/blog/2300313 2.intellij配置 参考:http://blog.csdn.net/wjc47 ...

  10. File类中的list和listFiles方法

    File类中的list和listFiles方法 list()方法是返回某个目录下的所有文件和目录的文件名,返回的是String数组 listFiles()方法是返回某个目录下所有文件和目录的绝对路径, ...