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

WEB 技术分类 Javascript DOM(Element Node) BOM的更多相关文章

  1. 【转载】跟随 Web 标准探究DOM -- Node 与 Element 的遍历

    跟随 Web 标准探究DOM -- Node 与 Element 的遍历 这个是 Joyee 2014年更新的,可能是转战github缘故,一年多没有跟新了.这篇感觉还挺全面,就转载过来,如以前文章一 ...

  2. 跟随 Web 标准探究DOM -- Node 与 Element 的遍历

    写在前面 这篇没有什么 WebKit 代码的分析,因为……没啥好分析的,在实现里无非就是树的(先序DFS)遍历而已,囧哈哈哈……在WebCore/dom/Node.h , WebCore/dom/Co ...

  3. JavaScript——DOM或以树形展示的Web页面

    Web网页的一般能够通过document以及document所相关的各种元素组成.当然我们也能够通过层次结构的树形结构在展现Web页面.假设要对一个网页进行改动的话,我们能够通过document对象. ...

  4. JavaScript(核心、BOM、DOM)

    http://www.flyne.org/article/407 JavaScript(核心.BOM.DOM) JavaScript是基于对象和事件驱动的客户端脚本语言.有如下特点: 交互性 安全性( ...

  5. Java web JavaScript DOM 编程

     JavaScript DOM 编程 (1).DOM概述及分类 (2).DOM结构模型:XML DOM 和 HTML DOM 关系? (3).结点,结点树,结点属性与方法? 1.DOM是什么? d ...

  6. JavaScript -- 时光流逝(十二):DOM -- Element 对象

    JavaScript -- 知识点回顾篇(十二):DOM -- Element 对象 (1) element.accessKey: 设置或返回accesskey一个元素,使用 Alt + 指定快捷键 ...

  7. How to get a DOM element's ::before content with JavaScript?

    How to get a DOM element's ::before content with JavaScript? https://stackoverflow.com/questions/443 ...

  8. Is it possible to implement a Firebug-like “inspect element” DOM element highlighter with client-side JavaScript?

    Is it possible to implement a Firebug-like "inspect element" DOM element highlighter with ...

  9. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

随机推荐

  1. Broadcast Reveiver作用

    Broadcast Reveiver作用以及为何要引入(用来接收系统以及自定义消息的) 在系统内通知和判定执行状态 1,系统执行状态,开机了,TF卡插拔,准备关机,电量低了, 2,自定义执行状态,发消 ...

  2. POJ 1013 小水题 暴力模拟

    Counterfeit Dollar Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 35774   Accepted: 11 ...

  3. 深入浅出学习Spring框架(四):IoC和AOP的应用——事务配置

    在前文 深入浅出学习Spring框架(一):通过Demo阐述IoC和DI的优势所在. 深入浅出学习Spring框架(三):AOP 详解 分别介绍了Spring的核心功能——IoC和AOP,光讲知识远远 ...

  4. swift 动态获取label宽度或高度

    func getLabHeigh(labelStr:String,font:UIFont,width:CGFloat) -> CGFloat { let statusLabelText: NSS ...

  5. canvas中window坐标转换为canvas坐标

    function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clien ...

  6. [jstips]向数组中插入一个元素

    向现有数组中插入一个元素是经常会见到的一个需求.你可以: 使用push将元素插入到数组的尾部: 使用unshift将元素插入到数组的头部: 使用splice将元素插入到数组的中间: 上面那些方法都是常 ...

  7. javascript构造函数以及原型对象的理解

    以下是一个构造函数的例子 如果是实例方法,不同的实例化,它们引用的地址是不一样的,是唯一的. //定义一个构造函数 function People(name,age){ this.name=name; ...

  8. centos 安装apache activemq

    安装说明 安装环境:CentOS-6.3 安装方式:源码安装  软件:apache-tomcat-7.0.29.tar.gz下载地址http://activemq.apache.org/downloa ...

  9. kafka服务安装-SuSE Linux Enterprise Server 11 SP3

    kafka是一款分布式消息发布和订阅的系统,具有高性能和高吞吐率. 更多说明请自行了解,直接进入主题. kakfa 安装之前需要安装jdk,不做更多说明 一.下载kafka  进入下载页面:http: ...

  10. Codeforces Round #386 (Div. 2)

    迟到的一次比赛 最近状态很崩溃 网速很慢 然后前面五题看了都有打 但是 只有A B E 是过了的 是时候要反省一下 A.随便判断一下就好 最少的份数嘛 B.画出来之后是一下子左边一下子右边 打一个递归 ...