深入理解dom节点

元素节点

1 .元素节点element对应网页的html标签元素。元素节点的节点类型nodeType值是1,节点名称nodeName值是大写的标签名,nodeValue值是null.
2 .父节点指向包含该元素节点的element或文档节点。
3 .访问元素的标签名可以使用nodeName或者tagName.
4 .元素可以有任意数目的子节点和后代节点。元素的childNodes属性包含了他的所有子节点。这些子节点可以是元素,文本,注释,处理指令节点等。

特性操作

1 .hasAttribute()
2 .getAttribute()
3 .setAttribute()
4 .removeAttribute()

attributes属性

1 .是唯一一个使用attribute属性的dom节点类型。attribute包含一个namedNodeMap,与NodeLIst类似,也是一个动态的集合。
2 .方法
3 .getNameItem(name)
4 .removeNameItem(name)
5 .setNameItem(node):向列表中添加节点
6 .遍历:attributes主要用于特性遍历。再设计dom结构序列化为html字符串时,需要涉及到遍历元素特性。

属性节点

1 .属性节点attribute对应网页中html标签的属性,他只存在与元素的attribute中,并不是dom文档树的一部分。属性节点的nodeType值是2,节点名称是属性名,nodeValue值是属性值
2 .父节点parentNode是null.
3 .关于属性节点是否存在子节点,各个浏览器表现不一致。
4 .方法
5 .createAttribute()
6 .setAttributeNode()
7 .getAttributeNode()
8 .removeAttributeNode()
9 .虽然特性节点排行老二,但是其属性和方法并不常用,元素节点有对应的可替代的方法。

文本节点

1 .文本节点text代表网页中的html标签内容。文本节点的节点类型nodeType值是3,节点名称nodeName值是‘#text’,nodeValue值是标签内容值。
2 .其父节点parentNode指向包含该文本节点的元素节点,文本节点没有子节点
3 .空白文本节点:ie8浏览器不能识别空白文本节点,而其他的浏览器会识别空白文本节点

属性

1 .data:文本节点的data属性和nodeValue属性相同
2 .wholeText:将当前的Text节点和比邻的Text节点作为一个整体返回
3 .length:文本节点的length属性保存着节点字符的数目

方法

1 .createTextNode()
2 .normalize()合并相邻的文本节点。这个方法在文本节点的父节点-元素节点上调用。
3 .splitText()将一个文本节点分成两个文本节点,按照指定的位置分割nodeVaule的值。
4 .元素的文本可以看成是字符串,也可以看成是节点,除了字符串操作方法,也可以使用正则或者文本节点等方法。

CDATA节点

1 .针对xml的文档,只出现在xml文档中,表示的是CDATA区域。

注释节点

1 .comment表示网页中的html注释,注释节点的节点类型为8,节点名称值为‘#comment’,nodeValue值为注释的内容
2 .父节点可以使document,也可以是element,注释节点没有子节点。
3 .所有浏览器都识别不出来位于</html>后面的注释

属性和方法

1 .createComment()
2 .

注意IE8-浏览器将标签名为‘!’的元素视为注释节点,所以文档声明也被看做注释节点

文档节点

1 .文档节点document表示html文档,也称为根节点。指向document对象。文档节点的nodeType的值为9,节点名称值为‘#document’,nodeValue值为null.
2 .父节点是document,文档类型节点没有子节点

文档片段节点

1 .DOcumentFragment在文档中是没有对应的标记的,是一种轻量的文档,可以包含和控制节点,但不会像完整的文档那样,该节点的节点类型为11,节点名称为‘#document-fragment’,nodeValu:null
2 .在所有的节点类型中,只有文档片段节点在文档中没有对应的标记。dom规定文档片段是一种轻量级的文档,可以包含和控制节点,但是不会向完整的文档那样占用额外的资源。

属性和方法

1 .document.createDocumentFragment()方法。文档片段继承了node的所有方法,通常用于执行那些针对文档的dom操作。
2 .使用方法:如果将文档中的节点添加到文档片段中,就会从文档树种移除该节点。把所有的要构造的节点都放在文档片段中执行,这样可以不影响文档树,也就不会造成页面渲染,当节点都构造完成之后,在将文档片段对象添加到网页中,这时所有的节点一次渲染出来,减少浏览器的负担,提高页面渲染速度。
3 .值得注意的是,当使用ie浏览器的时候,使用文档片段的性能反而不会更好。

documentType节点

1 .包含着与文档所有的相关的doctype信息
2 .nodeType:10,nodeName:doctype的名称,nodeValue:null.
3 .支持documentType类型的节点的浏览器会把documentType节点保存在document.doctype中,他有三个属性
4 .name:表示文档类型的名称,
5 .ebties,notations都是NameNodeMap对象,一个描述实体,一个描述符号。
6 .documentType类型的节点在web浏览器中并不常用,也不能动态创建,只是能由浏览器在解析文档的时候创建

区分元素特性attribute和对象属性property

1 .元素特性是指html元素标签的特性
2 .id,class,key:这个是自定义特性
3 .对象属性是元素的节点的属性

<div id='test'></div>
<script>
  test.id='id2';test.title='test2',test.key='value'
</script>

4 .id,title,b都是属性,其中b叫做自定义属性。

共有

1 .id,title等既是属性也是特性,修改属性,特性也会发生改变,修改特性,属性也会发生改变。
2 .class和for这两个元素是例外,他们都是保留字,所以在对象属性中,class-className,for-htmlFor。
3 .与普通的元素特性不同,通过style实现的校本化css机制和听过onclick等实现的事件处理机制是dom的两大功能,他们被dom实现为对象,而不是仅仅的普通的字符串。
4 .ie7浏览器对元素特性和对象属性有所混淆。
5 .自定义特性和自定义属性非常有用,h5新增的数据集属性dataset建立了两者的联系。

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

推荐阅读更多精彩内容

  • 节点层次 DOM 可以将任何 HTML 和 XML 文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型,每...
    云之外阅读 531评论 0 1
  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
    闷油瓶小张阅读 623评论 0 1
  • Element 类型 除了 Document 类型之外,Element 类型就要算是 Web 编程中最常用的类型了...
    劼哥stone阅读 608评论 0 3
  • 如果凌晨是一天的开始,那么我总是在开始的时间里学会孤独! 这个世界那么大,大的你还是只能站在一寸土地上。这个世界那...
    微风凉吹阅读 165评论 0 1
  • 很容易理解,姑且不论是否对方真的想追求她,还是不过产生了一种美好的幻觉,在她的想法里,对方对她的好与关心,都是为了...
    轩少smile阅读 164评论 0 0