JavaScript对于DOM的常见操作——《JavaScript DOM编程艺术》读书总结

  读完一本书一定要将收获进行整理沉淀,不然相当于白读。《JavaScript DOM编程艺术》的确是一本JavaScript好的入门书,简短精炼,现在就用一篇文章对本书中的一些知识要点进行总结。

  首先要明白的一件事就是什么是DOM。DOM即文档对象模型(Document Object Model),document指的就是网页文档,而Object,在JavaScript中共有三种对象,分别是用户定义对象、内建对象(Array、Date和Math等)以及宿主对象(由浏览器提供的对象)。而Model指的是将网页文档可以理解为一种节点树的呈现方式,整个网页在<html>标签之下,不断通过节点进行分支延伸,而节点在类似于构成物体的原子,而最常见的节点有三种:

  • 元素节点;
  • 文本节点;
  • 属性节点。

  在每一层的节点上分别用不同的标签进行表示,当然这些标签元素我们又分为行内元素(<a><span><b><e>等)和块级元素(<div><p><li>等)以及不可见元素(<script>等)。而我们对这些元素的操作就通过对节点的操作来完成,而进行操作的时候,我们必定要先获取元素,而在DOM中获取元素的方法有如下三种:

  1. document.getElementById(),即通过id来获取元素,例如document.getElementById(‘wrap‘); 则获取到的是id为wrap的元素;
  2. document.getElementsByTagName(),即通过标签名来获取元素,例如 document.getElementsByTagName(‘div‘); 则获取到的是所有的div的元素;
  3. document.getElementsByClassName(),这个方法是在HTML5中才进行实践的,所以尚且在普及率不高,但是这个方法真正是极为方法的,我们期待它大展拳脚的一天。

  这样,我们便可以获取到我们需要的元素,接下来我们便可以对它们的相关属性进行设置了,而这也不是一蹴而就的,我们需要先获取到元素的属性,这个时候会用到getAttribute()方法,此方法不属于document对象方法,我们只能通过元素节点对其进行调用,其语法形式如下:

  object.getAttribute(attribute);

  举个例子,我们如果要获取一个超链接的链接地址,则可以这样操作: document.getElementsByTagName(‘a‘).getAttribute(‘href‘); 这样就OK了~这样,获取到这个超链接的属性之后,我们发现这个链接是空的,我们想将它链接到百度去,则可以通过setAttribute()方法来设置属性,其也是只能用于元素节点,语法形式如下:

  object.setAttribute(attribute,value);  

  对于上面的问题可以如下解决:

