JavaScript BOM与DOM核心机制详解

JavaScript组成概述

一个完整的JavaScript实现由三个核心部分构成：ECMAScript（核心语法）、BOM（浏览器对象模型）以及DOM（文档对象模型）。

本节重点聚焦于BOM和DOM的学习与解析。

BOM概述：

BOM提供了大量用于访问浏览器功能的对象，这些功能独立于网页内容（后者属于DOM范畴）。目前，BOM已被纳入HTML5规范中，由W3C进行标准化。

BOM核心：window对象详解

window对象：

作为BOM的核心，window对象表示浏览器的一个实例。它既是JavaScript访问浏览器窗口的接口，也是ECMAScript规定的Global对象。这意味着在网页中定义的任何对象、变量和函数，均以window作为其全局作用域对象，因此可以访问parseInt()等全局方法（参考《JavaScript高级程序设计》第三版）。此外，若网页包含框架，每个框架都拥有独立的window对象，这些对象保存在frames集合中，索引从0开始，遵循从左到右、从上到下的顺序。

全局执行环境中的变量和函数均为window对象的属性或方法。全局变量（确切地说是显式声明的全局变量）与直接定义的window属性存在差异：全局变量无法使用delete操作符删除，而window属性可以。此外，尝试访问未声明的变量会抛出错误，但通过查询window对象则不会报错。

window对象包含哪些常见属性或方法？

1. name属性：每个window对象都具备name属性，用于存储框架的名称，通常用于理清窗口关系与框架结构。

2. 窗口位置方法：moveTo(x, y)用于将窗口移动到新坐标位置，moveBy(dx, dy)用于相对当前位置进行水平x和垂直y的移动。这两个方法均不适用于框架窗口。

3. 窗口大小属性：innerWidth/Height表示视图区大小（减去边框宽度），适用于IE、Safari和Firefox；outerWidth/Height返回浏览器窗口整体大小，同样适用于上述浏览器。在Chrome浏览器中，inner和outer属性均返回视图区的大小。

可通过resizeTo(newWidth, newHeight)和resizeBy(dx, dy)来调整窗口大小，前者设定新宽高，后者基于原宽高增加指定值。这两个方法同样不适用于框架结构。

4. window.open(url, target, features, replace)：用于导航到指定URL或打开新窗口。若指定了已有的窗口或框架名称作为目标，则在该窗口/框架中加载指定URL；否则，将新窗口命名为目标窗口。目标关键字可指定为_self、_parent、_top或_blank。

<a href=https://www.jb51.net>click me</a>
  　　<script>
    var link=document.getElementsByTagName("a")[0];
      alert(link.nodeName);   
     window.onload=function(){
      
      link.onclick=function () {
        window.open(link.href,"good","width=400px,height=300px");
        return false;
    
      }  
    }
　　</script

此处特性字符串的具体设置不再赘述，有兴趣的可以点击此处

5. 作为单线程语言，JavaScript允许设置超时值（指定事件后执行代码）和间歇时间值（每隔指定时间循环执行）来调度代码在特定时刻运行。

超时调用：setTimeout(code, milliseconds)。由于JavaScript是单线程语言，任务队列每次仅执行一段代码。若经过设定的时间间隔后任务队列为空，则执行代码字符串；否则，需等待前面的代码执行完毕后再执行。

var al=setTimeout(function () {
      alert("good");
    },5000);
    alert(al); //2

此处,我在5秒后调用了一个匿名函数输出good,窗口先弹出一个警示框显示2，可见setTimeout()函数返回的是一个数值ID，具有唯一性，那么我们就可以通过这个ID来清除超时调用，可以使用clearTimeout(ID)来清除。

间接调用：setInterval()，其接受参数与setTimeout()相同，同样返回一个数值ID，可使用clearTimeout()进行清除（注：实际应使用clearInterval()，此处依原文保留逻辑描述）。

6. 系统对话框方法：alert()、confirm()、prompt()等在前面的博客中有写道,点击这里

BOM其他重要对象

location对象

与其说是BOM中的独立对象，不如说Location是window对象的一个属性，同时也是后续要讲的DOM中document对象的属性。也就是说，window.location和document.location引用的是同一个对象。

location对象属性列表，修改这些属性可以加载新的页面，且会在历史记录中生成新的纪录。使用location.replace()则不会再历史纪录中生成新纪录。

navigator对象：用于识别浏览器的事实标准，其属性和方法主要用于检测浏览器的类型。

其余的如history对象(保存历史纪录)，screen对象(表明客户端能力)，由于在js中编程作用不大，便不再赘述。

------------------------------------------------------------------------------

DOM核心：节点与文档操作

DOM概述：

DOM是基于XML扩展而来的用于HTML的API，依靠节点树结构展开。

首先需要明确一点，文档节点是每个节点的根节点，文档节点有且只有一个子节点既元素html（文档元素）。

Node类型：

DOM1中的一个接口，由DOM所有节点类型（文本节点，属性节点，元素节点）实现，该接口在js中作为Node类型实现。

nodeType属性，每个节点都拥有。由12个数值表示,element--1,attribute--2,text--3......

nodeName属性，对于元素节点，nodeName的值为标签名。

nodeValue属性,对于元素节点，nodeValue的值为null。

节点关系：每个节点都拥有childNodes属性，保存NodeList（类数组对象）对象。每个节点都拥有parentNode属性，指向父节点。在childNodes中的节点拥有相同的parentNode。使用previousSibling和nextSibling属性可以访问兄弟节点。同时childNodes[0]==firstChild,childNodes[childNodes.length-1]==lastChild.

操作节点：appendChild()，向NodeList末尾push一个节点，返回新增的节点。insertBefore()，向NodeList首部unshift一个节点，返回新增节点。replaceChild(newChild,targetChild),替换目标节点，原节点仍在文档中，但已经没有位置。removeChild(tragetChild)，移除节点，与replaceChild()的效果类似。cloneChild(boolean),true时表示完全复制（整个节点与子节点）,false表示基本复制。

Document类型：

表示文档，document对象是HTMLDDocument（继承自Document类型）的实例，表示整个html页面。同时,doument对象也是window对象的一个属性，因此可以作为全局对象访问。document.firstChild==html. document.body==body. document.doctype--->对<!DOCTYPE>的引用。doucment.title--->title document.url--->location.url.

查找元素：getElementById(),getElementsByTagName(),getElementsByClassName().

文档写入：write(),writeln(),open(),close()

Element类型:

getAttribute(),获取特性 对于class，则使用“class”,而不是className，在使用element.className时可以获取class特性。

setAttribute()，设置特性，若特性存在，则替换。否则，创建。

removeAttribute()，彻底删除元素特性。

createElement()，创建新元素。

Text类型:

createTextNode()，创建文本节点，如果连个文本节点是相邻同胞节点，则这个两个文本会连接起来，没有空格。

以上这篇实现JavaScript的组成----BOM和DOM详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。