你的位置:首页 > Java教程

[Java教程]深入理解DOM节点类型第三篇——注释节点和文档类型节点


×
目录
[1]注释节点 [2]文档类型

前面的话

  把注释节点和文档类型节点放在一起是因为IE8-浏览器的一个bug。IE8-浏览器将标签名为"!"的元素视作注释节点,所以文档声明也被视作注释节点。本文将详细介绍这两部分的内容

 

注释节点

【特征】

  注释在DOM中是通过Comment类型来表示,注释节点的三个node属性——nodeType、nodeName、nodeValue分别是8、'#comment'和注释的内容,其父节点parentNode可能是Document或Element,注释节点没有子节点

<body><!-- 我是注释--><script>var oComment = document.body.firstChild;//#comment 8 我是注释console.log(oComment.nodeName,oComment.nodeType,oComment.nodeValue)//<body> []console.log(oComment.parentNode,oComment.childNodes)</script>

  [注意]所有浏览器都识别不出位于</html>后面的注释

<!-- --><!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body><script>console.log(document.childNodes.length);//3console.log(document.firstChild,document.lastChild)//<!-- --> <html></script></body></html>  <!-- -->  

【属性和方法】

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

data

  注释节点的data属性与nodeValue属性相同

length

  注释节点的length属性保存着节点字符的数目,而且nodeValue.length、data.length也保存着相同的值

<body><!--我是注释--><script>var oComment = document.body.firstChild;//我是注释  我是注释 trueconsole.log(oComment.nodeValue,oComment.data,oComment.data == oComment.nodeValue);//4 4 4console.log(oComment.length,oComment.nodeValue.length,oComment.data.length);</script></body>

createComment()

  createComment()方法用于创建注释节点,这个方法接收一个参数——要插入节点中的注释文本

var oComment = document.createComment('hello world!');var oBase = document.body.firstChild;document.body.insertBefore(oComment,oBase);//<!--hello world!-->console.log(document.body.firstChild);

appendData()

  appendData(text)方法将text添加到节点的末尾

<body><!--我是注释--><script>var oComment = document.body.firstChild;console.log(oComment.data);//我是注释console.log(oComment.appendData('test'));//undefinedconsole.log(oComment.data);//我是注释test</script></body>

deleteData()

  deleteData(offset,count)方法从offset指定的位置开始删除count个字符

<body><!--我是注释--><script>var oComment = document.body.firstChild;console.log(oComment.data);//我是注释console.log(oComment.deleteData(0,1));//undefinedconsole.log(oComment.data);//是注释</script></body>

insertData()

  insertData(offset,text)方法在offset指定的位置插入text 

<body><!--我是注释--><script>var oComment = document.body.firstChild;console.log(oComment.data);//我是注释console.log(oComment.insertData(1,"test"));//undefinedconsole.log(oComment.data);//我test是注释</script></body>

replaceData()

  replaceData(offset,count,text)方法用text替换从offset指定的位置开始到offset+count处为止处的文本

<body><!--我是注释--><script>var oComment = document.body.firstChild;console.log(oComment.data);//我是注释console.log(oComment.replaceData(1,1,"test"));//undefinedconsole.log(oComment.data);//我test注释</script></body>

substringData()

  substringData(offset,count)方法提取从offset指定的位置开始到offset+count为止处的字符串

<body><!--我是注释--><script>var oComment = document.body.firstChild;console.log(oComment.data);//我是注释console.log(oComment.substringData(1,1));//是console.log(oComment.data);//我是注释</script></body>  

 

文档类型节点

【特征】

  文档类型节点DocumentType的三个node属性——nodeType、nodeName、nodeValue分别是10、doctype的名称和null,其父节点parentNode是Document,文档类型节点没有子节点

  文档类型节点有一个快捷写法是document.doctype,但是该写法IE8-浏览器不支持

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body><script>//IE8-浏览器不支持document.doctypevar oDoctype = document.doctype;if(oDoctype){  // html 10 null  console.log(oDoctype.nodeName,oDoctype.nodeType,oDoctype.nodeValue);  //#document []  console.log(oDoctype.parentNode,oDoctype.childNodes)}</script></body></html> 

【属性】

  文档类型节点DocumentType对象有3个属性:name、entities、notations

name

  name表示文档类型的名称,与nodeName的属性相同

entities

  entities表示由文档类型描述的实体的NamedNodeMap对象

notations

  notations表示由文档类型描述的符号的NamedNodeMap对象

  通常浏览器中的文档使用的都是HTML或XHTML文档类型,因而entites和notations都是空列表(列表中的项来自行内文档类型声明)

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body><script>//IE8-浏览器不支持document.doctypevar oDoctype = document.doctype;if(oDoctype){  console.log(oDoctype.name,oDoctype.name=== oDoctype.nodeName);//html true  console.log(oDoctype.entities,oDoctype.notations);//undefined undefined}</script></body> </html>

【IE8-Bug】

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

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body><script>var oDoctype = document.firstChild;//IE8-浏览器返回8,其他浏览器返回10console.log(oDoctype.nodeType);</script></body></html>