web3 - BOM&DOM
一、BOM (浏览器对象模型)
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
Window 对象
1.window.onresize
// 1
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
// 2
document.documentElement.clientHeight
document.documentElement.clientWidth
// 3
document.body.clientHeight
document.body.clientWidth
2.Window Screen
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
3.window.open() - 打开新窗口
4.window.close() - 关闭当前窗口
5.Window Location
function toBaidu() {
location.assign("http://www.baidu.com");
}
6.Window History
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
7.Window Navigator
window.navigator 对象包含有关访问者浏览器的信息。
<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
8.JavaScript 弹窗
警告框 alert
确认框 confirm
提示框 prompt
9.JavaScript 计时事件
window.setInterval(); //间隔指定的毫秒数不停地执行指定的代码。
window.setTimeout(); //停止指定时间后执行。
10.JavaScript Cookie
Cookie 用于存储 web 页面的用户信息。默认情况下，cookie 在浏览器关闭时删除。
document.cookie
二、DOM (文档对象模型)
通过 DOM，可访问 HTML 文档中的所有元素。
所以 JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
三、查找 HTML 元素
1.通过 id 找到 HTML 元素
var element = document.getElementById("idName");
2.通过标签名找到 HTML 元素
var element = document.getElementsByTagName("tagName")
3.通过类名找到 HTML 元素
var element = document.getElementsByClassName("className");
四、改变 HTML 内容
1.在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
// 相html 文档中添加新标签 p 的文本内容
document.write("<p>" + "内容" + "</p>");
2.修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
// 修改标签 p 的文本内容
document.getElementById("p").innerHTML="新文本!";
五、改变 HTML 属性
1.document.getElementById(id).attribute = 新属性值
<!DOCTYPE html>
<html>
<body>
<img id="image" src="oldPath.png">
<script>
document.getElementById("image").src="newPath.png";
</script>
</body>
</html>
六、改变 HTML 样式
document.getElementById(id).style.property = 新样式
// 改变标签 p 的背景颜色、字体、字体大小等
document.getElementById("p").style.color="blue";
document.getElementById("p").style.fontFamily="宋体";
document.getElementById("p").style.fontSize="20";
七、改变 HTML 事件反应
this ，表示当前标签。
// 元素被点击：onclick
// 页面加载完成：onload
// 离开页面：onunload
// 输入框被修改：onchange
// input 文本框获得焦点：onfocus
// 鼠标事件：onmouseover、onmouseout
八、添加事件监听：addEventListener() 方法
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
// 给一个标签添加事件监听，当被点击时，弹出弹窗
element.addEventListener("click", function(){ alert("Hello World!"); });
九、添加或删除 HTML 元素
1.添加标签
<script>
var p = document.createElement("p");
var node = document.createTextNode("这是一个新段落。");
p.appendChild(node);
var element = document.getElementById("div");
element.appendChild(p);
</script>
2.删除标签
<script>
var parent=document.getElementById("div");
var child=document.getElementById("p");
parent.removeChild(child);
</script>
web3 - BOM&DOM的更多相关文章
- JavaScript：BOM&DOM
BOM(Browser Object Model): feature: 1.BOM has no relevant standards. 2.The fundamental object of BOM ...
- JavaScript BOM DOM 对象
title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...
- 【转】了解nodejs、javascript间的关系！bom&dom&ecmascript
地址:https://www.cnblogs.com/JetpropelledSnake/p/9450810.html bom&dom:https://www.cnblogs.com/wang ...
- BOM DOM
http://www.cnblogs.com/yexiaochai/archive/2013/05/28/3102674.html DOM Document Object Model 文档对象模型 一 ...
- JS学习四（BOM DOM）
BOM Screen对象 console.log(window.width);//屏幕宽度 console.log(window.height);//屏幕高度 conso ...
- js BOM DOM
BOM对象 BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. 简而言之就是使 JavaScript ...
- BOM,DOM常见操作和DHML
BOM (Browser Object Model)浏览器对象模型,控制浏览器的一些行为 window对象 代表一个HTML文档 属性 页面导航的5个属性 self, parent, top, ope ...
- BOM&DOM
BOM(浏览器对象模型) 1. location相关 . location.href 获取当前url . location.href="http://www.sogo.com" 跳 ...
- Python12/25--前端之BOM/DOM
一.DOM 1. 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可扩展标 ...
随机推荐
- SQL Server 2005的服务器角色(public)的问题
SQL Server 默认会有9个服务器角色,而且这些角色是不能删除和新增.修改的.关于这些角色相关介绍和权限,请参考 其中有一个特殊的角色public,任何登录都会属于该角色,它只拥有的权限是VIE ...
- Hibernate （三）
1 一对多的单向 示例:一个已经存在的学生,新建一个班级,然后将该学生加入到该班级之下 设置inverse="false" <?xml version="1.0&q ...
- Haproxy+Keepalived负载均衡
Haproxy介绍 HAProxy是一个特别适用于高可用性环境的TCP/HTTP开源的反向代理和负载均衡软件.在7层负载均衡方面的功能很强大(支持cookie track, header rewrit ...
- java 多维数组遍历
java 多维数组遍历的顺序的性能问题 ps:下图为java多维数组内存分布原理.出自:http://math.hws.edu/javanotes/c7/two-dimensional-array.p ...
- ResultSet详细
1. ResultSet细节1功能:封锁结果集数据操作:如何获得(取出)结果 package com.sjx.a; import java.sql.Connection; import java.sq ...
- IOS 时间字符串转换时间戳失败问题
链接:https://pan.baidu.com/s/1nw6VWoD 密码:1peh 有时候获取到的时间带有毫秒数或者是(2018-2-6 11:11:11)格式的(别说你没遇到过,也别什么都让后台 ...
- spring重要类说明
- WEB消息推送-原理篇
这篇文章主要讲述B/S架构中服务器“推送”消息给浏览器.内容涉及ajax论询(polling),comet(streaming,long polling).后面会附上源代码. 最近在工作有这么一个需求 ...
- Object Detection · RCNN论文解读
转载请注明作者:梦里茶 Object Detection,顾名思义就是从图像中检测出目标对象,具体而言是找到对象的位置,常见的数据集是PASCAL VOC系列.2010年-2012年,Object D ...
- Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals)
Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals) 说一点东西: 昨天晚上$9:05$开始太不好了,我在学校学校$9:40$放 ...