《JavaScript权威指南》学习笔记 第八天 Node Tree

前几天介绍了DOM的知识,以及节点的操作。今天我们来重点理解下Node的属性以及方法。



在Document文档里属于Node的东西很多:

其中Document对象是Node对象最大的对象,平时我们使用最多的是是Element对象,Text对象使用的较少。

Node是一个对象,既然是对象,就必然会有属性和方法(排除空对象),如果把Node List 看做是一棵节点树,那么节点就会有父节点,也会有子节点,还有兄弟节点,就像树杈有主干也有枝干,下面用一棵树简单的表示下。

上面这幅数图并不全,实在是因为画图软件太不好用了,如果有一个数位画图板一定能够画的的更为清楚直观。

大树干也就是一副文档的根,也是最大的parentNode,可以理解为Document。node的子节点称之为childNodes。其中第一子节点称为fristNode,最后一个节点为lastNode.如果能够定位到子节点,那么该子节点的下一个兄弟元素就是nextSibling,该子节点的上一个兄弟元素就是previousSibling 。

小结一下:

  • childNodes   父节点下所有的子节点。
  • fristChild     子节点中第一个。
  • lastChild      子节点中最后一个元素。
  • parentNode  节点的父节点。
  • nextSibling   子节点下一个节点。
  • previousSibling 子节点上一个节点。

另外Node对象还有其他一些很重要的属性,需要了解一下。

  • nodeType  判断节点的类型是什么,是Element节点,还是text节点等等。有下面一些诀窍可以轻易的理解记忆这些值的意思,以后就不需要查文档了。

9  代表Document 节点。document节点是文档里面的根,代表最大,在古装剧里,常用九五之尊来形容最大的boss。

1  代表Element   节点。 Element节点最小了。道德经有云:一生二,二生三,三生万物。一份文档有许多Element组成。

3  代表Text节点。  文本节点。

8  代表Comment 节点,也表示文本。   文本节点的值是3 ,8。可以这样理解,死  三、八 爱说话。

11 代表DocumentFragment 节点。     11 是淘宝天猫的购物节,也是光棍节。 Fragment是临时的,也就是我们的光棍是临时的啦。

  • nodeValue 属性。 其值是Text节点或者Comment 节点的文本内容。
  • nodeName 属性。其值是节点的标签名,用大写表示。

这里要注意一点的是:Node 的API对于文本的更新是非常敏感的,当页面中的文本发生变化时,就会被Node API立即博捉到,并且做出对应的改变。

Element对象:

因为Node 子对象,Document对象,平时操作的不是很多,所以下面介绍下操作最多的Element对象。

Element对象也有很多属性,下面来认识一下。

  • children属性。

children属性本来是没有的。原来是IE浏览器支持的,但是众多其他的浏览器也学习IE,将children属性支持的非常好。children属性一直不是标准的属性,但随着HTML的出台,已经承认了children属性,所以可以放心的使用这一属性。需要注意一点的是,Text对象与Comment对象是没有Children属性的,也就是说文本节点没有孩子。

  • Element属性。

这和node的属性非常相似,在某种程度上可以通用。例如:

子节点  fristElementChild                ->      fristChild        可以通用。

lastElementChild                 ->      lastChild         可以通用。

兄弟    nextElementSibling              ->     nextSibling       可以通用。

previousElementSibling        ->      previousSibling  可以通用。

子节点数量:   childElementCount     ->      children.length.

另外Element的属性就是HTML的属性。这个怎么讲呢?

假若一个标签是<img> 。那么可以用  img.src  来获取该Element的对象的src属性。诸如表单之类不再赘述。

设置和获取非标准HTML属性:

我最近的工作就利用到了HTML的这个强大之处。我需要解析一份携带各种复杂条件的文本。其中使用了很多HTML里面没有的标签与属性。对于这些标签和属性浏览器并不会解析,但由于浏览器强大的兼容性,也并不报错,不报错并以为文档是合法的。

设置 和 获取 HTMLElement 对象可以用下面两个方法。

setAttribute()   设置属性。

getAttribute()   获取属性。

检测对象是否拥有某属性,或者删除元素上的某个属性可以用到下面两个方法。

hasAttribute()

removeAttribute()

好在HTML5提供了一个解决文档合法性的问题。在HTML中,任意以data-为前缀的小写属性名都是合法的,可以更加方面的携带一些非隐秘数据。

如:<div data-min=‘10px‘ data-max=‘100px‘>

Attr节点属性。

非Element 的属性为null,如text或者comment对象。

Element对象的属性集也是一个nodelist的东西。可以理解为对象吧。

