× 目錄 [1]註釋節點 [2]文檔類型 前面的話 把註釋節點和文檔類型節點放在一起是因為IE8-瀏覽器的一個bug。IE8-瀏覽器將標簽名為"!"的元素視作註釋節點，所以文檔聲明也被視作註釋節點。本文將詳細介紹這兩部分的內容 註釋節點 【特征】 註釋在DOM中是通過Comment類型來表示，註釋節 ...
×
目錄
[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);//3 console.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; //我是註釋 我是註釋 true console.log(oComment.nodeValue,oComment.data,oComment.data == oComment.nodeValue); //4 4 4 console.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'));//undefined console.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));//undefined console.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"));//undefined console.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"));//undefined console.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.doctype var 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.doctype var 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，其他瀏覽器返回10 console.log(oDoctype.nodeType); </script> </body> </html>
