深入理解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);//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>
时间： 2024-10-14 10:46:13

深入理解DOM节点类型第三篇——注释节点和文档类型节点的相关文章

深入理解javascript函数系列第三篇

前面的话 函数是javascript中特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本文是深入理解javascript函数系列第三篇--属性和方法 属性 [length属性] 函数系列第二篇中介绍过,arguments对象的length属性表示实参个数,而函数的length属性则表示形参个数 function add(x,y){ console.log(arguments.length)//3 console.log(

深入理解javascript作用域系列第三篇

前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javascript作用域系列第三篇--声明提升(hoisting) 变量声明提升 a = 2 ; var a; console.log( a ); 直觉上,会认为是undefined,因为var a声明在a = 2;之后,可能变量被重新赋值了,因为会被赋予默认值undefined.但是,真正的输出结果是2 console.log( a ) ; var a

深入理解javascript作用域系列第三篇——声明提升(hoisting)

× 目录 [1]变量 [2]函数 [3]优先 前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javascript作用域系列第三篇——声明提升(hoisting) 变量声明提升 a = 2 ; var a; console.log( a ); 直觉上,会认为是undefined,因为var a声明在a = 2;之后,可能变量被重新赋值了,因为会被赋予默认值undefined.但是,真正的输出结果是2 c

深入理解javascript对象系列第三篇——神秘的属性描述符

× 目录 [1]类型 [2]方法 [3]详述[4]状态 前面的话 对于操作系统中的文件,我们可以驾轻就熟将其设置为只读.隐藏.系统文件或普通文件.于对象来说,属性描述符提供类似的功能,用来描述对象的值.是否可配置.是否可修改以及是否可枚举.本文就来介绍对象中神秘的属性描述符 描述符类型 对象属性描述符的类型分为两种: 数据属性和访问器属性 数据属性 数据属性(data property)包含一个数据值的位置,在这个位置可以读取和写入值.数据属性有4个特性 [1]Configurable(可配置性

Java基础入门 - 三种注释及文档注释详解

类似C/C++,Java也支持单行和多行注释 注释中的字符在编译时会被忽略 注释通常为类.变量和方法的主要描述 单行注释 // 注释内容 多行注释 /* 注释内容 */ /* * 注释内容 */ 文档注释 /** * 注释内容 */ 文档注释可使用javadoc工具来生成信息,并输出到HTML文件中,方便记录程序信息 文档注释中可包含一个或多个@标签,每个@标签都在新的一行开始 多个相同的标签应一个接一个的放在一起组成一组 实例:SquareNum.java import java.io.*;

html简介,版本和文档类型声明

HTML(英语:Hypertext Markup Language,简称:HTML)也叫作超文本标记语言,是一种用来结构化 Web 网页及其内容的标记语言,标准通用标记语言下的一个应用,您可以使用 HTML 来建立自己的 WEB 站点. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <bod

深入理解DOM事件机制系列第二篇——事件处理程序

× 目录 [1]HTML [2]DOM0级 [3]DOM2级[4]IE[5]总结 前面的话 事件处理程序又叫事件侦听器,实际上就是事件的绑定函数.事件发生时会执行函数中相应代码.事件处理程序有HTML事件处理程序.DOM0级事件处理程序.DOM2级事件处理程序和IE事件处理程序四类,下面将详细介绍该部分内容 HTML事件处理程序 某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的HTML特性来指定.这个特性的值应该是能够执行的JavaScript代码 在事件处理程序函数内部,this

深入理解DOM事件机制系列第一篇——事件流

× 目录 [1]历史 [2]事件冒泡 [3]事件捕获[4]事件流 前面的话 javascript操作CSS称为脚本化CSS,而javascript与HTML的交互是通过事件实现的.事件就是文档或浏览器窗口中发生的一些特定的交互瞬间,而事件流(又叫事件传播)描述的是从页面中接收事件的顺序.本文将详细介绍该部分的内容 历史 当浏览器发展到第四代时(IE4及Netscape4),浏览器开发团队遇到了一个很有意思的问题:页面的哪一部分会拥有某个特定的事件?想象画在一张纸上的一组同心圆.如果把手指放在圆心

JavaScript DOM节点和文档类型

以下的例子以此HTML文档结构为例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="demo"> <ul id="contents">