首页 > 编程语言 > 详细

Javascript Vs DOM Vs BOM

时间:2016-08-10 01:03:22      阅读:128      评论:0      收藏:0      [点我收藏+]


当前想法有些乱,整理不下去了。。。

以后如果想起来,再继续整理。。。。



1、Javascript的组成部分

Javascript的内容分成三个部分:ECMAScript、DOM和BOM。

浏览器,可以看成是ECMAScript运行的宿主环境,然而并不是唯一的宿主环境。


The BOM consists of the objects navigator, history, screen, location and document which are children of window. In the document node is the DOM, the document object model, which represents the contents of the page. You can manipulate it using javascript.

http://stackoverflow.com/questions/4416317/what-is-the-dom-and-bom-in-javascript



The following list shows JavaScript Hosts


https://vkanakaraj.wordpress.com/2009/10/28/javascript-hosts/




JavaScript Vs DOM Vs BOM, relationship explained

https://vkanakaraj.wordpress.com/2009/12/18/javascript-vs-dom-vs-bom-relationship-explained/


Indeed, a complete JavaScript implementation is made up of three distinct parts

  • The Core (based on ECMAScript spec)

  • The Document Object Model (DOM)

  • The Browser Object Model (BOM)

ECMAScript

A Web browser is considered a host environment for ECMAScript, but it is not the only host environment. A list of other host environments listed here.

Apart from DOM and BOM, each browser has its own implementation of the ECMAScript interface.

Document Object Model (DOM)

The Document Object Model (DOM) is an application programming interface (API) for HTML as well as XML.

The DOM maps out an entire page as a document composed of a hierarchy of nodes like a tree structure and using the DOMAPI nodes can be removed, added, and replaced.

DOM level 1 consisted of two modules: the DOM Core, which provided a way to map the structure of an XML-based document to allow for easy access to and manipulation of any part of a document, and the DOM HTML, which extended the DOM Core by adding HTML-specific objects and methods.

DOM Level 2 introduced several new modules of the DOM to deal with new types of interfaces:

  • DOM Views — describes interfaces to keep track of the various views of a document (that is, the document before CSS styling and the document after CSS styling)

  • DOM Events — describes interfaces for events

  • DOM Style — describes interfaces to deal with CSS-based styles

  • DOM Traversal and Range — describes interfaces to traverse and manipulate a document tree

DOM Level 3 further extends the DOM with the introduction of methods to load and save documents in a uniform way (contained in a new module called DOM Load and Save) as well as methods to validate a document (DOM Validation). In Level 3, the DOM Core is extended to support all of XML 1.0, including XML Infoset, XPath, and XML Base.

Note that the DOM is not JavaScript-specific, and indeed has been implemented in numerous other languages. For Web browsers, however, the DOM has been implemented using ECMAScript and now makes up a large part of the JavaScript language.

Other DOMs

  • Scalable Vector Graphics (SVG)

  • Mathematical Markup Language (MathML)

  • Synchronized Multimedia Integration Language (SMIL)

Browser Object Model (BOM)

Browsers feature a Browser Object Model (BOM) that allows access and manipulation of the browser window. Using the BOM, developers can move the window, change text in the status bar, and perform other actions that do not directly relate to the page content.

Because no standards exist for the BOM, each browser has its own implementation.





2、Javascript和DOM的一段历史


Javascript由Netscape开发的。在Javascript出现以前,浏览器的网页所能显示的只是hyper-text document,而Javascript出现之后,使得网页更具有交互性。


JavaScript是一个脚本语言,这表示Javascript只是告诉浏览器要做什么,而并不是自己去做那件事。浏览器会解析Javascript脚本,然后完成相应的工作。


Javascript 1.0发布之后,Netscape公司的Navigator浏览器占领了浏览器市场。与此同时,Microsoft为了与Netscape公司进行抗争,在IE浏览器中提供了对VBScript的支持。


为了对Microsoft的行为做回应,Netscape公司和Sun公司就联合European Computer Manufactures Association(ECMA)制定语言的标准,结果就产生了ECMAScript。


之后的时间里,就产生了Netscape和Microsoft的浏览器大战,其中的原因就是当时的Javascript和VBScript对于操作DOM的方式存在不同。例如,通过id来获取一个元素,Netscape DOM的操作方式是document.layers[‘myid‘],而Microsoft DOM获取相同元素的方式是document.all[‘id‘]。


Netscape和Microsoft的浏览器大战引入了一个buzzword:DHTML。DHTML是Dynamic HTML,它本身并不是一个新的技术,而代表了HTML、CSS和Javascript的融合。刚开始,DHTML允诺可以带来有一个无限可能的世界,但是不久之后就发现,任何深度去使用它的人都会陷入痛苦当中。其中原因就是Netscape和Microsoft两者操作DOM的方式存在不一致性。