元素内容的外插内插。

这点内容在JQ那些天的博客里讲过,有兴趣的朋友也可以去看看jq是怎样操作的。不过可以确定的是,jq是将这些方法进行了封装,解决了兼容性的弊端。

外插:

beforebegin

afterend

内插:

afterbegin

beforeend

使用这些参数,需要使用到insertAdjacentHTML() 方法。



今天就暂且总结到这里吧,我要去和萌萌聊天去了。

时间: 2025-01-16 12:45:24

《JavaScript权威指南》学习笔记 第八天 Node Tree的相关文章

JavaScript权威指南学习笔记之一

1.关于分号 javascript里面不强制使用分号来表示一行语句的结束,但是最好能够在写js之前,特别是在原有的js上面新增时,最好前置一个分号.避免这种情况发生:  2.JavaScript类型转换 3.关于=== ①如果类型不同则不等 ②null===null或undefined===undefined ③true===true或false===false ④NaN不等 ⑤0===0 0===-0 ⑥如果是同一个object,array,function则相等 4.关于== ①如果已经==

javascript权威指南学习笔记1

打开这本书,进入到javascript的世界.以前都是看各种视频,感觉什么收获也没有,反而弄得脑袋混乱,希望能够按照这本书的节奏掌握javascript这门语言,为我的前端学习打下基础. 学习前准备:web浏览器(F12用来唤醒和关闭firebug界面,ctrl+shift+j用来唤醒错误工作台,console.log()调试辅助) 本书分为4个部分:Javascript语言核心:客户端Javascript:Javascript核心参考:客户端Javascript参考.今天主要学了第一部分.主要

javascript权威指南学习笔记2

Javascript语言核心(2~12章) 第三章:类型.值.变量 1.数字: overflow(Infinity, -Infinity).underflow(+0,-0) 非数字值:它和任何值都不相等,包括自身.if(x!=x) return NAN:==>isNaN()判断是不是NaN或者字符串等 javascript的精度要注意,即(0.3-0.2)!=(0.2-0.1) Date()构造函数:月份从0开始计数,天数从1开始计数,星期天是0: 2.文本: 转义字符(牢记斜杠后面几个特殊的值

javascript 权威指南学习笔记

//通过id查找多个元素 function getElements(/*ids...*/){ var elements = {}: for(var i=0; i<arguments.length; i++){ var id = arguments[i]; var elt =document.getElementById("id"); if(elt == null) throw new Error("No element with id :" +id); ele

Git权威指南学习笔记(一)Git初始化

1.在Git中配置用户名和邮件地址 $ git config --global user.name "Jymn_Chen" $ git config --global user.email "[email protected]" 注意把用户名和邮件地址替换成你自己的资料. 在这里的参数global表示配置的作用范围是当前用户,如果将参数改为system,那么配置的作用范围是系统中的所有用户. 2.创建版本库 新建一个目录并cd到目录中,执行以下命令: $ git i

Git权威指南学习笔记(二)Git暂存区

如下图所示: 左侧为工作区,是我们的工作目录. 右侧为版本库,其中: index标记的是暂存区(stage),所处目录为.git/index,记录了文件的状态和变更信息. master标记的是master分支所代表的目录树.HEAD指向master分支. objects标记的是Git的对象库,所处目录为.git/objects,文件索引建立了文件和对象库中对象实体之间的映射关系. 通过该图我们可以清晰地看出add,commit等命令的转化关系.下面通过git diff和git status两条命

MongoDB权威指南学习笔记4---查询相关的知识点

1 find find({查询条件},{"key":1,"email":1})  后面表示返回哪些键 2 可用的比较操作符 $lt , $lte,$gt,$gte 比如db.users.find({"age":{"$gte":18,"$lte":30}}) 3不等于 find(...{"key":{"$ne":"value"}} 4 in find

MongoDB权威指南学习笔记5---索引相关的知识点

1 查看查询计划 db.user.find({"username":"xxx"}) .explain() db.doc.find({"es_y":"2014"}).explain() {  "cursor" : "BasicCursor",  "isMultiKey" : false,  "n" : 0,  "nscannedObject

Hadoop权威指南学习笔记一

Hadoop权威指南学习笔记一 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习参考,有什么不到之处还望指出,一起学习一起进步. 转载请注明:http://blog.csdn.net/my_acm 1. 数据的增长远远超过了磁盘的读取速度,传统的数据存储方式和分析方式变得不再适用于大数据的处理. Hadoop分为两大核心技术,HDFS(HadoopDistributed File System-分布式hadoop文件处理系统)和MapReduce(分为Map-数据映射等