关于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
<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的总结的更多相关文章
- javascript、ECMAScript、DOM、BOM关系
ECMAScript,正式名称为 ECMA 262 和 ISO/IEC 16262,是宿主环境中脚本语言的国际 Web 标准. ECMAScript 规范定义了一种脚本语言实现应该包含的内容:但是,因 ...
- 理清javascript的相关概念 DOM和BOM
javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异.JavaScript=语法+BOM(含DOM) ...
- JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)
本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param ...
- 第六十九天 dom与bom
1.节点 dom与bom属 // DOM:文档对象模型 =>提高给用户操作document obj的标准接口 // DOM:以document为根,树状展开所有子节点 节点分类 // 节点分类: ...
- 【JavaScript】DOM和BOM之我的理解
2018年12月17日 一.我们能够对html文档和浏览器做的操作 (一)html文档 增.删.改.可以在html中增加.删除.改动元素 (二)浏览器 地址栏:输入.修改地址 历史记录:前进.后退.跳 ...
- 前端基础之DOM和BOM
前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...
- Javascript的组成——EMACScript、DOM、BOM
EMACScript:一种规范,JS必须准守它的约定,JS的核心. DOM:文档对象模型,W3C标准,JS访问HTML文档的接口. BOM:浏览器对象模型,没有统一的标准.JS访问浏览器的接口. EM ...
- ECMAscript,DOM,BOM哪个比较重要
ECMA > DOM > BOM ECMA是JS的核心,语法.变量.对象.各种对象的API.作用域.原型链.闭包.This指向.构造函数等等必须要熟练,有了这些基础你才能去熟练的操作DOM ...
- day 52 js学习 DOM 和BOM
前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
- DOM 和 BOM
DOM 和 BOM DOM: DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.换句话说,这是表示和处理一个H ...
随机推荐
- Linux中ctrl+z 、ctrl+c、 ctrl+d区别
ctrl+c,ctrl+d,ctrl+z在linux程序中意义和区别 ctrl+c和ctrl+z都是中断命令,但是他们的作用却不一样. ctrl+c是强制中断程序的执行,,进程已经终止. ct ...
- dedecms后台系统基本参数标题
1,站点设置 2,核心设置 3,附件设置 4,会员设置 6,性能选项 7,其它选项 8,模块设置 在E:\wamp\www\dededln\back\inc\configgroup.txt
- 【WebApi系列】浅谈HTTP
[01]浅谈HTTP在WebApi开发中的运用 [02]聊聊WebApi体系结构 [03]详解WebApi如何传递参数 [04]详解WebApi测试和PostMan [05]浅谈WebApi Core ...
- 风险案例-28期-项目Leader与团队成员缺乏沟通,问题响应度较慢导致团队士气低落,工作效率低
典型案例: A公司某C类项目目前进入开发高峰期,项目组的三个leader预计在项目的实际task投入占比为70%,剩30%工作时间用于指导组员进行作业实施并担当部分管理工作.从项目实施过程中发现Lea ...
- @RequestMapping 相关 spring
* * @param request HttpServletRequest * @param delList 削除Idエスト * @return 削除結果 * @th ...
- 5分钟把任意网站变成桌面软件--windows版
本文源自于segmentfault的一篇专栏文章:https://segmentfault.com/a/1190000012924855 只不过这篇是MAC版本的,所以我试了下windows版的: ...
- scss 初学笔记 三 继承
//继承 .btn{ padding: 4px 10px; font-size: 14px; } .primary{ background:red; @extend .btn; } //%placeh ...
- Azure Powershell使用已有特殊化非托管磁盘创建ARM虚拟机
生成已有特殊化非托管磁盘的方法主要有如下两种: 1.使用StorageExplorer存储管理工具,复制特殊化磁盘到一个新的容器下 2.New Portal中删除虚拟机,默认vhd文件会保留在存储账号 ...
- nginx添加编译lua模块
一 .安装LuaJit 1.下载LuaJit # wget http://luajit.org/download/LuaJIT-2.0.5.tar.gz 2.编译安装 # tar xzvf LuaJI ...
- python_求1-2+3-4+......-100的值
求1-2+3-4+5---100 = ? 逻辑整理: -- 本质上可以转换一下,1+3+5+--+99 -(2+4+--+100) 加减部分间隔都为2,先求1+3+5+--+99的值, 再求2+4+- ...