htmlcssjsdom树到底是什么关系 nodejs jsdom使用

HTLM应该是超文本标记语言不是协议,HTTP那东西才是协议,js和javascript实际上是一样的,javascript简称叫js , JScript 是 微软出的 跟javascript差不多,现在都叫JS了,HTML/CSS/javascriptW3C都有制作规范与标准。dom树是属于javascript的一部分,javascript大体包含3个西:ECMAScript语法(在此基础上建立的javascript语法,还如FLASH的ActionScript也基于ECMAScript扩展的),DOM对象(文档),BOM对象(浏览器).而DOM对象的出现是为了方便javascript操作HTML标签而已.BOM对象也就是操作浏览器了.标准的HTML文档实质上就是一个是就一个树形结构的XML文档DOM全名document object model文档对象模型,也就是基于HTML文档出来的,所以操作DOM实际上就是在操作HTML文档对象(每一个标签).CSS只能修饰HTML的样式而已,而javascript能把HTML与CSS相结合,也就是以前所说的DHTML(动态HTML)。http只是传输协议,没他的话网站都打不开了。html这套标签机制也是又W3C规范的,每个浏览器对CSS,HTML,JS的解析都存在问题,所以当时就出现了W3C这个民间的组织,重点是民间组织,O(∩_∩)O哈哈~,组成就是为了说服各大浏览器厂商统一解析CSS,HTML,JS,目前各大浏览器厂商对标准支持的越来越好了(IE最差,可能有钱有势吧,老弄些IE特有属性与方法,而不采用DOM核心方法),但是还是存在差异,希望开发者再也不用为浏览器兼容考虑那一天的到来。

文章二《CSS、HTML、JS、XML的关系》

在网上有告诉你是什么、HTML是什么、JS是什么、XML是什么之类的文章,并且多如牛毛。但是他们一般都没有具体告诉你,它们之中的任意一个或几个结合起来用会是什么或什么效果(请注意:我所指的是它们具体说是以一种什么样的方式结合,并不一定是结合的新产物新名词)。所以出于这种目的,Monyer手写了这篇文章,虽然我参考并综合了诸多文献资料,但仍免不了由于个人偏见及学术问题所引起的诸多谬误,所以如果您有任何问题欢迎批评指教,以便Monyer对文章进行及时更正,以免混淆视听。谢谢!

在文章开始,我认为有必要先分别说说这四项技术都是什么,都能干什么。

HTML是什么:HTML是Hypertext MarkupLanguage的缩写,即超文本标记语言。它是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言,经常用来创建Web页面。HTML文件是带有格式标识符和超文本链接的内嵌代码的ASCII文本文件。用Monyer的话说,HTML就是做网页结构及内容实现的一门语言。

下面这段代码是HTML的基本结构,在“<>”中的为HTML标记,一般一个“<xxx>”标记出现,则必需要一个相应的“</xxx>”对其标示范围进行结束;除非该标记为自关闭标记,一般以“<xxx/>”的形式出现。

<html>
<head>
<title>Monyer'sExample</title>
</head>
<body>
<divid="first">Hello World!</div>
<divid="second">Hello Monyer!</div>
</body>
</html>

代码一

如果把网页(<html>...</html>)看成是人的话,那么<head>...</head>是他的头,但这部分内容通常不会在网页正文中显示;<body>...</body>是他的身体,也是一个网页内容显示部分。所以将以下代码保存为*.html后并双击在网页浏览器中运行,显示的仅仅是:

Hello World!

Hello Monyer!

但所有的HTML标记均是被浏览器执行的对象,并不会显示出来。需要注意的是,在上段代码中承载“HelloWorld !”和“Hello Monyer!”的两个“<div/>”容器内部均有一个id标识,id中的内容是可以随便定制的,但请务必保证id中内容的唯一性——因为它是使别人找到它所在的门牌号。

CSS是什么:CSS是Cascading Style Sheet的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言(节选自《css2.0中文手册》)。如果用|/|0||YE|2的话说,CSS就是定制一个网页上HTML元素属性的语言。

