实现JavaScript的组成----BOM和DOM详解

我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型)。

今天主要学习BOM和DOM。

BOM:

BOM提供了很多对象,用来访问浏览器的功能,这些功能于网页内容无关(这些是DOM的事),目前,BOM已经被W3C搬入了HTML5规范中。

window对象:

BOM的core,表示浏览器的一个实例,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在网页中定义的任何一个对象,变量和函数,都已window作为其Global对象,因此有权访问paresinInt()等方法。(摘自高程三)。此外,如果一个网页中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中(索引0开始,ltr,ttb)。

首先,全局执行环境中的变量,函数都是window对象的属型和方法。当然,全局变量与直接定义的window属型有一点差异,全局变量(准确的说应该是显式声明的全局变量)无法使用delete,而window属性就可以。此外,还有一个细节需要注意,尝试访问未声明的变量会出错,但是使用查询window对象就没有问题。

那么,window有哪些常见的属性或者方法呢?

1.name,每个window对象都有name属性,包含框架的名称。通常是为了了解窗口关系与框架。

2.窗口位置方法:moveTo(新位置的x坐标,新位置的y坐标),moveBy(水平移动x,垂直移动y)。这两个方法不适用框架。

3.窗口大小属性:innerWidth/Height(视图区(减去边框的宽度)的大小/* IE,Safari,firefox */),outerWidth/Height(返回浏览器窗口的大小/*IE,Safari,firefox */).在Chrome中,inner,outer均返回视图区的大小。

当然,可以通过resizeTo(新窗口width,新窗口height),resizeBy(比原宽度提高x,比原高度提高y)来改变窗口大小。这恋歌方法不适用框架结构。

4.window.open(URL,窗口目标,特性字符串,新页面是否取代浏览器历史纪录中当前加载页面的boolean)用于导航到一个特定的url或者打开一个新的窗口。如果指定窗口目标,且窗口目标是已有的窗口或者框架的名称,那么就会在有改名成的窗口或者框架中加载指定的url。否则,就将打开的新窗口命名为目标窗口。当然,窗口目标可以指定的关键字有_self,_parent,_top,_blank。

<a href=http://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.作为一门单线程语言,js仍然允许设置超时值(指定的事件过后执行代码)和间歇时间值(每隔指定的时间循环一次)来调度代码在特定的时刻执行。

超时调用:setTimeout(js代码字符串,毫秒时间),作为一个单线程语言,js的任务队列每次只能执行一段代码,若经过设置的时间间隔过后任务队列为空,则执行代码字符串,否则,要等到前面的代码执行完成后再执行。

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

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

间接调用:setInterval(),他接受的参数与setTimeout()相同,同样返回一个数值ID,使用clearTimeout()清除。

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

location对象

与其说是BOM中的对象,不如说Location是window对象中的一个属性,当然,也是后面要讲的DOM中document对象的属性,也就是说,window.location和document.location引用同一个对象。

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

hash "#contents" 返回url中的hash,没有为“”
host "www.google.com" 返回服务器名和端口号(如果有)
hostname "www.google.com" 返回不带端口号的服务器名称
href "www.google.com" 返回当前页面的完整url,调用了assign()
pathname ''/wileyCDA/' 返回目录名称
port "8080" 返回端口号,没有则返回空字符串
protocol "http:" 返回页面使用的协议
search "?=javascript" 返回查询字符串,以问号开头

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

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

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

DOM:

DOM是基于XML后经过扩展用于HTML的API,DOM依靠节点树展开。 

首先需要明确一点,文档节点是每个节点的根节点,文档节点有且只有一个子节点既元素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详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2016-05-15

javascript学习笔记(三)BOM和DOM详解

js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W3C 的标准: [所有浏览器公共遵守的标准] 2. BOM 是 各个浏览器厂商根据 DOM 在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] 3. window 是 BOM 对象,而非 js 对象: DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API). BOM

