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