一、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。

  1. JavaScript 能够改变页面中的所有 HTML 元素
  2. JavaScript 能够改变页面中的所有 HTML 属性
  3. JavaScript 能够改变页面中的所有 CSS 样式
  4. 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的更多相关文章

  1. JavaScript：BOM&DOM

    BOM(Browser Object Model): feature: 1.BOM has no relevant standards. 2.The fundamental object of BOM ...

  2. JavaScript BOM DOM 对象

    title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...

  3. 【转】了解nodejs、javascript间的关系！bom&dom&ecmascript

    地址:https://www.cnblogs.com/JetpropelledSnake/p/9450810.html bom&dom:https://www.cnblogs.com/wang ...

  4. BOM DOM

    http://www.cnblogs.com/yexiaochai/archive/2013/05/28/3102674.html DOM Document Object Model 文档对象模型 一 ...

  5. JS学习四（BOM DOM）

    BOM                Screen对象 console.log(window.width);//屏幕宽度 console.log(window.height);//屏幕高度 conso ...

  6. js BOM DOM

    BOM对象 BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. 简而言之就是使 JavaScript ...

  7. BOM,DOM常见操作和DHML

    BOM (Browser Object Model)浏览器对象模型,控制浏览器的一些行为 window对象 代表一个HTML文档 属性 页面导航的5个属性 self, parent, top, ope ...

  8. BOM&DOM

    BOM(浏览器对象模型) 1. location相关 . location.href 获取当前url . location.href="http://www.sogo.com" 跳 ...

  9. Python12/25--前端之BOM/DOM

    一.DOM 1. 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可扩展标 ...

随机推荐

  1. 20165206学习基础和C语言基础调查

    - 技能 我的一项可以拿的出手的技能是萨克斯.但不敢说有多厉害,更不敢说比大多数人更好,只能说是还可以.我学萨克斯有5年左右的时间吧,这5年里印象最深刻的还是前两年.前两年主要是基础训练.我从最基础的 ...

  2. 2017-07-03(VIM ACL权限 )

    VIM 底行模式 :w 保存 :q 退出 :! 强制执行 :ls 列出打开的所有文件 :n 进行下一个查询 :15 定位到15行 /xxx 从光标处向下查找xxx出现的位置 ?xxx 从光标处向上查找 ...

  3. 如何在同一台机器上安装多个MySQL的实例

    转自:'http://www.cnblogs.com/shangzekai/p/4375271.html 最近由于工作的需要,需要在同一台机器上搭建两个MySQL的实例,(注:已经存在了一个3306的 ...

  4. RocketMQ-事务消费

    理论部分在https://www.jianshu.com/p/453c6e7ff81c中的 "三.事务消息".下面从代码层面看一下rockemq的事务消息 一.事务消费端. 从代码 ...

  5. NFS+sersync+Keepalived高可用方案

    标签(linux): nfs+keepalived 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 这套解决方法案的优点是配置比较简单.容易上手,缺点是当主NFS ...

  6. 申请9位数QQ

    官网:QQ注册第一步:下面手机号不要填写 第二步:验证 第三步:开始填写手机号 注:不行就多试着几次就可以了,是不是很惊喜啊!(漏洞,被腾讯发现就不行了喽)

  7. C++的string类

    关于头文件cstring,提供了strlen及很多与字符串相关的函数的声明. 头文件string,要使用string类,必须在程序中包含头文件string,string类位于std中,必须提供一条us ...

  8. 基于Java的Arc Engine二次开发的环境的配置

    1.软件准备 ArcGIS for Desktop 10.2, Arc engine, jdk-7u60-windows-i586,Eclipse Mar2 2.软件的安装 2.1 ArcGIS fo ...

  9. Django的ModelForm

    基于django.forms.ModelForm:与模型类绑定的Form 先定义一个ModelForm类,继承ModelForm类 from django.forms import ModelForm ...

  10. POJ1743 Musical Theme [后缀自动机]

    题意:不重叠最长重复子串 后缀数组做法:http://www.cnblogs.com/candy99/p/6227659.html 后缀自动机的话,首先|Right|>=2 然后min(t[u] ...