JavaScript笔记（3）

最新推荐文章于 2024-03-16 13:21:00 发布

淡淡的一抹

最新推荐文章于 2024-03-16 13:21:00 发布

阅读量274

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ych4513979/article/details/42142313

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1 BOM(Browser Object Model)：浏览器对象模型。BOM并不是标准，因为它所关注的是浏览器的整体结构，所以每个浏览器都有自己的BOM，它们并不是完全一致的。
（1.1）window对象
windows对象是BOM模型中的顶层对象。

//windows对象的常用方法
//弹出一个提示窗口来显示信息
alert("提交成功");

//弹出一个确认窗口来显示这个信息
confirm("是否提交以上信息");

//弹出一个输入窗口来接收用户的输入信息
prompt("请输入姓名", "ych");

//通过程序控制打开一个指定URL地址的浏览器窗口
open("http://www.baidu.com", "_black");

//延时执行函数
setTimeout(function(){alert("时间到");}, 1000);

//在指定的间隔时间后，重复执行函数
setInterval(function(){alert("时间到");}, 1000);

（1.2）location对象
location对象用来管理当前打开窗口的URL信息。

alert(location.href);//获取或者设置当前窗口的URL地址
//href(Hypertext Reference)：超文本引用

//当前窗口打开一个百度页面
window.location.href = "http://www.baidu.com";

location.reload();//刷新当前页面

（1.3）navigator对象
navigator对象是一个可以刺探浏览器用户“隐私”的对象，当然这些隐私只是一些操作系统和浏览器信息。

//naviagtor.userAgent：获取操作系统的版本、浏览器类型/版本等信息
//naviagtor.cookieEnabled：获取浏览器是否支持Cookie
//naviagtor.platform：获取用户所使用的操作系统类型
//naviagtor.javaEnabled()：获取浏览器是否支持Java

//获取浏览器信息
function getBrowserInfo(){
    var browserRE = /(firefox|opera|msie|safari).?([0-9]\.?)+/;//正则表达式中的“.”表示除了换行符以外的所有字符
    return navigator.userAgent.toLowerCase().match(browserRE)[0];
}

//获取操作系统信息
function getOSInfo(){
    var os = "未知";
    var userInfo = navigator.userAgent;
    var windows = (navigator.platform == "Win32") || (navigator.platform == "Windows");
    os = null;
    if(windows){
        var win2K = userInfo.indexOf("Windows NT 5.0") > -1;
        if(win2K) os = "windows 2000"
        var winXP = userInfo.indexOf("Windows NT 5.1") > -1;
        if(winXP) os = "windows XP";
        var winVista = userInfo.indexOf("Windows NT 6.0") > -1;
        if(winVista) os = "windows vista";
        var win7 = userInfo.indexOf("Windows NT 6.1") > -1;
        if(win7) os = "windows 7";
    }
    return os;
}

alert("您所使用的\n浏览器是：" + getBrowserInfo()
    + "\n操作系统是：" + getOSInfo());

（1.4）document对象
document对象包含了页面中的可见内容，例如页面标题栏（title）和表单（form）等。

需要注意的是：BOM对象是针对浏览器对象模型，不同的浏览器获取同样的数据可能会通过不同的属性名，并且相同的属性名在不同的浏览器中会有不同的解释。所以一中好的做法是尽量使用DOM的属性和方法，避免使用浏览器特定的属性和方法。

2 DOM(Document Object Model)：文档对象模型。与BOM关注浏览器的整体不同，DOM只关注浏览器所载入的文档，也就是HTML标签对象。是一个标准，与平台和语言无关，来对文档进行管理。

（2.1）对于html文档模型的加载来说，浏览器会依据HTML代码，从上到下顺序的产生响应的DOM模型，而JavaScript代码却可以在任何地方执行。这样如果在<head>中调用未生成的元素，会产生错误。例如：

<html>
<head>
    alert(document.getElementById("n"));</head>
<body>
<div id="n"></div>
</body>
</html>

得到的结果为：null。

（2.2）因为DOM模型的构建与JavaScript代码的执行是串行的，因此如在<head>中执行了大量的脚本代码，可能会阻碍浏览器对页面的可视效果。解决的办法是尽量把JavaScript放在HTML代码的最后。

（2.3）document.getElementById("id")：通过节点的Id号来查找节点。这里需要注意：如果返回了一个错误的值时，不一定是不存在指定id值的元素，而可能是存在了多个。

（2.4）document.getElementByTagName("div")：通过tagName来获取当前节点的所有子节点中标签名是tagName的所有子节点列表。注意：该方法并不是document专有的，每个节点都有这个方法。