PHP中遇到BOM、&lt;feff&gt;编码导致json_decode函数无法解析问题

昨天同事遇到一个奇怪的问题,就是以下代码,无法通过JSON校验,也无法通过PHP的json_decode函数解析. 复制代码 代码如下: [     {         "title": "",         "pinyin": ""     } ] 可能聪明的你已经猜到其中包含有不看见的特殊字符,在vim下查看: 复制代码 代码如下: [     {         <feff>"title&quo

Javascript之BOM(window对象)详解

ECMAScript是JavaScript的核心,但在web使用JavaScript,那么BOM(浏览器对象模型)才是真正的核心. BOM的核心对象是window,它表示浏览器的一个实例. 在浏览器中,window对象既是JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.也就是说,在网页中定义的任何一个变量.对象和函数以window作为其Global对象. 1.全局作用域 既然window对象扮演着Global对象,那么所有在全局作用域中声明的对象.变

Javascript BOM学习小结(六)

1.BOM简介. 所谓的BOM即浏览器对象模型(Browser Object Model).BOM赋予了JS操作浏览器的能力,即window操作.DOM则用于创建删除节点,操作HTML文档.BOM尚无正式的标准,导致各浏览器对于BOM方法的支持各有不同,因此需要具体问题具体对待. 2.window对象. window对象是BOM的核心,window对象指当前的浏览器窗口.所有JS全局对象.函数以及变量都属于window对象.全局变量是window对象的属性.全局函数是window对象的方法.甚至

Node.js实现批量去除BOM文件头

之前的同事写了一个工具,但有bug,就是在替换文件后原文件的格式变成utf8 BOM了,这种带BOM的XML在Mac下可能读取不出来,所以就需要写个工具处理一下. 其实思路比较简单,首先遍历目录,然后读取目录,将文件头三个字节去除掉,然后保存为utf-8格式的文件即可,直接上代码吧 :) 复制代码 代码如下: var fs = require('fs'); var path = "目标路径.."; function readDirectory(dirPath) {     if (fs

javascript的BOM汇总

setTimeout() //延时器,只执行一次代码 clearTimeout() //清除演示器 setIntervla() //定时器,根据指定时间间隔执行一次代码 clearInterval() //清除定时器 window.history.length //访问的历史页面的数目 window.history.forward() //前一页 window.history.back(); //后一页 window.history.go(-1); //跳转至曾经访问过的某个页面,负值表示向后跳

javascript bom是什么及bom和dom的区别

什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C BOM最初是Netscape浏览器标准的一部分 在BOM章节中你将学到什么 BOM教程中,同学们将学到与浏览器窗口交互的一些对

JavaScript 浏览器对象模型BOM使用介绍

BOM也叫做浏览器对象模型,它提供了很多对象,用于访问浏览器的功能;这些功能与任何网页内容无关; BOM缺少规范,每个浏览器提供商都按照自己的想法去扩展它,那么浏览器共有对象就成了事实的标准; 一 window对象 // BOM的核心对象是window,它表示浏览器的一个实例; // window对象处于JavaScript结构的最顶层; // 对于每个打开的窗口,系统都会自动为其定义window对象; // window对象同时扮演着ECMAScript中Global对象的角色,因此所有在全局

Javascript基础知识(三)BOM,DOM总结

window对象: 打开和关闭窗口: window.open() 三个参数:1.载入新窗口的页面的URL 2.新窗口的名字 3.特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值. window.close() 系统对话框: 1.alert("hello world!"); 2.confirm("Are you sure?");---选择 3.prompt("你的名字是说明?",""); 时间间隔 setT

javascript中BOM基础知识总结

一.什么是BOM BOM(Browser Object Document)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window: BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性: BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分. 二.学习BOM学什么 我们将学到与浏览器窗口交互的一些对象,例如

javascript中json基础知识详解

大致介绍 JSON(JavaScript Object Notation  JavaScript对象表示法),JSON是一种数据格式,不是一种编程语言.虽然它的名字中有JavaScript但是它却不属于JavaScript,就像Java和JavaScript的关系一样.而且,并不是只有JavaScript才使用它,毕竟 JSON 只是一种数据格式.很多编程语言都有针对 JSON 的解析器和序列化器. JSON是由Douglas Crockford在2001年提出,为了取代XML 语法 JSON的

JavaScript中BOM对象原理与用法分析

本文实例讲述了JavaScript中BOM对象原理与用法.分享给大家供大家参考,具体如下: 百度百科 BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的对象结构.BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象. 我的理解 博主是这么理解的,BOM对象指的是window对象,而window对象并不是JavaScrip

javascript DOM 操作基础知识小结

DOM添加元素,使用节点属性 DOM添加元素,使用节点属性 //涂聚文 geovindu@163.com var nr = 1; function addItem() { var list = document.getElementById("list"); var newNode = document.createElement("li"); var newLink = document.createElement("a"); newLink.

JavaScript ES6常用基础知识总结

ES6 let与const及其相关 块级作用域 ES6新增了块级作用域,总结一句话大致就是:大括号{}包起来的代码块基本山都可以当做块级作用域. 常见的有 直接使用{}包起来: { var a = 4 } 函数体大括号,if-else大括号,for循环大括号,switch大括号,try-catch大括号等. 需要注意的是,for循环,每一次循环时的{}都是一个独立的块级作用域. for(let i=0; a < 5; i++){ let j = i } 上面代码循环了五次,实际上有五个独立的j.

javascript中常用编程知识

1.null 与 undefined * 从一个对象中获取某个属性,如果该对象及其 prototype 链 中的对象都没有该属性的时候,该属性的值为 undefined . * 一个 function 如果没有显式的通过 return 来返回值给其调用者的话,其返回值就是 undefined .有一个特例就是在使用new的时候. * JavaScript 中的 function 可以声明任意个形式参数,当该 function 实际被调用的时候,传入的参数的个数如果小于声明的形式参数,那么多余的形

JavaScript中Object基础内部方法图

对于JavaScript对象的操作基本上都会调用底层的对象内部方法,我们可以看出在ES6标准中定了14种内部方法. 双 [[]] 代表内部方法,在一般的JS代码中不可见,你可以调用.删除或覆写(通过Proxy对象)普通方法,但是无法操作内部方法. 下面通过一个思维导图来展示这14种基础的内部方法 以上就是这张非常详细的用法图,基本语法都做了高亮显示,大家在学习的时候如果还有任何不明白的地方,可以在下方的留言区讨论,也可以参考我们之前对这个知识点的总结内容.

JavaScript运动原理基础知识详解

在这篇文章里,我将把JS的运动由简如深的进行分析: 运动基础 主要步骤为: 清除定时器,保证运动过程中只有一个定时器 开启定时器 开始运动,同时加入判断以便在需要时停止运动.将移动函数进行了简单的封装. <script type='text/x-handlebars-template' id='list-item'> {{#if items}} <ul id='mylist'> {{#each items}} <li><a href='{{url}}'>{{

javascript之正则表达式基础知识小结

元字符 ^ $ . * + ? = ! : | \ / ( ) [ ] { } 在使用这些符号时需要用"\"来进行转移. 如果记不清楚那些标点符号需要转移,可以在使用标点符号时都使用反斜杠"\" 简单匹配 1.直接量 /javascript/ 匹配带有"javascript"的字符串 比如"javascript is an object-oriented scripting language" 2.[ ] /[abc]/ 匹配

javascript Array对象基础知识小结

对于Array对象我的总结思想是:5法,3招,12式 1.声明5法:只针对一维数组,当然还有二维三维,这里就不做解释了 复制代码 代码如下: var a = new Array(); var a = new Array; var a = new Array(10);//创建Array对象,并指定数组中项的个数 var a = new Array("red","blue","green"); var a = ["red",&qu