你的位置:首页 > Java教程

[Java教程]DOM注释节点COMMENT


定义

  注释在DOM中是通过Comment类型来表示

 

特征

  nodeType:8
  nodeName:#comment
  nodeValue:注释的内容
  parentNode:Document或Element
  childNode:没有子节点

<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></body>

  

  [注意1]如果<html>外部上下都有注释,只有firefox可以识别出最下面的注释,其他浏览器都识别不出

<!-- ><--><!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body><script>console.log(document.childNodes.length)//只有firefox为4,其他浏览器都为3</script></body></html>  <!-- ><-->

  

  [注意2]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>

 

属性和方法

  Comment类型与Text类型继承自相同的基类,因此拥有相似的字符串操作方法。与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()】

    createCommente()方法用于创建注释节点,这个方法接收一个参数——要插入节点中的注释文本。在创建新注释文本的同时,也会为其设置ownerDocument属性

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>