关于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 ...
随机推荐
- 使用pscp命令在Windows与linux之间拷贝文件
在Linux环境下做开发时,我们可能会在windows下远程控制Linux系统,本文介绍如何使用putty的pscp.exe在Windows和 Linux(本文使用fedora)之间copy文件. 工 ...
- Vuejs实例-00Vuejs2.0全家桶结合ELementUI制作后台管理系统
Vuejs2.0全家桶结合ELementUI制作后台管理系统 0: 系统环境的介绍 1: Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目 2: Vuejs实例-02Vue.js项目集 ...
- label+input实现开关切换效果
Document 主要使用label+input来实现改变left的值,下面是核心代码,意思就是选中的input的兄弟节点.box下的.switch-btn元素的left会变成0px(原来是-37px ...
- 新手数据比赛中数据处理方法小结(python)
第一次参加,天池大数据竞赛(血糖预测),初赛排名1%.因为自己对python不熟悉,所以记录一下在比赛中用到的一些python方法的使用(比较基础细节,大佬绕道): 1.数据初探 data.info( ...
- linux mysql 忽略大小写
修改/etc/my.cnf 2)在[mysqld]下加入一行:lower_case_table_names=1 3)重新启动数据库即可.
- python3 第十九章 - 写一个10进制转任意进制的函数
我们先回忆下之前所学的进制转换的知识(详见:第十章),10进制转其它进制的方法是: 整数部分,除基取余,逆序排列 小数部分,乘基取整,顺序排列 负数,按绝对值处理 好,假设我们需要转化的数都是正整数, ...
- js中的监听事件总结
javascript事件与功能说明大全:http://tools.jb51.net/table/javascript_event 1.滚动条监听事件 例1:监听滚动条距离页面顶端距离 <scri ...
- redis动态配置
Config get CONFIG GET parameter CONFIG GET 命令用于取得运行中的 Redis 服务器的配置参数(configuration parameters),在 Red ...
- mysql添加用户和密码
首先要声明一下:一般情况下,修改MySQL密码,授权,是需要有mysql里的root权限的. 注:本操作是在WIN命令提示符下,phpMyAdmin同样适用. 用户:phplamp 用户 ...
- Codeforce A. Quasi-palindrome
A. Quasi-palindrome time limit per test 1 second memory limit per test 256 megabytes input standard ...