DHTML promised a world of possibilities. But anybody who actually attempted to use it discovered  a  world  of  pain  instead.  It  wasn’t  long  before  DHTML  became  a  dirty (buzz)word.


正当浏览器厂商为争夺浏览器市场而大战的时候,W3C组织悄悄地推出了标准的DOM模型(the W3C was quietly putting together a standardized Document Object Model)。幸运的是,浏览器厂商(Netscape、Microsoft、其他浏览器厂商)能够放下彼此的利益冲突,和W3C组织一起制定新的标准。DOM Level 1 是在1998年10月完成。


这里谈到DOM Level 1,其实也存在DOM Level 0。DOM Level 0是浏览器大战之前的概念。那个时候的Javascript也提供了一个查询和操作web document(大多是images和forms)的方法,例如

document.images[2]

document.forms[‘details‘]

这个时候对Document Object Model的尝试被称为DOM Level 0。它的特点就是:这种操作DOM的方式并不是所有浏览器都要遵循的一种标准(Standard),而是Javascript当时自己定义的DOM操作方式。为了实现DOM操作的标准化,于是有了DOM Level 1。



对于DOM,我觉得从两个方面来理解它:第一方面,DOM提供了一种文档的组织方式,第二方面,DOM提供了一系列的API操作用来改变文档的结构、样式和内容。那么,这两个方面是怎么结合的呢?DOM提供了一种文档的组织方式,也就是说,它由一系列的节点和对象组成,这是第一方面;而文档中的节点和对象自身又包含一些属性和方法,这些属性和方法就是API,也就是DOM的第二方面。


对于一个网页,最开始要有“内容”,接着HTML使得“内容”有了一定的文档组织结构,再接着是CSS提供了“内容”的展现样式,最后是Javascript可以对“内容”、“文档组织结构”和“样式”的修改。


3、Javascript和DOM到底是什么关系呢?


第1部分,谈到了完整的Javascript包含三部分:ECMAScript、DOM和BOM。

第2部分,先有了Javascript,后来为了解决“浏览器大战”中DOM操作不一致,出现了DOM标准。


我现在有几个问题比较混乱:

1、DOM标准和Javascript的DOM是什么关系?





DOM标准是独立于任何语言的,无论是脚本语言(script language),还是编程语言(programming language),DOM标准不仅可以应用HTML,也可以应用于XML文件(例如dom4j就可以读取XML文件)。

var el = document.getElementById(myid);

document是定义于javascript操作DOM的api对象


A Web page is a document. This document can be either displayed in the browser window, or as the HTML source. But it is the same document in both cases. The Document Object Model (DOM) provides another way to represent, store and manipulate that same document. The DOM is a fully object-oriented representation of the web page, and it can be modified with a scripting language such as JavaScript.



var paragraphs = document.getElementsByTagName("P");

// paragraphs[0] is the first <p> element

// paragraphs[1] is the second <p> element, etc.

alert(paragraphs[0].nodeName);



It‘s written in JavaScript, but it uses the DOM to access the document and its elements. The DOM is not a programming language, but without it, the JavaScript language wouldn‘t have any model or notion of the web pages. 




Every element in a document—the document as a whole, the head, tables within the document, table headers, text within the table cells—is part of the document object model for that document, so they can all be accessed and manipulated using the DOM and a scripting language like JavaScript.



In the beginning, JavaScript and the DOM were tightly intertwined, but eventually they evolved into separate entities. The page content is stored in DOM and may be accessed and manipulated via JavaScript, so that we may write this approximative equation:


API (web or XML page) = DOM + JS (scripting language)



The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus exclusively on JavaScript in this reference documentation, implementations of the DOM can be built for any language, as this Python example demonstrates:


# Python DOM example

import xml.dom.minidom as m

doc = m.parse("C:\\Projects\\Py\\chap1.xml");

doc.nodeName # DOM property of document object;

p_list = doc.getElementsByTagName("para");



How Do I Access the DOM?


You don‘t have to do anything special to begin using the DOM. Different browsers have different implementations of the DOM, and these implementations exhibit varying degrees of conformance to the actual DOM standard (a subject we try to avoid in this documentation), but every web browser uses some document object model to make web pages accessible to script.


When you create a script, you can immediately begin using the API for the document or window elements to manipulate the document itself or to get at the children of that document, which are the various elements in the web page. Your DOM programming may be something as simple as the following, which displays an alert message by using the alert() function from the window object, or it may use more sophisticated DOM methods to actually create new content, as in the longer example below.






Javascript Vs DOM Vs BOM

原文:http://lsieun.blog.51cto.com/9210464/1836290

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!