WEB 技术分类 Javascript DOM(Element Node) BOM

Web technology for developers Web 技术文档

备注：本文介绍web technology的分类，各自职责，因为之前一直就没有搞明白各种技术、各种名词究竟是属于哪个范畴的。

Web technology 总体概况如下:

HTML,CSS不做说明，主要解释下其他内容。

JavaScript

JavaScript由三部分组成：EMCAScript、DOM、BOM。

ECMAScript，由ECMAScript定义，提供核心语言功能。
DOM，提供访问和操作网页内容的方法和接口。
BOM，提供与浏览器交互的方法和接口。

JS只是一门语言，功能取决于运行环境。

操作DOM是JS跑在浏览器这个Context下的其中一部分API。

浏览器还有BOM接口用来操作非DOM的接口。
当JS跑在其他Context下就是其他功能了，比如Node.js中就拥有了文件操作等一大堆系统API。

DOM

The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation(结构化的描述) of the document as a tree. The DOM defines methods that allow access to the tree, so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects, possessing various properties and methods. Nodes can also have event handlers attached to them, and once an event is triggered, the event handlers get executed. Essentially, it connects （从本质上说，它将 web 页面和脚本或编程语言连接起来了）web pages to scripts or programming languages.

Although the DOM is often accessed using JavaScript, it is not a part of the JavaScript language. It can also be accessed by other languages.

HTML DOM 定义了访问和操作 HTML 文档的标准。

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

DOM 方法

Element

The Element interface represents an object of a Document. This interface describes methods and properties common to all kinds of elements.(Element接口是是适应于任何的元素)

Specific behaviors are described in interfaces which inherit from Element but add additional functionality. For example, the HTMLElement interface is the base interface for HTML elements, while the SVGElement interface is the basis for all SVG elements.

Element 属性

Parentnode.children

返回父节点的子节点集合。

Element.className

gets or sets the value of the class attribute of the specified element.

Element.clientHeight Element.clientWidth

获取元素

document.getElementById()

document.getElementsByTagName()

返回节点列表

document.getElementsByName()

返回节点列表

document.getElementsByClassName()

返回节点列表

createElement()

var reference = document.createElement(elementName);

方法的返回值指向新建节点的引用，返回值是一个元素节点，所以nodeType 为1 4、新建的
节点不会自动添加到文档里，只是存在于document里一个游离的对象

createTextNode()

Element方法

getAttribute()

attributeValue = element.getAttribute(attributeName)

setAttribute()

element.setAttribute(attributeName,attributeValue);

属性的名字和值必须以字符串的形式传递
如果这个属性已经存在，那么值将被attributeValue取代
如果这个属性不存在，那么先创建它，再给他赋值

innerHTML

Node属性

nodeName

1.如果节点是元素节点，nodeName返回元素的名称
2.如果给定节点为属性节点，nodeName返回属性的名称
3.如果给定节点为文本节点，nodeName返回为#text的字符串
nodeType

1、元素节点类型值为1
2、属性节点类型值为2
3、文本节点类型值为3
nodeValue

1.如果给定节点是属性节点，返回值是这个属性的值
2.如果给定节点是文本节点，返回值是这个文本节点的内容
3.如果给定节点是元素节点，返回值是null

childnodes

返回一个数组

firstChild

lastChild

previousSibling

nextSibling

parentNode

nodelist.length

返回节点列表长度

Node方法

hasChildNodes()

返回布尔值，看是否有子节点

replaceChild()

reference = element.replaceChild(newChild,oldChild)

返回值指向已经被替换掉的那个子节点的引用

appendChild()

newreference = element.appendChild(newChild)

给定子节点newChild将成为element的最后一个节点, 方法的返回值指向新增节点的引用

insertBefore()

var reference = element.insertBefore(newNode,targetNode)

newNode节点将作为element的子节点出现，并在targetNode节点的前面

节点targetNode必须是element的一个子节点

removeChild()

var reference = element.removeChild(node)
返回值指向已经被删除的子节点的引用
当某个子节点被删除时，这个子节点所包含的子节点也被删除掉

BOM

Javascript之BOM(window对象) 什么是BOM

ECMAScript是JavaScript的核心，但如果要在web中使用JavaScript，那么BOM(浏览器对象模型)才是真正的核心。（《高程三P193》）

BOM的核心对象是window，它表示浏览器的一个实例。

在浏览器中，window对象既是JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。也就是说，在网页中定义的任何一个变量、对象和函数以window作为其Global对象。

什么是BOM？

BOM是browser object model的缩写，简称浏览器对象模型
BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
BOM最初是Netscape浏览器标准的一部分

在BOM章节中你将学到什么

BOM教程中，同学们将学到与浏览器窗口交互的一些对象，例如可以移动，调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象

由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象

全局作用域

既然window对象扮演着ECMAScript中Global对象的角色，那么所有在全局作用域中声明的对象、变量和函数都会变成window的属性和方法。

 var age=28;                                  // 定义全局变量和在window对象上定义属性还是有差别的：全局变量不能通过delete删除，而在window对象上定义的属性则可以。

 window.color="red";                          // var语句添加window属性时，有一个名为[[Configurable]]的特性，这个特性的值被设置为false,因此这样定义的属性不可以通过delete删除。

 //在IE<9是抛出错误，在其他浏览器中都返回false

 delete window.age;

 //在IE<9是抛出错误，在其他浏览器中都返回true

 delete window.color;   //return true 

 alert(window.age);     //28

 alert(window.color);   //undefined

窗口关系及框架

Returns the window itself, which is an array-like object, listing the direct sub-frames of the current window.

对于在一个框架中编写的任何代码来说，其中的window对象指向的都是那个框架的实例。

如果页面中包含框架，则每个框架都有自己的window对象，并保存在frames集合中。

与window对象有关的有top,parent,self对象 Js中的 window.parent , window.top, window.self 详解

WebAPIs