javascript--DOM概念
BOM概念
BOM : Browser Object Model 浏览器对象模型,描述与浏览器进行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用javascript,那么 BOM则无疑才是真正的核心。
BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。
由于浏览器提供商会按照各自的想法随意去扩展它,使得BOM缺乏一定的规范,于是 浏览器之间共有的对象成为了事实上的标准。
window对象介绍
BOM 的核心对象是 window ,它表示浏览器的一个实例。在浏览器中, window对象有双 重角色,它既是通过 JavaScript 访问浏览器窗口的一个接口,又是ECMAScript 规定的 全局(global)对象。这意味着在网页中定义的任何一个对象、变量和函数,都以 window 作 为其Global 对象,因此有权访问parseInt()等方法。
与document的关系(扩展)
当浏览器下载到一个网页,通常是 HTML,这个HTML就叫 document(当然,这也是DOM 树中的一个 node),document通常是整个DOM 树的根节点。这个 document 包含了标 题(document.title)、URL(document.URL)、(document.body)等属性,可以直接在 JS 中 访问到。
DOM 是为了操作文档出现的 API,document 是其的一个对象;
BOM 是为了操作浏览器出现的 API,window 是其的一个对象。
window内置对象(location/history/navigator)及方法
location对象
n href属性 控制浏览器地址栏的内容
n reload()方法 刷新页面
/*setInterval(function(){
location.reload();//每隔两秒自动刷新页面。
n },2000);* /
n reload(true) 刷新页面,不使用缓存 ( 类似于重新打开 )
history对象
history对象是window对象的属性
浏览者通常可以使用浏览器的前进与后退按钮访问曾经浏览过的页面。JavaScript的history对象记录了用户曾经浏览过的页面,并可以实现浏览器前进与后退相似的导航功能
可以通过back函数后退一个页面,forward函数前进一个页面,或者使用go函数任意后退或前进页面,还可以通过length属性查看history对象中存储的页面数
由于安全的原因,不能显示history对象中的历史页面URL
如果一个窗体没有被用户浏览过任何页面(也就是一个新建的窗体),其history对象缓存的URL为空,无法使用相关函数导航
JavaScript history.go() 函数 -- 前进或后退指定的页面数
JavaScript history.back() 函数 -- 后退一页
JavaScript history.forward() 函数 -- 前进一页
JavaScript history.length 属性 -- history对象中缓存了多少个URL
navigator对象--了解
n appName 浏览器名称
n appVersion 浏览器版本
n platform操作系统
最新的浏览器已经全面放弃以上这些属性
n userAgent 用户代理信息,通过该属性可以获取浏览器及操作系统信息
onload事件:页面内容加载完成(DOM结构,图片.....)
/location.href='http://www.baidu.com';//设置跳转的地址
location.href='02 success.html';
onscroll事件:拖动浏览器的滚动条触发此事件。
onresize事件:浏览器窗口缩放所触发的事件。
open() 和 close() 方法--打开一个页面/关闭一个页面
alert() prompt() confirm()浏览器事件
定时器
n setInterval(函数名称,时间);间隔定时器(反复调用)
clearInterval( 定时器的返回值 ); 停止定时器
n setTimeout(函数名称,时间); 延时定时器
clearTimeout( 定时器的返回值 ); 停止定时器
DOM的概念及作用
DOM是”Document Object Model”的首字母缩写,即文档对象模型。用来描绘一 个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。浏览器支持情况:不友好,有兼容问题
DOM的基本操作(查询、修改、创建、删除)
//aInput[0].value文本框的内容
var cLi=document.createElement('li');
var cText=document.createTextNode(aInput[0].value);//将文本框内容,创建出来,赋值给cLi
cLi.appendChild(cText);
oUl.appendChild(cLi);
aInput[0].value='';//清空
aInput[0].focus();//文本框得到焦点
n getElementById() 获取特定 ID 元素的节点
n getElementsByTagName() 获取相同元素的节点列表,返回类数组,使用[0]来获取
n getElementsByClassName() 获取相同类名的节点列表(IE8及以下不支持)
n getElementsByName() 获取相同类名的节点列表,不是所有标签都有name属性。
n createElement() 创建一个元素节点
n createTextNode() 创建一个文本节点
n obj.appendChild(node) 把node节点插入到box的内部最后的位置
n box.insertBefore(newNode, existNode) 把newNode节点插入到exsitNode的前面
n box.removeChild(node) 删除阶段
n obj.cloneNode() 复制节点,复制obj元素标签,可以传一个布尔值为参数,如果参数为true,连同obj子元素一起复制。如果为空(false)复制obj节点。
n obj.replaceChild(新添加的节点(替换),被替换的节点);
DOM元素类型(元素和文本)
n 节点可以分为元素节点、属性节点和文本节点...,而这些节点又有三个非常有用的属性 ,分别为:nodeName、nodeType 和 nodeValue(文本)
n //var cloneUl=oUl.cloneNode();//克隆ul节点,追加
n //var cloneUl=oUl.cloneNode(true);//参数true,克隆ul节点以及ul子节点,追加
n //document.body.appendChild(cloneUl);
n
n //obj.replaceChild(新添加的节点,被替换的节点);
n //var oDiv=document.createElement('div');//创建div节点
n //document.body.replaceChild(oDiv,oUl);//用创建的节点替换ul节点 replace替换字符串 string.replace("tmd", "*");
n /*var str='tmdtmdtmdtmdtmdtmd';
n alert(str.replace('tmd','*'));*/
n
n /*var str='tmdtmdtmdtmdtmdtmd';
n alert(str.replace(/tmd/g,'*'));//正则*/
n
n //DOM元素类型(元素,属性,文本)
n //nodeName、nodeType 和 nodeValue
n //alert(oUl.nodeType);//1 : 代表是元素节点。
n nodeType:元素(1) 属性(2) 文本(3)
n //alert(document.body);//获取body元素
n //document.title='我是标题';
n //alert(document.documentElement);//获取html标签
n
n /*alert(document.documentElement.clientWidth);//可视区的宽度
n alert(document.documentElement.clientHeight);//可视区的高度*/
n
n //四个属性:offsetLeft/offsetTop/offsetWidth/offsetHeight 没有单位
n //alert(oBox.offsetWidth);获取盒子对应的宽度(盒模型:width+border+padding)
n var scrolltop=document.documentElement.scrollTop || document.body.scrollTop;
获取非行内样式(兼容问题)
转载于:https://blog.51cto.com/13507333/2048591
javascript--DOM概念相关推荐
- JavaScript DOM介绍
DOM 概念 所谓DOM,全称 Docuemnt Object Model 文档对象模型,毫无疑问,此时要操作对象,什么对象?文档对象 在文档中一切皆对象,比如html,body,div,p等等都看做 ...
- 初读JavaScript DOM编程艺术(一)
JavaScript DOM编程艺术--前三章概念总结 一. 概述 1.什么是JavaScript 2.什么是DOM 二. JavaScript 语法 1. 语句和注释 2. 变量和数组 三. DOM ...
- JavaScript -- DOM树
下面是对JavaScript中DOM树的整理,希望可以帮助到有需要的小伙伴. 明天可能会有更多的困难和挑战,加油,你可以的. JavaScript – DOM树 想要了解DOM树,先要了解几个Java ...
- javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
- javascript的概念
一.了解JavaScript 页面中所有的动态效果或动态交互基本上都是基于JavaScript来实现的 1. 页面的各种动态效果 2. 对用户操作的响应 3. 对客户端数 ...
- JavaScript DOM 编程艺术 (第二版)学习之5-6章
JavaScript DOM 编程艺术 (第二版)学习之5-6章 第五章 最佳实践 5.1 过去的错误 5.2 平稳退化 5.2.1 "javascript:"伪协议 5.2.2 ...
- 自学js第十二天:DOM概念和基础操作
Web API 总结1: dom文档树的作用,就是把网页全部内容转为一个个js节点对象去操作 , 因此dom的文档树的内部组成就是有许多叶子node节点对象.分别有七种类型的叶子包含网页全部内容都有对 ...
- 六、前端开发-JavaScript DOM
六.前端开发语言体系-JavaScript DOM 文章目录 六.前端开发语言体系-JavaScript DOM JavaScript DOM DOM简介 DOM方法 DOM事件 DOM事件监听器 D ...
- javascript DOM 遍历
javascript DOM 遍历 由 愚人码头 撰写 http://www.css88.com/archives/514 javascript DOM 遍历 以下一系列的辅助函数可以帮助您,他们能取 ...
- javascript DOM(08-21)
1.createElement()和createTextNode() //创建一个li新元素 var newChild=document.createElement('li'); //创建一个a 新元 ...
最新文章
- MSSQL数据库统计所有表的记录数
- 你真的会写二分检索吗?
- 二次元控、视宠如命,95后占主力的女程序员原来这么飒
- Python开发编码规范(转)
- 自学python需要安装什么软件-python自学需要什么软件?
- 基于stm32、0.96寸OLED实现的俄罗斯方块小游戏(详细源码注释)
- python3实现抓取网页资源的 N 种方法(内附200GPython学习资料)
- 一部珍贵的130位作家的手稿集
- 人人商城小程序服务器根目录,人人商城前端小程序如何配置 人人商城搭建教程...
- rk3568 android11 的 hardware架构学习纪要
- HMM,MEMM,CRF模型的比较
- 怎么制作真人qq秀_QQ 首款捏脸产品「卡噗」上线,这是微信也能玩的 3D 厘米秀...
- 将背景为白色图片转为png格式的透明图片
- 前端工作中的一些解决问题的方法,可以参考一下
- html找到多行注释报错,前端注释总结
- Linux安装yum(红帽子)rpm
- 6.11 通过文件描述符来获取信号
- 帆软(FineReport)---- 数据决策系统的基本配置
- python课堂教学_初中生初学python课堂教学感悟
- 使用FFMPEG工具包移除视频的水印
热门文章
- 博客系统。集成调试平台,支持类结构/jar结构预览、支持方法调试和监听、支持修改类字段(变量、常量、枚举)等
- 最新京东炸年兽活动一键做任务工具v1.4
- 基于Spring Boot+Vue的考试系统
- iphone主屏幕动态壁纸_灵动优美的iphone高清动态锁屏壁纸
- Java | 用Java实现冒泡排序算法
- 批量修改txt内容_不用再慢慢手动修改,用Excel批量修改文件名
- 初识好朋友计算机课件,-精选版初识我们的好朋友——计算机.ppt
- BitCome比特彗星v1.82豪华版(bt下载)
- 酷炫加特技的个人主页
- Linux root密码丢失后的解决