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组织推荐的处理可扩展标 ...
随机推荐
- excel去除空格
=SUBSTITUTE(Sheet1!A1," ","") 在sheet2中输入上述公式,然后再通过拖拽复制公式,即可以很快的将sheet1中的数据全部处理.
- ThinkPhp关闭Debug后出错解决方案
注:我使用的是ThinkPHP的3.2版本,其他版本类似 从自己入手PHP开发以来,一直使用的是ThinkPHP的框架,前几天偶然间碰到了一个错误,在Debug模式下网站一切正常,而关闭Debug进行 ...
- linux_发邮件
如何通过linux发邮件? 邮箱配置文件: /etc/mail.rc 1. 邮箱文件配置 vim /etc/mail.rc # 添加一下数据 set from=beimen@163.com smtp= ...
- MySQL如何选择合适的引擎以及引擎的转换。
我们怎么选择合适的引擎?这里简单归纳一句话:"除非需要用到某些InnoDB不具备的特性,并且没有其他办法可以替代,否则都应该优先选择InnoDB引擎." 除非万不得已,否则不建议混 ...
- linux 中 ping的回传值
今天在学习鸟哥私房菜的过程中,不明白ping的回传值是怎么设置的,后来网上找的结果了,特此记录一下 1 题目大意是指,ping一个网段的机器,如果可以通,就显示UP,如果不通就显示Down,其中一 ...
- ORACLE约束总结
你对ORACLE约束的了解如何?比较模糊还是相当透彻?如果你对下面几个问题了如指掌的话,恭喜你,你已经对约束掌握得比较好了,不用看这篇文章了.ORACLE的约束有啥功能作用? 有哪些类型约束(不同版本 ...
- 用CSS写气泡
新学到的一个小效果 用CSS实现如下图效果,其中demo结构为:<div id="square"></div> 实现这个效果需要用到两个知识点: 1.用bo ...
- Struts2 (一)
1 三层架构 2 MVC框架的原理 3 什么是Struts2 Struts2是一个非常优秀的MVC框架,基于Model2设计模式. 是由传统的Struts1和WebWork两个经典的框架发展而来的. ...
- 【转】nagios 命令解释
nagios 命令解释 check_ssh 界面拼装参数格式如下共3个元素: 命令!端口!连接超时时间 ...
- 前端之基础css
一.anchor伪类,用于阅读文章. a:link(没有接触过的链接),用于链接常规状态 (末访问的链接)a:hover(鼠标放在链接上的状态) 用于产生视觉效果(已访问的链接)a:visited(访 ...