CSS的大概模样如下:

#first{
color:red;
}
#second{
color:green;
font-size:50px;
}

代码二

当把以上代码放进HTML中,它会去尝试找ID(门牌号)为“first”的HTML标签,如果找到,就把该标签内的文字以红色在浏览器中显示出来;当它继续寻找ID为“second”的标签,并找到后,它会把该标签内部的文字以绿色在浏览器中显示出来,但同时该段文字的大小为50像素。具体的插入HTML的方法后文会提到。

JS是什么:JS是Javascript的缩写。JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。用|/|0||YE|2的话说,网页中所有的对数据进行判断、操作以及向浏览者反馈信息的本地代码实现部分均是javascript(当然,由于我们仅仅局限于目前的这四种语言,所以在狭义的角度上,我们不考虑vbs或JavaApplet等脚本语言。请不要总是钻别人的牛角尖哦!呵呵)

JS的大概样子如下:

function a(){
alert('example');
}
a();

代码三

当把以上代码放进HTML代码中,它会在你的HTML载入时,弹出一个内容为“example”的对话框。同样,具体的插入方法会在后文给出。

XML是什么:XML 代表Extensible Markup Language(eXtensibleMarkupLanguage的缩写,意为可扩展的标记语言)。XML是一套定义语义标记的规则,这些标记将文档分成许多部件并对这些部件加以标识。它也是元标记语言,即定义了用于定义其他与特定领域有关的、语义的、结构化的标记语言的句法语言。Monyer的小提示:rss就是xml的一种特殊形式,你也可以理解xml就是数据库。

XML的大概样子如下:

<abc>
<bcd>1</bcd>
<bcd>2</bcd>
<bcd>3</bcd>
</abc>

代码四

从以上代码你可以看出它跟HTML很像,但是区别在于它的标签名称是可以随意定制的,这意味着对于同一段数据,不同的程序员会编出不同的XML代码。也因此在rss的xml应用中,标签被固定下来以适合信息交互。相对HTML来说,XML更追求严谨性,如果说你在HTML代码中没有对标签进行一一对应或是封闭,但是却蒙混过关的话;那么同样的事情发生在XML中就很可能会使你的数据崩溃。

好了,以上便是对这四种语言的简要介绍,下来来看幅图,提前声明的是语言连线所产生的部分并不一定代表是另外一门语言或是新技术,它仅仅代表两种或多种语言会以一种什么样的方式相结合,它们结合后的关系如何(汗!没办法,现在没事挑刺的人特多,所以我还是认为提前声明一下比较保准!嘿嘿)——这也正是本文所要讨论的重点。

DOM是什么:这里的DOM指的是HTML DOM。HTMLDOM是W3C的标准,同时它也是HTML的文档对象模型的缩写(the Document Object Model forHTML)。HTMLDOM定义了用于HTML的一系列标准的对象,以及访问和处理HTML文档的标准方法。通过DOM,可以访问所有的HTML元素,连同它们所包含的文本和属性。其中的内容可以修改和删除,同时也可以创建新的元素。HTMLDOM独立于平台和编程语言。它可被任何编程语言诸如Java、JavaScript和VBScript所使用。用Monyer的话说,HTMLDOM就是HTML语言对外界开通的接口,以便其他语言能够访问或修改HTML内部的元素。

当js需要对html元素进行操作时,DOM是一个很必要的对象。

js一般会以三种方式插入到HTML当中:

方法1:<script>jscode</script>

方法2:<scriptlanguage="javascript" src="jssource.js"></script>

方法3:<bodyonload="simple jscode">...</body>

当然,看过我的XSS的相关文章的朋友知道其实插入js的方式不仅仅这些,但是这些其实才是最基本的。

而譬如你要在“代码一”刚一载入时,就改变其中的元素,使ID为“first”的DIV中的内容也为“HelloMonyer !”

你便可以通过利用DOM对象构造如下代码并插入到HTML代码中的任何位置来实现

