javascript系列(二)DOM

DOM(文档对象模型)描绘了一个层次化的节点树。

1.1 Node类型

  节点类型一共可分为十二种,且其都是继承自Node类型,其都共享相同的基本属性和方法。其中主要的节点类型有元素节点(element node)、属性节点(attribute node)、文本节点(text node)。要想了解节点的具体信息,可以使用nodeName和nodeValue两个属性,而nodeType可以确定节点的类型。

  其中,元素节点的nodeType为1,属性节点的nodeType为2,文本节点的nodeType为3.

 if (someNode.nodeType == Node.ELEMENT_NODE){
       alert(‘这是一个元素节点‘);
}//由于在IE的特殊性,所以上面的代码会出现错误,为了确保浏览器的兼容,所以最好还是使用下面的方法来确定其节点类型。
if (someNode.nodeType == 1){
     alert(‘这是一个元素节点‘);
}

  在每个节点中,其都有一个childNodes属性,其中保存这一个NodeList对象(注意:NodeList能够自动反映DOM结构的变化,其是动态的。)。同样,每个节点都有一个parentNode属性,该属性指向文本的父节点。在某个节点的childNodes中所有的列表都具有相同的父节点。所以在某个Node中,其有多个方法来操作节点,以一图来表示。

注意:firstElementChild、nextElementSibling、

时间: 2024-09-29 16:11:07

javascript系列(二)DOM的相关文章

javascript系列之DOM(二)

原生DOM扩展 我们接着第一部分来说,上文提到了两种常规的DOM操作:创建文档片段和遍历元素节点.我们知道那些雨后春笋般的库,有很大一部分工作就是提供了一些优秀 的DOM操作API.可见原生的一些方法和属性,还不能很灵活快捷的来完成我们所希望的操作.下面将总结出总结出几种很实用的扩展方法.包括 after()和before(), A:after()和before() 1 function after(elem){ 2 if(this.parentNode){ 3 this.parentNode.

javascript系列之DOM(一)

原文:javascript系列之DOM(一) DOM(document object moudle),文档对象模型.它是一个中立于语言的应用程序接口(API),允许程序访问并修改文档的结构,内容和样式.也就是一切语言(js,php 等)对web的操作是建立在DOM的基础之上的.行为的发生,首先必须获取文档中的一个对象作为其载体. DOM发展史 在漫长的互联网发展史上DOM一共经历了四个阶段.当前,我们正处在DOM 3阶段. DOM 0 :不是W3C规范,只是Netscape Navigator

Kidney日拱一卒JavaScript系列Chapter9 DOM

Chapter 9 文档对象模型 1.DOM树 DOM是HTML和XML文档提供的一系列API的集合. DOM将HTML和XML文档描绘成一个由多层次节点构成的树结构,文档中所有的元素都是一个节点. 树结构的根节点(又称文档元素)有且只有一个. HTML文档的根节点始终是<html>,XML文档则可以是任何元素. 1.1 使用nodeType检测节点类型 节点(node)一共有12种类型,每种类型用一个1~12之中的数字表示. 数字 表达式 说明 1 Node.ELEMENT_NODE 元素类

javascript系列之DOM(三)---事件

事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定元素,按下某些按键,改变窗口.当然还可能是浏览器上某个页面加载完毕.通过 javascript你可以监听特定事件的发生,为事件绑定处理函数. DOM事件流 在DOM中,当某一个特定的HTNL元素产生事件时,该事件会在该元素节点与根节点之间按特定的顺序传播,所经过的节点都会监听到该事件(但不一定执行该 事件对应的动作,因为未绑定事件处理函数),这个传播过程

JavaScript系列二:变量、数组、流程控制、函数以及事件响应

JavaScript入门内容的复习:JavaScript入门 输出内容 document.write("xxx"); 弹出警告窗口 alert("xxx"); 弹出确认窗口 confirm("xxx"); 弹出提问窗口 prompt("xxx"); 单行注释 // 多行注释 /* */ 函数语法格式 function xxx() { xxxx; } 引入JS外部文件的方式 <script src="xx.js&

深入理解JavaScript系列(24):JavaScript与DOM(下)

介绍 上一章我们介绍了JavaScript的基本内容和DOM对象的各个方面,包括如何访问node节点.本章我们将讲解如何通过DOM操作元素并且讨论浏览器事件模型. 本文参考:http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-lesson-2/ 操作元素 上一章节我们提到了DOM节点集合或单个节点的访问步骤,每个DOM节点都包括一个属性集合,大多数的属性都提供为相应的功能提供了抽象.例如,如果有一个带有

highcharts 结合phantomjs纯后台生成图片系列二之php2

上篇文章中介绍了phantomjs的使用场景,方法. 本篇文章详细介绍使用php,highcharts 结合phantomjs纯后台生成图片.包含一步步详细的php代码 一.highcharts 结合phantomjs纯后台生成图片系列的准备: 下载phantomjs解析插件,从highcharts官方下载所需插件. 新建一个工程文件夹phantomjs,所必备的js文件有: highcharts 结合phantomjs纯后台生成图片系列二之php 其中jquery.js为 v1.7.1; hi

初探JavaScript(二)——JS如何动态操控HTML

除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次接触JS,没有必要花费过多时间去钻死胡同,先混个脸熟,以后再来拜访也未尝不可嘛.就这样,踉踉跄跄.囫囵吞枣似的已经过五关斩六将,到达第十一章. 书中有几个章节并没有从语法.技术等层面介绍JavaScript,而是站在一个全局的角度,立足编程原则和习惯道破了我们该如何看待和使用这门语言,主要有以下几点: Jav

深入理解JavaScript系列(结局篇)(转载)

深入理解JavaScript系列(结局篇) 介绍 最近几个月忙得实在是不可开交,终于把<深入理解JavaScript系列>的最后两篇“补全”了,所谓的全是不准确的,因为很多内容都没有写呢,比如高性能.Ajax安全.DOM详解.JavaScript架构等等.但因为经历所限,加上大叔希望接下来写点其它东西,所以此篇文字就暂且当前完结篇的总结吧,以后有时间的话,可以继续加上一些未涉及的专题内容. 网络文章来源 本系列文章参考了大量的互联网网站,在此向各位网站拥有者.博主.提到的以及未提到的作者们说一

深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点(转)

才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情.具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以