关于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 ...
随机推荐
- mdb文件怎么打开
(一)mdb格式的文件可以用MS Access打开编辑,也可以用Excel打开只能浏览. (二)mdb是什么文件格式 就像word的doc文件格式,mdb文件格式是Access数据库文件,微软Off ...
- js动态生成二维码
一.使用jquery.qrcode生成二维码 1.首先在页面中加入jquery库文件和qrcode插件 <script type="text/javascript" src= ...
- [field:softlinks/]逻辑过程
在plus/download.php 在dededln\include\taglib\channel\softlinks.lib.php
- CSAPP 第二章随笔
类型转换问题 (1)int -> short 二进制位高位截断,低位保持不变 (2)同类型 unsign -> sign 记住二进制位是不变的 (3)P101页提到的编译器乘法优化问题,一 ...
- 一.初识java
1.框架结构 2.main方法 3.转义符 public class Dome01 { public static void main(String[] args) { //main方法, ...
- dotnetcore vue+elementUI 前后端分离架二(后端篇)
前言 最近几年前后端分离架构大行其道,而且各种框架也是层出不穷.本文通过dotnetcore +vue 来介绍 前后端分离架构实战. 涉及的技术栈 服务端技术 mysql 本项目使用mysql 作为持 ...
- HTML学习(二)
表格和列表 <!-- /* @dl→definition list(定义列表),ul→unordered list(无序列表),ol→ordered list * @一个完整的表格.table. ...
- junit4X系列源码--总体介绍
原文出处:http://www.cnblogs.com/caoyuanzhanlang/p/3530267.html.感谢作者的无私分享. Junit是一个可编写重复测试的简单框架,是基于Xunit架 ...
- 网络编程之UDP编程
网络编程之UDP编程 UDP协议是一种不可靠的网络协议,它在通信的2端各建立一个Socket,但是这个Socket之间并没有虚拟链路,这2个Socket只是发送和接受数据的对象,Java提供了Data ...
- Linkin大话eclipse快捷键
刚来这家公司的时候,作为菜鸟的我在帮别人调试代码的时候,有人说我快捷键使用的很熟悉. 呵呵,工欲善其事必先利其器,以下这些快捷键是最常用的也是要必须记住的. [Ctrl开头] Ctrl+1:快速修复 ...