深入理解DOM節點類型第三篇——注釋節點和文檔類型節點 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　把注釋節點和文檔類型節點放在一起是因為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>