<script>
window.onload=functiona(){
document.getElementByIdx_x("first").innerHTML="Hello Monyer!";
}
</script>

代码五

STYLE(样式):当用CSS去修饰HTML中的元素,这一过程可以称为声明HTML元素样式的过程。同js一样,CSS插入HTML也有与之类似的三种方法:

方法一:<style>csscode</style>

方法二:<linkrel="stylesheet" type="text/css" href="css source.css"/>

方法三:<div>...</div>

XHTML是什么:XHTML是The Extensible HyperText MarkupLanguage(可扩展超文本标识语言)的缩写。HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别,XHTML就是一个扮演着类似HTML的角色的XML,所以,本质上说,XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性。

简单的说,xhtml比html要严谨些,但又没像xml那么严重——譬如所有的xhtml标签以及属性必须要小写,属性性必须要加双引号(当然如今的浏览器不管是IE还是FF,对html和xhtml采取兼容措施,这也是XSS产生的根本原因),而且也可以像xml一样自定义部分标签,因此有了极大的灵活性。

而且进入了xhtml时代,大家倡导的是CSS+DIV,这也是web2.0的基础。

DHTML是什么:DHTML只是一种制作网页的概念,实际上没有一个组织或机构推出过所谓的DHTML标准或技术规范之类的。DHTML不是一种技术、标准或规范,DHTML只是一种将目前已有的网页技术、语言标准整和运用,制作出能在下载后仍然能实时变换页面元素效果的网页的设计概念。DHTML就是动态的html,Dynamic HTML。传统的html页面是静态的,Dhtml就是在html页面上加入了javascript脚本,使其能根据用户的动作作出一定的响应,如鼠标移动到图片上,图片改变颜色,移动到导航栏,弹出一个动态菜单等等。

一般如:<img src="picsource" onmouseover="this is a picture!">

Expression是什么:Expression是微软为了使样式表能够在修饰HTML样式的同时执行javascript脚本而在IE浏览器中增加的一个功能(在加入该功能不久,FF也增加了该功能,不过仅仅支持很简单的js表达式),这样你可以做譬如:图片的自适应宽度,表格的隔行换色等等。

譬如:img{max-width:500px;width:expression_r(document.body.clientWidth> 500 ? "500px" : "auto");}

XMLHTTP是什么:最通用的定义为:XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
来自MSDN的解释:XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft® XML Document Object Model(DOM)处理回应。
现在的绝对多数浏览器都增加了对XmlHttp的支持,IE中使用ActiveXObject方式创建XmlHttp对象(在IE7中已经支持通过xmlhttprequest来创建xmlhttp对象),其他浏览器如:Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。

一个简单的定义IE的xmlhttp的对象及应用的实例如下:

var XmlHttp=newActiveXObject("Microsoft.XMLhttp");
XmlHttp.Open("get","url",true);
XmlHttp.send(null);
XmlHttp.onreadystatechange=functionServerProcess(){
if(XmlHttp.readystate==4 ||XmlHttp.readystate=='complete')
{
htmlcssjsdom树到底是什么关系 nodejs jsdom使用
alert(XmlHttp.responseText);
}
}

代码六

