JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容。DOM主要包括HTML文档的属性和方法,像对HTML节点的操作,CSS的操作和HTML事件的监听和处理。BOM不要包括浏览器相关的一些属性和方法。

DOM知识点

1、改变页面的元素和属性
a、获取元素的方法:
document.getElementByIdx_x_x()
document.getElementsByTagName_r()
document.getElementsByClassName()
b、js输出HTML内容
document.write();
c、获取和修改元素的内容:
document.getElementByIdx_x_x(id).innerHTML
document.getElementByIdx_x_x(id).innerHTML=new
HTML;
d、获取和修改元素的属性值:
document.getElementByIdx_x_x(id).attribute
document.getElementByIdx_x_x(id).attribute=new
value;
e、添加html标签:document_createElement_x_x
f、添加html文本内容:document_createTextNode
g、追加元素:document.a();
h、从父元素中删除子元素:parent.removeChild(child)

2、改变页面元素的样式
a、修改css样式:
document.getElementByIdx_x_x(id).style.property
document.getElementByIdx_x_x(id).style.property=new style;

3、对页面元素事件的监听和处理
常用的事件:
onload:当文档加载时运行脚本
onblur:当窗口失去焦点时运行脚本
onfocus:当窗口获得焦点时运行脚本
onchange:当元素改变时运行脚本
onsubmit:当提交表单时运行脚本
onkeydown:当按下按键时运行脚本
onkeypress:当按下并松开按键时运行脚本
onkeyup:当松开按键时运行脚本
onclick:当单击鼠标时运行脚本
ondblclick:当双击鼠标时运行脚本
onmousedown:当按下鼠标按钮时运行脚本
onmousemove:当鼠标指针移动时运行脚本
onmouseout:当鼠标指针移出元素时运行脚本
onmouseover:当鼠标指针移至元素之上时运行脚本
onmouseup:当松开鼠标按钮时运行脚本
onabort:当发生中止事件时运行脚本

