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

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

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

2、改变页面元素的样式
a、修改css样式:
document.getElementById(id).style.property
document.getElementById(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、窗口的内部高度和宽度
标准浏览器:
window.innerHeight
window.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(浏览器对象模型)

时间: 2024-08-05 02:41:22

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

DOM 文档对象模型+倒计时

DOM 文档对象模型 DOM (document object model) 文档对象模型,它定义了操作文档对象的接口. DOM 把一份html文档表示为一棵家谱树,使用parent(父), child(子), sibling(兄弟)等记号来表明家庭成员之间的关系. 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够

DOM文档对象模型 | Javascript

# 在学过python这样的面向对象编程语言之后,可以用其思维方式来学习Javascript; # DOM文档对象模型就相当于一个包,或者模块,定义了许多类,对网页做操作; # Document类型 # document对象时HTMLDocument的一个实例; # 1.两种访问子节点的快捷方式: # ①documentElement # var html = document.documentElement直接取得<html>的引用; # ②childNodes列表访问文档元素 # 附:do

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

BOM(浏览器对象模型):可以对浏览器的窗口进行访问和操作 1.基本的BOM体系: window------------document------------------------------------------anchors | | --frames ----forms | | --history ----images | | --location(浏览器地址)  ----links | | --navigator(获取浏览器信息) ----location | --screen(屏幕

BOM浏览器对象模型

访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model). BOM整体对象图. 核心是window对象: 以下有特殊双重身份: window对象既是ECMAScript规范中的Global对象,也是BOM中的顶级对象: document对象既是BOM顶级对象的一个属性,也是DOM模型中的顶级对象 location对象既是window对象的属性,同时也是document对象的属性. 1. window对象   (从两个方面看待:ECMAScript规范中的Gl

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

一.什么是DOM DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式." W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对

BOM—浏览器对象模型

BOM(Browser Object Model 浏览器对象模型)使JavaScript 有能力与浏览器"对话". Window 对象 所有浏览器都支持 window 对象.它是BOM的核心对象,它表示浏览器的一个实例. 所有 JavaScript 全局对象.函数以及变量均自动成为 window 对象的成员. 全局变量是 window 对象的属性. 全局函数是 window 对象的方法. 甚至 HTML DOM 的 document 也是 window 对象的属性之一: window.

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

什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C(WHATWG,WebHypertextApplicationTechnologyWorkingGroup——网页超文本应用程

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

 1,javascript   组成部分: 1.ECMAscript(核心标准):    定义了基本的语法,比如:if for 数组 字符串 ... 2.BOM  : 浏览器对象模型(Browser Object Model) 2,BOM 的组成部分: 1.window对象 每一个子窗口对应的又是一个window对象 2. screen对象 3.location对象 4.history对象 5.Navigator对象 6.定时器 (两种) 7.弹框(三种) 8. document (DOM-文档

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

一.什么是 BOM BOM 是 Broswer Object Model 的缩写,中文为浏览器对象模型 BOM 提供了独立于内容而与浏览器窗口进行交互的对象 由于 BOM 主要用于管理窗口与窗口之间的通讯,因此其核心对象是 window BOM 缺乏标准,所以你会发现 MDN 上面搜寻不了,JavaScript语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C 二.一些大部分通用的API window对象——BOM核心 window.alert('提示信息') window.confi

js基础,Array 数组对象、BOM 浏览器对象模型

Array 数组对象 定义数组的 3种方式 var week = new Array(); var week = new Array(‘星期一’ , ‘星期二, ‘星期三’); var week = (‘星期一’ , ‘星期二, ‘星期三’); 常用方法: 获取数组的长度 .length: alert(week.length); 获取数组下标所对应的值: alert(week[0]); 数组元素添加: 将一个或多个新元素添加到数组结尾,并返回数组新长度 var week_len = week.p