10.1.- 其他 类型

一、Text 类型

1)基本信息

nodeType 3
nodeName #text
nodeValue 节点包含的文本
parentNode Element
childNodes 不支持(没有)

操作节点中文本的方法

节点中的文本可以使用nodeValue或data属性来获取

textNode.nodeValue = ''; //对文本节点进行内容的修改
textNode.data = ''; //对文本节点进行内容的修改
appendData(text) //将text文本添加到节点的末尾
deleteData(offset,count) //删除从offset开始的count个字符
insertData(offset,text) //在offset的指定的位置插入text
replaceData(offset,count,text) 
//用text替换从offset开始的count个字符
splitText(offset) //以offset为界线将当前文本节点分为两个文本节点
substringData(offset,count) //从offset开始提取count个字符

另外,存在一个length属性

2)创建文本节点

var textNode = document.createTextNode(text); 
//参数为节点的文本内容

3)规范化文本节点

element.normalize(); 
//在包含多个文本节点的父元素中调用,以合并文本节点

4)分割文本节点

var newNode = parentNode.splitText(offset);
//原节点从offset的位置处开始分裂
//0-offset的位置属于原节点
//返回的新节点为offset-末尾的字符
//offset位置处的字符属于新节点

二、Comment 类型

1)基本信息

nodeType 8
nodeName #comment
nodeValue 注释的内容
parentNode Document 或 Element
childNodes 不支持(没有)

操作节点的方法与文本节点类似,只是少了splitText方法

2)创建注释节点

var comment = document.createComment('a comment');

三、CDATASection 类型

1)基本信息

主要用于XML文档中,目前主流浏览器无法正确解析该节点

nodeType 4
nodeName #cdata-section
nodeValue CDATA区域中的内容
parentNode Document 或 Element
childNodes 不支持(没有)

操作节点的方法与文本节点类似,只是少了splitText方法

2)创建注释节点

var comment = document.createCDATASection(); 
//XML文档中使用

四、DocumentType 类型

nodeType 10
nodeName doctype的名称
nodeValue null
parentNode Document
childNodes 不支持(没有)

五、DocumentFragment 类型

1)基本信息

nodeType 11
nodeName #document-fragment
nodeValue null
parentNode null
childNodes 可以是Element、ProcessingInstruction、Comment、Text、CDATASection 或 EntityReference

2)创建文档片段

var fragment = document.createDocumentFragment(); 

六、Attr 类型

1)基本信息

nodeType 2
nodeName 特性的名称
nodeValue 特性的值
parentNode null
childNodes HTML中不支持(没有) XML中可以是Text 或 EntityReference

2)属性
Attr 对象有3个属性:
name(特性名称,与nodeName的值相同)
value(特性值,与nodeValue的值相同)
specified 布尔值,用于区分特性是在代码中指定的还是默认的

3)创建特性节点

var attr = document.createAttribute(); 

实际上很少直接操作特性节点,通过元素的getAttribute 等方法更方便

发布了50 篇原创文章 · 获赞 0 · 访问量 643
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览