BOM知识点
a、窗口
window.open():打开新窗口
window.close():关闭当前窗口
window.moveTo():移动当前窗口
window.resizeTo():调整当前窗口的尺寸
b、窗口的内部高度和宽度
标准浏览器:
windows.innerHeight
windows.innerWidth
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight 或者
document.body.clientHeight
document.documentElement.clientWidth 或者
document.body.clientWidth
c、屏幕对象
screen.availWidth:可用的屏幕宽度
screen.availHeight:可用的屏幕高度
d、地址栏对象
location.hostname:web 主机的域名
location.pathname:当前页面的路径和文件名
location.port:主机的端口 (80 或 443)
location.protocol:所使用的 web 协议(http:// 或 https://)
history.back():与在浏览器点击后退按钮相同
history.forward():与在浏览器中点击按钮向前相同
e、浏览器自带的信息
navigator.appVersion:浏览器版本
navigator.platform:浏览器平台
navigator.userAgent:浏览器User-agent header

f、计时器相关的
setInterval()和clearInterval 间隔几秒循环执行/清除定时器
setTimeout 和 clearTimeout() 间隔几秒执行(单次)/清除定时器

标签:JS开发

来源:JS DOM(文档对象模型)与BOM(浏览器对象模型)

JS DOM(文档对象模型)与BOM(浏览器对象模型)的更多相关文章

  1. 第一百一十一节,JavaScript,BOM浏览器对象模型

    JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...

  2. JavaScript——BOM(浏览器对象模型),时间间隔和暂停

    BOM(浏览器对象模型):能够对浏览器的窗体进行訪问和操作 1.主要的BOM体系: window------------document-------------------------------- ...

  3. JavaScirpt(JS)——BOM浏览器对象模型

    一.BOM概念 BOM(Browser Object Model)即浏览器对象模型.可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关 ...

  4. JS第三部分--BOM浏览器对象模型

    一.client系列:宽高边框 二.offset系列:偏移 三.scroll系列 四.BOM的介绍 4.1.打开新窗口 4.2.location对象(本地信息对象) 4.3.history对象 4.4 ...

  5. js BOM浏览器对象模型

    BOM即Browser Object Model,浏览器对象模型,表示浏览器窗口,所有js全局对象.函数以及变量均是window 对象的成员. 对于不同的浏览器,表示宽度和高度的方法不同: 对于IE9 ...

  6. BOM浏览器对象模型

    访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model). BOM整体对象图. 核心是window对象: 以下有特殊双重身份: window对象既是ECMAScr ...

  7. JavaScript(二、BOM 浏览器对象模型)

    一.BOM是什么 BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心 ...

  8. javascript之DOM文档对象模型编程的引入

    /* DOM(Document Object Model) 文档对象模型 一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所有标签都会创建一个对应的 对象进行描述,我们在浏览器上看 ...

  9. JavaScript(三、DOM文档对象模型)

    一.什么是DOM DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: &q ...

  10. BOM—浏览器对象模型(Browser Object Model)

     1,javascript   组成部分: 1.ECMAscript(核心标准):    定义了基本的语法,比如:if for 数组 字符串 ... 2.BOM  : 浏览器对象模型(Browser ...

随机推荐

  1. kuangbin专题 专题一 简单搜索 Find a way HDU - 2612

    题目链接:https://vjudge.net/problem/HDU-2612 题意:‘@’表示KTV,‘#’表示无法走的地方,‘Y’,'M’表示两个人,他们要在KTV见面,问他们都到达KTV要花费 ...

  2. Java学习笔记之---单例模型

    Java学习笔记之---单例模型 单例模型分为:饿汉式,懒汉式 (一)要点 1.某个类只能有一个实例 2.必须自行创建实例 3.必须自行向整个系统提供这个实例 (二)实现 1.只提供私有的构造方法 2 ...

  3. .Net Core 学习依赖注入自定义Service

    1. 定义一个服务,包含一个方法 public class TextService { public string Print(string m) { return m; } } 2. 写一个扩展方法 ...

  4. blast2go本地化 mysql_study

    mysql yum -y install mysql mysqladmin -uroot -passwd "oebiotech" mysql -uroot -poebiotech ...

  5. 小代学Spring Boot之集成MyBatis

    想要获取更多文章可以访问我的博客 - 代码无止境. 上一篇小代同学在Spring Boot项目中配置了数据源,但是通常来讲我们访问数据库都会通过一个ORM框架,很少会直接使用JDBC来执行数据库操作的 ...

  6. NOIP2018&2013提高组T1暨洛谷P5019 铺设道路

    题目链接:https://www.luogu.org/problemnew/show/P5019 花絮:普及蒟蒻终于A了一道提高的题目?emm,写一篇题解纪念一下吧.求过! 分析: 这道题我们可以采用 ...

  7. 洛谷P4994 终于结束的起点 题解

    求赞,求回复,求关注~ 题目:https://www.luogu.org/problemnew/show/P4994 这道题和斐波那契数列的本质没有什么区别... 分析: 这道题应该就是一个斐波那契数 ...

  8. 反⑨baka拖更大队:临时约法

    本团队中将不时发起团队讨论报道⑨baka无良~ 某无良⑨baka一直拖更引起广大人民群众不满 文文新闻:https://www.luogu.org/discuss/show/52654 反⑨baka的 ...

  9. 个人永久性免费-Excel催化剂功能第32波-空行空列批量插入和删除

    批量操作永远是效率提升的王道,也是Excel用户们最喜欢能够实现的操作虽说有些批量操作不一定合适Excel的最佳实践操作,但万千世界,无奇不有,特别是在国人眼中领导最大的等级森严的职场环境下.Exce ...

  10. JAVA环境+eclipse+tomcat+maven配置

    1.JDK的安装 首先下载JDK,这个从sun公司官网可以下载,根据自己的系统选择64位还是32位,安装过程就是next一路到底.安装完成之后当然要配置环境变量了. ----------------- ...