JS DOM与BOM

DOM知识点

DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网页的地图(或者说模型),而我们可以通过js去读取这张地图。
作者:一只斗牛犬
链接:http://www.imooc.com/article/36780
来源:慕课网

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.

f、添加html文本内容:

document.createTextNode

g、追加元素:

document.();

h、从父元素中删除子元素:

parent.removeChild(child)

2、改变页面元素的样式

a、修改css样式:

document.getElementById(id).style.property

document.getElementById(id).style.property=new style;

3、对页面元素事件的监听和处理

常用的事件:

onblur:当窗口失去焦点时运行脚本

onfocus:当窗口获得焦点时运行脚本

onchange:当元素改变时运行脚本

onsubmit:当提交表单时运行脚本

onkeydown:当按下按键时运行脚本

onkeypress:当按下并松开按键时运行脚本

onkeyup:当松开按键时运行脚本

onclick:当单击鼠标时运行脚本

ondblclick:当双击鼠标时运行脚本

onmousedown:当按下鼠标按钮时运行脚本

onmousemove:当鼠标指针移动时运行脚本

onmouseout:当鼠标指针移出元素时运行脚本

onmouseover:当鼠标指针移至元素之上时运行脚本

onmouseup:当松开鼠标按钮时运行脚本

onabort:当发生中止事件时运行脚本

DOM基本操作思维导图:

BOM知识点

BOM 主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括:

弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口大小
提供 Web 浏览器详细信息的定位对象
提供用户屏幕分辨率详细信息的屏幕对象
对 cookie 的支持
IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX 对象

作者:一只斗牛犬
链接:http://www.imooc.com/article/36780
来源:慕课网

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 协议

history.back():与在浏览器点击后退按钮相同

history.forward():与在浏览器中点击按钮向前相同

e、浏览器自带的信息

navigator.appVersion:浏览器版本

navigator.platform:浏览器平台

navigator.userAgent:浏览器User-agent header

f、计时器相关的

setInterval()和clearInterval 间隔几秒循环执行/清除定时器

setTimeout 和 clearTimeout() 间隔几秒执行(单次)/清除定时器



原文地址:https://www.cnblogs.com/DJOSIMON/p/9867919.html

时间: 2024-08-26 09:26:15

JS DOM与BOM的相关文章

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.getEleme

Javascript Vs DOM Vs BOM

当前想法有些乱,整理不下去了... 以后如果想起来,再继续整理.... 1.Javascript的组成部分 Javascript的内容分成三个部分:ECMAScript.DOM和BOM. 浏览器,可以看成是ECMAScript运行的宿主环境,然而并不是唯一的宿主环境. The BOM consists of the objects navigator, history, screen, location and document which are children of window. In

JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)

本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param+"<br/>"); } function print(param){ document.write(param); } window对象中的方式: 方法: confirm : bConfirmed = window.confirm( [sMessage]) 显示一个确认对话框

javascript与ECMAScript、DOM、BOM的关系

在初学javascript时,经常会看见javascript dom.ECMAScript等名词,一直不明白,今天查阅了一些资料和评论,简单写一下. JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象: DOM 描述了处理网页内容的方法和接口: BOM 描述了与浏览器进行交互的方法和接口. ECMAScript 先简单了解javascript的发展历史,在因特网发展的初期,为了减少客户端与服务器的交互(比如表单的验证一类),提高网上冲浪的效率,当时著名的Netsca

JS学习笔记-BOM之window

BOM:BrowserObjectModel,浏览器对象模型,提供JS中对浏览器的各种操作的对象,是JS应用中唯一没有相关标准的部分,这事BOM经常出现问题的所在,主要用于处理浏览器窗口与框架,浏览器特有的JS扩展也被默认为BOM的一部分,而各浏览器之间的公有对象就成了默认的标准.本篇文章将主要介绍window对象. 属性 世界上本没有模型,用的多了也就成了模型.模型便是一个可供参考的东西,BOM中的一系列通用的对象便构成了这个模型,其结构可展示为: window的六大属性,同时它们也是对象:

JAVAScript中DOM与BOM的差异分析

JAVAScript 有三部分构成,ECMAScript,DOM和BOM,根据浏览器的不同,具体的表现形式也不尽相同.我们今天来谈一谈DOM和BOM这俩者之间的差异. 用百科上的来说: 1. DOM是 W3C 的标准; [所有浏览器公共遵守的标准] 2. BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] 3. window 是 BOM 对象,而非 js 对象: DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API). BO

JS原生系列-BOM篇

我们已经学习了DOM,文档对象模型,我们的主要处理都是在这个模型基础上工作的,同样我们还有可能对浏览器进行一些操作,如: 1.检测浏览器的类型和版本 2.检测是pc还是移动设备 3.根据条件,进行页面的自动跳转 4.打开一个新的窗口,存放指定链接 5.关闭窗口 6.返回到上一个页面 7.获取地址栏信息,进行处理 等... 我们来学习,并且逐个实现上面的处理 (一)screen对象,Screen 对象中存放着有关显示浏览器屏幕的信息. 代表屏幕对象,获取屏幕信息,并不是浏览器 availHeigh

DOM与bom

DOM是一个使程序和脚本有能力动态地访问和更新文档的内容.结构以及样式的平台和语言中立的接口.,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口.我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W3C 的标准: [所有浏览器公共遵守的标准 2. BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别

DOM与BOM部分示例

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>DOM and BOM</title></head><body>    <div>此为DOM的部分示例(用id和标签寻找html的元素):</div>    <p id="intro">Hello World!