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. JS中获取session中传过来的值对象

    摘录自:http://www.360doc.com/content/11/0316/13/5790498_101627263.shtml 把某一对象置于session范围内,并在JSP页面中提取ses ...

  2. 使用 IDEA和Maven 整合SSH框架

    1.创建web工程 一路next 下去就行.完成后,IDEA会自动构建maven工程. 2.创建如下项目结构 需要将 java文件夹设置为SourcesRoot目录,否则无法创建package 设置操 ...

  3. python文件操作总结

    python中对文件.文件夹(文件操作函数)的操作需要涉及到os模块和shutil模块. 得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd() 返回指定目录下的所有文件和目 ...

  4. linux 3.10的kdump配置的小坑

    之前在2.6系列linux内核中,当发现某个模块不要在保留内核中加载的时候,可以通过blacklist参数将其在/etc/kdump.conf中屏蔽 blacklist <list of ker ...

  5. python2.7.5 安装pip

    1 先安装setuptools 下载地址:https://pypi.python.org/pypi/setuptools#downloads 将下载后的tar文件解压,用CMD模式进入到解压后的文件所 ...

  6. CentOS如何把deb转为rpm

    说明:可以转换,但不一定可用,可以根据报错提示,安装需要的依赖. 1 安装alien工具,下载地址http://ftp.de.debian.org/debian/pool/main/a/alien/ ...

  7. linkin大话设计模式--简单工厂

    linkin大话设计模式--工厂方法 什么是工厂方法:将多个类对象交给工厂来生成的设计被称为简单工厂模式,个人认为主要是为了实现解耦,在代码重构的时候会很重要. 代码如下: public class ...

  8. 邪恶的PLS

    今天碰到一个存储过程编译错误,提示PLS-00103错误,关于这个错误网上能搜到一大把,原因很多,我碰到的错误提示如下: Compilation errors for PROCEDURE ETL.PR ...

  9. hibernate 持久化对象的三个状态

    Hibernate中的对象有3种状态 瞬时对象(TransientObjects).持久化对象(PersistentObjects)和离线对象(DetachedObjects也叫做脱管对象) Tran ...

  10. Unity AssetBundle 游戏资源分类及关系

    --刚刚做完一个xlua的的热更项目,对AssetBundle资源分类总结一下.纯理论,闲谈知识,要是有建议,尽管提 ,不掺杂代码. --这里说说,AB是如何打包,如果下载,如何加载. 1.关键词理解 ...