`

Dom与JavaScript

阅读更多
1.javaScript
基本概念: JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,遗留的速度问题,为客户提供更流畅的浏览效果。
于DOM的关系:DOM是Document Object Model(文档对象模型)的简称,它是让javascript与页面交互的一种方式,能够动态修改文档中的节点、元素、属性等。 DOM不仅适用于xhtml文档,对于所有的xml文档dom都是可以使用的。
两个内置函数:
Eval函数:用于计算一个(字符串)表达式的值
IsNaN函数:用于验证参数是否为NaN( 非数字 ),返回一个布尔值

2.什么是DOM
    DOM是Document Object Model文档对象模型的缩写,以一种独立于平台和语言的访问方式访问和修改一个文档的内容和结构。换句话说,是表示和处理一个HTML或XML文档的常用方法。可以用于任何编程语言。是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。是一种树和节点的关系。
文档对象模型也这样一层层嵌套着,但是通常被理解成一棵树的形状。树根是window或document对象,相当于最外层的标签的外围,也就是整个文档。
由内向外 root -> nodes ->node:window   document
我们用JavaScript对网页进行的所有操作都是通过DOM进行的。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。

个人理解:是应用javaScript的一部分,DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。

DOM和JavaScript
大家经常问到的“有关JavaScript” 的问题,95%其实是DOM的问题。人们在习惯上不爱说DOM,要么就说JavaScript,要么就扯到“Ajax”,我们用JavaScript对网页进行的所有操作都是通过DOM进行的。DOM 属于浏览器,而不是JavaScript语言规范里的规定的核心内容,所以如果你下载一个JavaScript语言的参考帮助文档来查的话,就连妇孺皆知 的document.write方法也找不到。
下面这段代码的作用是用一个提示框逐个显示网页中所有链接的网址,代码中被标为红色的部分就是DOM。
var anchorTags = document.getElementsByTagName("a");
for (var i = 0; i < anchorTags.length ; i++)
{
   alert("Href of this a element is : " + anchorTags[i].href + "/n");
}
这样一来哪些是核心JavaScript,哪些是DOM,各自起什么作用,就可以一目了然了。
var anchorTags =
创建了一个名为 anchorTags 的 JavaScript 变量。
document.getElementsByTagName("a")
Document接口是 DOM1核心(DOM1 Core)规范 中定义的第一个接口,而 document 是实现了Document接口的一个宿主对象。document掌控着网页里的所有东西。
DOM1 核心 为Document 接口定义了 getElementsByTagName() 方法。这个方法返回一个节点列表(NodeList) ,也就是一种DOM特有的包含节点的数组,包含了所有符合匹配参数条件的标签,按照在文档中出现的顺序排列。于是anchorTags变量现在就成了一个 节点列表。
;
分号是JavaScript里的语句结束符号。
for (var i = 0; i <
这是编程语言里典型的“for循环”。声明了循环变量i,逐个处理anchorTags节点列表里的每一个节点。这也是JavaScript的东西。
anchorTags.length
DOM1 核心 定义了NodeList接口的 length 属性。这个属性返回一个整数,就是节点列表里包含的节点数目。说起来JavaScript 的数组也有一个 length属性。
; i++) {
典型的JavaScript变量增1运算。
alert(
alert() 是一个DOM方法,弹出一个提示框,显示传递给该方法的参数(字符串)。话说这个东西是通称 0级DOM(DOM level 0)或DOM0的一些历史既成的编程接口当中的一员。DOM0 是一套“被某些浏览器所支持”的编程接口(事实上,市场上不存在不支持DOM0的浏览器,只有在某些软件爱好者的收藏品中才能见得到),不属于任何DOM 标准规范。
"Href of this a element is : " +
一个字符串字面量和一个字符串链接符。JavaScript的东西。
anchorTags[i].href
href 是 DOM1 HTML 规范中定义的 HTMLAnchorElement 接口的属性,返回链接(<a>)元素的href属性的值。
在此我们用了像anchorTags[i]这样的用法,这和 JavaScript里访问第i个数组项的语法是一样的。语言中性(language-neutral,与具体语言无关)的所谓“DOM方式”访问某个节 点列表中的一个项目的办法是使用在NodeList接口中定义的item() 方法:anchorTags.item(1).href。但是大多数JavaScript实现程序都允许你使用这种简单的类似于数组的语法,而这也是大多 数人实际在用的方式。
+ "/n");
又一个字符串连接。在字符串的末尾加入一个回车符。
}
“for循环”结束。
分享到:
评论

相关推荐

    html dom 底层 javascript

    ### HTML DOM 底层 JavaScript 知识点解析 ...总之,HTML DOM底层JavaScript的深入理解,不仅需要掌握DOM的基本概念和接口,还需要熟悉如何使用JavaScript与DOM进行交互,从而实现网页的动态功能和响应性设计。

    javascript_DOM操作

    JavaScript DOM(Document Object Model)是Web开发中的一个关键概念,它允许我们通过JavaScript与HTML或XML文档进行交互。DOM是一个树形结构,将网页内容表示为节点和对象,每个元素、属性、文本甚至注释都是一个...

    dom javascript

    2. **JavaScript与DOM交互**:掌握如何使用JavaScript来查找、创建、修改和删除DOM节点。这包括使用`getElementById`、`getElementsByTagName`等方法选择特定元素,以及使用`appendChild`、`removeChild`等方法进行...

    JavaScript dom操作 dom元素查询 示例代码

    JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...

    JavaScript DOM编程艺术.pdf

    《JavaScript DOM编程艺术》是Jeremy Keith所著的一本关于JavaScript和DOM(文档对象模型)编程的经典图书,它不仅阐述了JavaScript和DOM的基本知识,还着重讲解了DOM编程技术背后的思路和原则。本书被赞誉为Web设计...

    IEdom查看javascript工具

    3. **学习与教育**:对于初学者,这是一个很好的实践平台,能直观地了解DOM操作和JavaScript与DOM的交互。 总结来说,"IEdom查看javascript工具"是前端开发者在使用Internet Explorer时的得力助手,通过它,我们...

    HTML DOM 参考手册 电子书

    9. **DOM与JavaScript的结合**:DOM是JavaScript与HTML交互的核心,书中会介绍如何使用JavaScript操作DOM,实现动态网页效果,如动画、表单验证、AJAX请求等。 10. **性能优化**:处理大型DOM树时,性能是一个重要...

    JavaScript.DOM编程艺术(第2版)附录及源码.rar

    《JavaScript.DOM编程艺术(第2版)》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是Web开发中的核心组件,它允许程序员通过JavaScript来操作HTML和XML文档的结构、内容和样式。这本书...

    dom和javascript关系

    在JavaScript中,DOM是至关重要的,因为它是JavaScript与网页内容交互的主要桥梁。JavaScript可以通过DOM API来访问和操作网页元素,如查找特定元素、修改元素内容、添加或删除元素等。例如,`document....

    JavaScript_DOM编程艺术第二版(中文)

    JavaScript DOM编程艺术第二版是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍,主要面向希望提升JavaScript客户端开发技能的程序员。DOM是Web页面的结构化表示,JavaScript通过DOM API可以...

    JavaScript DOM编程艺术(第2版pdf)+源代码

    JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍,专注于讲解如何使用JavaScript与Document Object Model(DOM)进行交互。DOM是Web页面的结构化表示,它允许我们通过编程方式操纵HTML和XML...

    经典之作javascript dom编程艺术源码

    9. **DOM遍历与选择**:`NodeIterator`和`TreeWalker`接口提供了一种更高级的遍历DOM的方法,可以根据特定规则选择节点。 10. **DOM变更事件**:DOM操作如添加、删除元素时,会触发DOM事件,如`DOMNodeInserted`和`...

    XML-DOM.rar_DOM

    8. **DOM与JavaScript**:DOM是JavaScript操作XML文档的主要接口,JavaScript提供了丰富的DOM API供开发者使用。通过JavaScript,我们可以动态修改网页内容,实现动态网页效果。 9. **DOM与XSLT**:XSLT...

    javascript Dom 编程艺术

    读者将看到JavaScript、 HTML5和CSS如何协作来创建易用的、与标准兼容的Web设计,掌握使用JavaScript和DOM通过客户端动态效果和用户控制的动画来加强 Web页面的必备技术;同时,还将对如何利用库提高开发效率有全面...

    JavaScript DOM编程艺术【第2版&高清】.pdf

    但是,根据标题《JavaScript DOM编程艺术【第2版&高清】.pdf》和描述“JavaScript DOM编程艺术,高清资源,无比经典,值得拥有”,我们可以推断这本书主要讲述了JavaScript中DOM(文档对象模型)的相关编程技术。...

    dom手册

    总结,DOM手册作为中文参考资源,涵盖了DOM的基本概念、节点操作、事件处理、与JavaScript的结合使用等多个方面,对Web开发者来说是一份宝贵的教程。通过深入学习和实践,开发者可以更有效地操纵网页内容,创建出...

    dom学习总结

    9. **DOM和JavaScript的关系**:在Web开发中,DOM与JavaScript紧密相关,JavaScript是操作DOM最常用的工具。通过JavaScript,我们可以动态修改网页内容,实现交互性。 10. **框架中的DOM操作**:现代前端框架如...

    W3C DOM模型参考手册

    ##### 2.2 DOM与JavaScript的关系 尽管DOM本身并不依赖于任何特定的编程语言,但在Web开发中最常见的使用方式是通过JavaScript来访问和操纵DOM。JavaScript提供了对DOM的访问接口,使得开发者能够动态地更改网页的...

Global site tag (gtag.js) - Google Analytics