关于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 ...
随机推荐
- LAMP和LNMP,你更愿意选择谁,为什么?
https://www.zhihu.com/question/19697826 http://www.simongong.net lamp 的全称是linux + apache + mysql +ph ...
- WatchKit编程指南:Watch Apps--文本、标签以及图片
文本和分类标签 为了在Watch app中展示文本,使用标签对象.分类标签支持格式化的文本,可以在运行时被程序修改. 要添加标签到界面控制器,可以把它拖到对应的故事版场景(storyboard),在这 ...
- div流加载
var hasNext=true;//触发开关,防止多次调用事件 var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度) var nScrollTop = 0; //滚动 ...
- docker结合jenkins、gitlab实现.netcore的持续集成实践
本文的目标是实现下图基于ASP NET Core的实践 运行环境 Cent OS 7 vs code .net core cmder 运行docker,设置docker镜像加速器,不然国内下载imag ...
- socket编程--相关函数--sendto();read();
{1} 头文件:#include <sys/types.h> #include <sys/socket.h>定义函数:int sendto(int s, const voi ...
- 006-接收键盘的输入(read)
read -ptns 变量名 -p 在等待read输入的时候,显示的提示信息 -t 秒数,read等待用户输入的时间 -n read接收用户输入的字符数,只接收指定字符数,就会执行 -s 隐藏输 ...
- javaweb后台转码
为什么需要转码? 客户端向服务器发送请求的四种情况:1.URL方式直接访问;2.页面链接(属于get请求);3.表单get提交;4.表单post提交 1.url(url和页面链接):各大浏览器.各个操 ...
- Linux指令--which,whereis,locate,find
原文出处:http://www.cnblogs.com/peida/archive/2012/12/05/2803591.html.感谢作者无私分享 which 我们经常在linux要查找某个文件,但 ...
- js promise看这篇就够了
一.背景 大家都知道nodejs很快,为什么会这么快呢,原因就是node采用异步回调的方式来处理需要等待的事件,使得代码会继续往下执行不用在某个地方等待着.但是也有一个不好的地方,当我们有很多回调的时 ...
- java存放数据的5个地方
1.寄存器:最快的存储区,位于处理器内部,但是寄存器的数量极其有限,所以寄存器根据需求进行分配,你不 能直接控制,也不能在程序中感觉到寄存器存在的任何迹象.(C/C+允许向寄存器建议寄存器配, 但它不 ...