js高级程序设计 第 十 章 DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API;
IE9之前的版本不会为空白符创建节点;
在HTML页面中,文档元素始终都是<html>元素

节点层次

节点分为几种不同的类型,每种类型分别表示文档中不同的信息或标记。

HTML的层次结构

Node类型

1、nodeName和nodeValue属性

每个节点都有一个nodeType属性,用于表明节点的类型。要了解节点的具体信息,可以使用nodeName和nodeValue两属性,对于元素节点,nodeName中保存的始终都是元素的标签名,而nodeValue的值始终为null。

2、节点关系

节点关系图

每个节点都有一个childNodes属性,其中保存着一个NodeList对象,它是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点,虽然它具有Array的一些特性,但是它并不是Array的实例,它能够动态的反映DOM结构,而不是我们第一次访问它们的某个瞬间拍摄下来的一张快照。

parentNode属性:指向文档树中的父节点;
previousSibling属性:查找当前节点前面的兄弟节点;
nextSibling属性:查找当前节点后面的兄弟节点;
hasChildNodes()方法:这个方法在包含一或多个子节点的情况下返回true;
ownerDocument属性:指向表示整个文档的文档节点;

3、操作节点

以下四个方法操作的对象是某个节点的子节点
appendChild():用于向childeNodes列表的末尾添加一个节点,结果返回新增的节点。但如果传入到该方法中的节点已经是文档的一部分,那结果就是将该节点从原来的位置转移到新位置。
insertBefore(要插入的节点,参照的节点):用于将节点放在childNodes列表中某个特定的位置上,采用头插法,结果返回插入的节点,如果参照节点为null则与appendChild()执行相同的操作。
replaceChild(插入的节点,替换的节点):方法返回要替换的节点并从文档树中被移除,同时由要插入的节点占据其位置。
removeChild(要移除的节点):结果返回被移除的节点;

4、其他方法

cloneNode(true | false):用于创建调用这个方法的节点的一个完全相同的副本,true 执行深复制,也就是复制节点及整个子节点树,false 执行浅复制,即只复制节点本身,复制后返回的节点副本属于文档所有,但并没有为它指定父节点,成为了一个“孤儿” (IE在此存在一个bug,即它会复制事件处理程序,所以我们建议在复制之前最好先移除事件处理程序)
normalize():处理文档树中的文本节点

Document 类型

document对象是window对象的一个属性,可以将其作为全局对象来访问。

1、文档的子节点

2、文档信息

document.title                  //取得文档的标题
document.URL                //取得完整的URL
document.domain           //取得域名
document.referrer           //取得来源页面的URL
以上4个文档信息,只有domain属性可以进行设置,但对其有一个限制,即如果域名一开始是"松散的",那么将不能将它再设置为"紧绷的",如将document.domain设置为wrox.com 之后,就不能再将其设置为p2p.wrox.com。

3、查找元素

getElementById( ) 如果页面中有多个元素ID值相同,该方法只返回文档中第一次出现的元素。
getElementsByTagName( )返回包含零或多个元素的NodeList。
namedItem( )通过元素的name的特性取得集合中的项,该方法只会取得第一项。同时,也可以用方括号来访问,
如:var myImage = images["myImage"]。
getElementsByName( ) 这个方法会返回带有给定name特性的所有元素。

4、特殊集合

document.anchors:包含文档中所有带name特性的<a>元素;
document.applets:包含文档中所有的<applet>元素;
document.forms:包含文档中所有的<form>元素;
document.images:包含文档中所有的<img>元素;
document.links:包含文档中所有带href特性的<a>元素;

5、文档写入

document.write( 字符串参数 )    //原样写入
document.writeln( 字符串参数 ) //在字符串的末尾添加一个换行符(\n)
document.open( 字符串参数 )   //用于打开网页的输出流
document.close( 字符串参数 )   //用于关闭网页的输出流
使用document.write( )动态引入外部文件时,需注意使用转译字符,
如果是在页面加载期间使用write( )和writeln( )方法,则不需要用到这两个方法。

Element 类型

在HTML中,标签名始终都以全部大写表示,而在XML中标签名会始终与源代码中的保持一致

1、取得特性

自定义特性应该加上data-前缀以便验证
getAttribute(特性名):传递的特性名与实际的特性名相同,因此想要得到class特性值,应该传入class而不是className,后者只有在通过对象属性访问特性时才用,特性名称不区分大小写。
setAttribute(特性名,值)
removeAttribute(特性名):用于彻底删除元素的特性
通过getAttribute( )方法访问style特性或onclick这样的事件处理特性时,返回的值与属性的值相同,换句话说,getAttribute("style")返回一个对象,而getAttribute("onclick")返回一个函数,由于存在差别,一般经常不使用getAttribute( )而是只使用对象的属性,只有在取得自定义特性值的情况下,才会使用getAttribute( )方法
通过setAttribute( )设置class和style特性,事件处理程序没有任何效果

2、创建元素

document.createElement(标签名)
该方法会出现的问题有:不能设置动态创建的<iframe>元素的name特性;不能通过表单的reset()方法重设动态创建的input元素;动态创建的type特性值为reset的button元素重设不了表单,动态创建的一批name相同的单选按钮彼此之间毫无关系。

3、元素的子节点

注意不同浏览器的解析不同,有些浏览器会将空白符解析成节点因此解决该差别可以通过nodeType属性进行过滤。
getElementsByTagName()方法获取子节点或后代节点,不过若是通过元素调用这个方法时,搜索起点是当前的元素,其余与通过document调用这个方法相同。

Text 类型

appendData(text):将text添加到节点的末尾;
deleteData(offset,count):从offset指定的位置开始删除count个字符;
insertData(offset,text):在offset指定的位置插入text;
replaceData(offset,count,text):用text替换从offset指定的位置开始到offset+count为止处的文本;
splitText(offset):从offset指定的位置将当前文本节点分成两个文本节点;原来的文本节点将包含从开始到指定位置之前的内容,新文本节点将包含剩下的文本,这个方法会返回一个新的文本节点。
substringData(offset,count):提取从offset指定的位置开始到offset+count为止处的字符串;

1、创建文本节点

document.createTextNode(插入节点中的文本 ) 创建新的文本节点
一般情况下,每个元素只有一个文本子节点。

2、规范化文本节点

element.normalize( ) element是包含两个或多个文本节点的父元素,使用该方法是将所有文本节点合并成一个节点。

Comment 类型

Comment类型与Text类型继承自相同的基类,因此它拥有除splitText( )之外的所有字符串操作方法,与Text类型类似,也可以通过nodeValue或data属性来取得注释的内容。

小结

一般来说,尽量减少访问NodeList,因为其是"动态的";
Document类型表示整个文档,是一组分层节点的根节点;
Element节点表示文档中的所有HTML和XML元素,可以用来操作这些元素的内容和特性。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,902评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,037评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,978评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,867评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,763评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,104评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,565评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,236评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,379评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,313评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,363评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,034评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,637评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,719评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,952评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,371评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,948评论 2 341

推荐阅读更多精彩内容