1 var a1 = document.getElementsByTagName(‘a‘);
2 a1.setAttribute(‘href‘,‘http://www.baidu.com‘);

  这样我们就成功滴将超链接链接到百度网去了。

  了解了这些基本的操作之后,DOM还提供了一些方便的节点属性,下面对其进行介绍。

  1.childNodes属性。用来获取任何一个元素的所有子元素,其获取到的是一个包含所有子元素的数组。

  2.nodeType属性。这个属性用来获取一个节点的类型,它可以返回12个值,而前面我们说过常见的节点类型有元素节点、属性节点以及文本节点,它们三者的nodeType值分别是1、2、3。

  3.DOM还提供一个获取文本节点内容的方法:nodeValue属性,注意,它只能用来获取文本节点的值,其语法格式为node.nodeValue。

  4.在一个节点的所有childNodes,还有两个特殊的节点,DOM对其进行特殊照顾,那就是第一个和最后一个,它们分别用firstChild和lastChild表示,也就是说实际上,node.firstChild完全等价于node.childNodes[0],而node.lastChild完全等价于node.childNodes[childNodes.length-1]。

  至此,我们知道了从获取节点以及获取一些特殊节点和对它们的属性进行操作的基本常用方法。后面会接着了解动态写入节点的相关方法。

时间: 2024-07-28 18:15:48

JavaScript对于DOM的常见操作——《JavaScript DOM编程艺术》读书总结的相关文章

JavaScript DOM编程艺术 读书笔记

3 DOM DOM分别指document,object和model. DOM中包含的节点主要分为三种:元素节点.文本节点和属性节点.DOM的原子是元素节点,标签的名字就是元素的名字,元素可以包含其他的元素.没有被包含在其他元素里的唯一元素是<html>元素,它是树节点的根元素:在XHTML文档里,文本节点总是被包含在元素节点的内部.但并非所有的元素节点都包含有文本节点:属性节点用来对元素做出更具体地描述. 有3种DOM方法可获取元素节点,分别是通过元素ID.通过标签名字和通过类名字来获取. 1

Javascript DOM 编程艺术读书笔记16/04/01

愚人节快乐 开始用webstorm了,随着学习深入,代码越来越长,因为不借助ide还真是挺难的 今天发现了一个严重的误区,text和textNode是完全不同的两个概念,之前没有特别注意,写代码很容易跳过createTextNode直接用parentNode.appendChild(text) 单独拎出来晒一晒,以后引以为戒 Javascript DOM 编程艺术读书笔记16/04/01

Javascript DOM 编程艺术读书笔记16/03/26

更新时间 2016-03-27 01:14:15 外设javascript文件操作的标准模板归纳 javascript不需要事件必须在HTML文档处理,可以在外部javascript的文件把一个事件添加到HTML的某个元素上 element.event = atciotn 关键是如何把这个元素确定下来,这个问题类似css,可以用class或者id 如果把某个事件添加到某个确定id的元素上,可以用getElementById() document.getElementById("id")

JavaScript DOM编程艺术读书笔记(一)

第一章,第二章 DOM:是一套对文档的内容进行抽象和概念化的方法. W3C中的定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档的内容,结构和样式. DHTML(Dynamic HTML):动态HTML的简称,不是一项新技术,而是通过HTML CSS 和Javascript组合的.DHTML背后的含义其实就是: 利用HTML把网页标记为各种元素: 利用CSS设置元素样式和它们显示的位置: 利用JavaScript实时地操纵页面和改变样式. 但是虽然浏览器制造

JavaScript DOM编程艺术读书笔记(四)

第十章 实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; 第一个参数是个字符串,所以需要单引号!!! move_elem = setTimeout(repeat,interval); //复制给一个变量,当我们想取消一个正在排队等待执行的函数,可以用clearTimeout(mov

Javascript DOM 编程艺术读书笔记16/04/02

最后更新 2016-04-02 16:14:06 前言: 前面都是讲用jsp语法改变html现有的内容,本节讲一下如何动态得给html插入内容 如果深入理解dom节点树,我们了解html内容其实是以节点树的方式存在,改变内容,就是给节点树添加新的节点 当然,我们用jsp给web页面添加内容,并不会改变原来的html文档 创建节点的两个重要的函数 createElemnt("x")  创建元素节点,返回新创建的节点的引用 createTextNode("text")

关于JavaScript处理字符串的常见操作

//给定一个字符串例如:"abaasdffggghhjjkkgfddsssss3444343"; 1. 字符串的字节长度 参考代码: document.write(txt.length+"<br/>"); document.write("<br/>"); 2. 取出指定位置的字符,如:0,3,5,9 等 参考代码: for (var i=0;i<txt.length;i++){ if(i==0 || i==3 ||

Virtual DOM 真的比操作原生 DOM 快吗?

1. 原生 DOM 操作 vs. 通过框架封装操作. 这是一个性能 vs. 可维护性的取舍.框架的意义在于为你掩盖底层的 DOM 操作,让你用更声明式的方式来描述你的目的,从而让你的代码更容易维护.没有任何框架可以比纯手动的优化 DOM 操作更快,因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作,它的实现必须是普适的.针对任何一个 benchmark,我都可以写出比任何框架更快的手动优化,但是那有什么意义呢?在构建一个实际应用的时候,你难道为每一个地方都去做手动优化吗?出于可维

JavaScript操作的DOM对象

什么叫DOM? DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近. DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容. DOM节点树 在HTML中所有的事物都有节点,DOM将HTML文档视作节点树,通过DOM,节点树中的是所有节点都可以通过JavaScript进行访问,所有的HTML元素都可以