关于JS、HTML、jQuery、DOM之间关系的梳理

什么是JavaScript?

      JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

      JavaScript的三大组成部分是:

        1、ECMAScript:JavaScript的核心,描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义),ECMAScript是一套标准,定义了一种语言(比如JS)是什么样子。

         2、文档对象模型(DOM):DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。DOM 通过创建树来表示文档,从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API 可以轻松地删除、添加和替换节点(getElementById、childNodes、appendChild、 innerHTML)。

        3、浏览器对象模型(BOM)对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口,移动、改变和关闭浏览器窗口,提供详细的网络浏览器信息(navigator object),详细的页面信息(location object),详细的用户屏幕分辨率的信息(screen object),对cookies的支持等等。BOM作为JavaScript的一部分并没有相关标准的支持,每一个浏览器都有自己的实现,虽然有一些非事实的标准,但还是给开发者带来一定的麻烦。

什么是DOM?
        文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。

        脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。每一个网页元素(一个HTML标签)都对应着一个对象(object,所谓“对象”,用白话说就是“东西”。object这个词在台湾通常翻译成“物件”)。网页上的标签是一层层嵌套的,最外面的一层是<HTML>,文档对象模型也这样一层层嵌套着,但是通常被理解成一棵树的形状。树根是window或document对象,相当于最外层的标签的外围,也就是整个文档。树根之下(这棵树的图通常是倒着画,就好像遗传谱系或者家谱那样。树根就是唯一的共同祖先)是子一级的对象,子对象也有它自己的子对象,除了根对象以外,所有的对象都有自己的父对象,同一对象的子对象之间就是兄弟关系。                                                

    在这种由“父子兄弟”组成的“单性繁殖家族图谱树”框架结构中,每个网页元素都可以被确切地定位。文档对象模型把整张网页组织成这样的一个树状的结构,树结构中的每一个元素都被视为一个节点(node)。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。

    其他:通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。DOM对象,即是我们用传统的方法(javascript)获得的对象。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。

过程(原创):浏览器获取并加载页面,从上至下解析它的内容,会先建立一个HTML页面的内部模型(DOM),DOM树绘制完毕后,就会执行jQuery(document).ready(function(){});,此时图片或者其他内容较大时可能还未加载完毕,等这些内容加载完毕后,会执行window.οnlοad=function(){}。

什么是jQuery?

        jQuery是js的一个工具库,由John Resig在2006年发布。j代表JavaScript,query是“查询”的意思。也就是说,这个库的意图是基于JavaScript的查询。查询的目标是什么?答案是DOM(文档对象模型)结构中的Node(节点)。

        一个网页就是一个html文档,而网页上的所有内容都是节点,包括文档节点、元素节点、文本节点、注释节点、属性节点等等。而jQuery的查询最主要针对的是元素节点,如段落(p)、锚点(a)、表格(table)等,只有少数方法可以处理文本节点与注释节点。同时jQuery还可以用attr方法方便地对元素节点的属性进行读取/设置。在jQuery出现之前,在js程序中获取元素节点比较麻烦,例如获取id为elem1的节点:

document.getElementById('elem1')
        或者是获取页面上的所有checkbox元素,首先需要获取input类型的元素:document.getElementsByTagName('input')
然后对获得的元素列表进行for循环处理,逐个判断其类型是否为checkbox。如果有更多元化的查询要求,则对应的js代码也会相当复杂。虽然有一些库可以解决这方面的需求,但强大程度、易用性等方面都不太理想。John Resig发现了一个盲点——css样式应用到页面上的元素时,是有一套规则的,即css选择器,浏览器可以通过css选择器找到匹配的元素并将指定的样式应用到这些元素上。也就是说,通过css选择器可以有效地进行元素查找定位,但它最初只被用于样式领域。于是,John Resig根据css选择器编写了jQuery选择器,并对选择器的规则进行了扩充,从而让元素查找变得非常方便。例如,上面2个例子用jQuery可以写为:$('#elem1')与$(":checkbox")

同时,jQuery还有一个核心思想——链式操作,例如:

$('div.con')
 .height(100)
 .show();
        这样的连续调用可以让代码书写更加简洁,也就是jQuery自己的口号:write less, do more。此外,jQuery还提供了浏览器兼容、样式读写、事件绑定与执行、动画等特性,后来又加入了ajax、promise等,再加上方便的插件编写机制,对整个js的生态圈产生了重大的影响,可以说是js历史上影响力最大的一个库。其中选择器引擎后来被单独剥离出来成为sizzle,供其他的js库调用。这部分的工作还影响了官方,在jQuery成功之后,浏览器才有了querySelector与querySelectorAll方法。时至今日,虽然有了querySelector与querySelectorAll,但jQuery的选择器仍然有少部分特性是前2者所无法替代的。

DOM和JavaScript的关系

       我们用JavaScript对网页进行的所有操作都是通过DOM进行的。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容,所以如果你下载一个JavaScript语言的参考帮助文档来查的话,就连妇孺皆知的document.write方法也找不到。

下面这段代码的作用是用一个提示框逐个显示网页中所有链接的网址,代码中被标为红色的部分就是DOM。

var anchorTags = document.getElementsByTagName("a");// 创建了一个名为 anchorTags 的 JavaScript 变量
for (var i = 0; i < anchorTags.length ; i++)
{
   alert("Href of this a element is : " + anchorTags[i].href + "\n");
}

     举例:Document接口是 DOM1核心(DOM1 Core)规范 中定义的第一个接口,而 document 是实现了Document接口的一个宿主对象。document掌控着网页里的所有东西。DOM1核心 为Document 接口定义了 getElementsByTagName() 方法。这个方法返回一个节点列表(NodeList),也就是一种DOM特有的包含节点的数组,包含了所有符合匹配参数条件的标签,按照在文档中出现的顺序排列。于是anchorTags变量现在就成了一个节点列表。 

JQuery对象和DOM对象

1.  DOM对象

        DOM(Document Object Model,文档对象模型),每一份DOM都可以表示成一棵树。先看一个简单例子:代码如下:

// ...省略其他代码
<h3>例子</h3>
<p title="选择你最喜欢的水果">你最喜欢的水果是?</p>
<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>菠萝</li>
</ul>
// ...省略其他代码

       将上面HTML结构描述为一棵DOM树:

      在这棵DOM树中的节点都是DOM元素节点。可以通过JS中的getElementByTagName或者getElementById来获取元素节点。像这样得到的DOM元素就是DOM对象。
2.   jQuery对象
      jQuery对象就是通过jQuery包装DOM对象后产生的对象。
      jQuery对象是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法。在jQuery对象中无法使用DOM对象的任何方法,同样的DOM对象也不能使用jQuery里的方法。

     JQ对象转为DOM对象:1.$(".bind")[0]或$(".bind")。get()[0]    2.$(DOM对象)


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值