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() 间隔几秒执行(单次)/清除定时器
JS DOM与BOM的更多相关文章
- JS(DOM 和 BOM)
JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...
- JS ——DOM,BOM(包含盒模型,动画)总结
JS盒模型 content: 通过计算后样式获取padding + content: box.clientWidth | box.clientHeightborder + padding + cont ...
- day 52 js学习 DOM 和BOM
前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
- JS DOM(文档对象模型)与BOM(浏览器对象模型)
在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...
- 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM
JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...
- 理清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
前端基础之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 ...
随机推荐
- SpringMVC-Helloworld 的归纳理解
前面使用SpringMVC写了Helloworld, 发现理解不是很深刻,很多东西只是跟着教学视频敲才会 现在那Helloworld以及一般的SpringMVC归纳一下: SpringMVC入门Hel ...
- Linux安装docker
1.检查内核版本,必须是3.10及以上 uname ‐r 2.安装docker yum install docker 3.输入y确认安装 4.启动docker [root@localhost ~]# ...
- vertx的ShardData共享数据
数据类型 一共4种 synchronous shared maps (local) asynchronous maps (local or cluster-wide) asynchronous loc ...
- Java 关于类的构造方法的一点认识
2019年4月21日 星期天 在ORACLE官网上提供的The Java™ Tutorials中,有一节课Providing Constructors for Your Classes(为你的类提供构 ...
- Java练习2
1 编写一个应用程序,模拟机动车的加速和减速功能.机动车类Vehicle的UML图如下,其中speedUp()方法实现加速功能,速度上限为240 km/h:speedDown()实现降速功能,下限为0 ...
- 局域网中访问mac中的linux虚拟机服务
然后到虚拟机的linux系统上面执行ifconfig查看linux系统的IP地址,访问这个地址就能访问mac里面的虚拟机
- JS,JQ实现模拟暂停FOR循环,间隔几秒后再继续执行
<!DOCTYPE html><head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquer ...
- 在.Net Core WebAPI下给Swagger增加导出离线文档功能
一丶前言 最近刚接触到Swagger,在github上下载了它的源码和demo学习了一遍,发现这个组件非常好用,不过不足的是它没有导出离线文档的功能,于是乎我就想给它加一个导出功能 Swagger G ...
- 设计完美的策略模式,消除If-else
策略模式是oop中最著名的设计模式之一,是对方法行为的抽象,可以归类为行为设计模式,也是oop中interface经典的应用.其特点简单又实用,是我最喜欢的模式之一.策略模式定义了一个拥有共同行为的算 ...
- Java类的继承与方法调用的一个小问题
public class Father { protected void server(int i){ switch (i){ case 1: methodone(); break; case 2: ...