XSLT是什么:XSLT的英文标准名称为eXtensible Stylesheet LanguageTransformation。根据W3C的规范说明书(http://www.w3.org/TR/xslt),最早设计XSLT的用意是帮助XML文档(document)转换为其它文档。但是随着发展,XSLT已不仅仅用于将XML转换为HTML或其它文本格式,更全面的定义应该是:XSLT是一种用来转换XML文档结构的语言。

这里不对XSLT进行举例,关于XSLT的基础详情请参看《XSLT轻松入门》。

SGML是什么:SGML——标准通用标记语言(standard generalized markuplanguage)。由于SGML的复杂,导致难以普及。这是一个SGML的例子:typically something likethis 。同时SGML也是一个ISO标准: "ISO 8879:1986 Information processing --Text and office systems -- Standard Generalized Markup Language(SGML)" SGML有非常强大的适应性,也正是因为同样的原因,导致在小型的应用中难以普及。HTML 和 XML同样衍生于SGML:XML可以被认为是SGML的一个子集,而HTML是SGML的一个应用。XML的产生就是为了简化SGML,以便用于更加通用的目的。比如语义Web.它已经应用于大量的场合,比较著名的有XHTML、RSS 、XML-RPC 和SOAP 。

XSL-FO是什么:XSL在转换XML文档时分为明显的两个过程,第一转换文档结构;其次将文档格式化输出。这两步可以分离开来并单独处理,因此XSL在发展过程中逐渐分裂为XSLT(结构转换)和XSL-FO(formattingobjects)(格式化输出)两种分支语言,其中XSL-FO的作用就类似CSS在HTML中的作用。

AJAX是什么:终于到了最后这个爆炸式的东东了,这可是个重头戏,web2.0思想的核心。CSS+HTML+JS+XML+DOM+XSLT+XMLHTTP==AJAX。AJAX全称为“AsynchronousJavaScript andXML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。

在AJAX中,xmlhttp用来在不改变页面的情况下传输数据,其中传输的数据即是XML,然后通过XSLT将其格式化,利用js通过dom对象将其显示到HTML中,同时利用CSS确定数据的显示及位置。

在2006年,是否掌握AJAX技术是对一个网站工程师水平的鉴定。07年,这项技术事实上已经延伸到了网络中的任何一个角落,譬如你的博客,你的网络邮箱,譬如某些搜索引擎,c2c平台等等。

总结:好啦,文章到这里就告一段落,我数了数,7000多字了哦,好像是我博客里原创的最多的一篇了。我从下午四点多一直打到现在九点多,晚饭还没有吃,希望你们能认认真真地读完这篇文章——因为它对你们对于网站建设(将来成为网站工程师哦)的理解至关重要,也会使你们在网站建设上少走一些弯路。文中对于“名词”定义的部分,为了追求严密性和完整性,我没有按自己的意识乱来,而是取各家之所长,再根据自己对它的理解进行相关补充结合来的产物,在此声明一下,以免有照抄之嫌。

本文参考文献:《ProfessionalAJAX》《XSL简明教程》《XSLT轻松入门》《css2.0中文手册》等。

  

爱华网本文地址 » http://www.aihuau.com/a/25101013/156423.html

更多阅读

人活着的意义到底是什么? 佛家讲人活着的意义

人活着的意义到底是什么?——简介徐朋飞谈人生的意义。人生本没有什么意义,如果非要给它加一个意义,那就是不断的付出爱。人活着的意义到底是什么?——方法/步骤人活着的意义到底是什么? 1、意义一:不断的成长我出生在一个贫穷的农村,小

丹羽宇一郎:中国那些人知不知道法西斯主义到底是什么意思?

丹羽宇一郎:中国那些人知不知道法西斯主义到底是什么意思?日本国前驻华大使丹羽宇一郎说:最近,中国在批评日本时经常用到"法西斯主义"这个词。中国那些人知不知道法西斯主义到底是什么意思?国家优先,压制个人自由,不让人民说话,压榨人民,这

股指期货到底是什么意思?(期指之1) 期指和期货的区别

股指期货到底是什么意思? 股指期货:全称为“股票指数期货”,是以股价指数为依据的期货,是买卖双方根据事先的约定,同意在未来某一个特定的时间按照双方事先约定的股价进行股票指数交易的一种标准化协议。股票市场是一个具有相当风险的

太岁到底是什么?神物、动物、植物、真菌? 太岁是什么动物

新闻报道在青岛近郊的张村河滩上,今年五月,有人发现了一个神奇的庞然大物,1.2米见方,六七百斤重。后经专家鉴定,这个神奇物件就是太岁。什么是太岁?我从网上查了好一阵子。你知道太岁到底是什么吗?在中国民间,“太岁”向来被人们看作是一

声明:《htmlcssjsdom树到底是什么关系 nodejs jsdom使用》为网友我心甘也情愿分享!如侵犯到您的合法权益请联系我们删除