web3 - BOM&DOM

最新推荐文章于 2025-12-31 17:15:11 发布

转载最新推荐文章于 2025-12-31 17:15:11 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/markbin/p/6741563.html

文章标签：

#javascript #ViewUI

本文深入探讨了浏览器对象模型(BOM)和文档对象模型(DOM)的核心概念与应用技巧，涵盖了从基本操作到高级功能的全面解析，如窗口管理、事件监听、元素操作等。

timg?image&quality=80&size=b9999_10000&sec=1492518971060&di=2fe0c65d628ad4862d3f0998ae31022e&imgtype=0&src=http%3A%2F%2Fs11.sinaimg.cn%2Fmiddle%2F6fdf0e7eg964edad9b07a%26690

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

转载于:https://www.cnblogs.com/markbin/p/6741563.html