ADS3.3 DOM2核心和DOM2 HTML——Node对象之一:节点名称、值和类型

前端技术 everyinch 2345℃ 0评论

Node对象是DOM Core中的核心对象,其中Element、document和documentElement都继承自Node对象。

nodeName、nodeValue和nodeType

对于Element对象nodeName属性会取得大写形式的标签名称:

ADS.addEvent(window, 'load', function() {
    ADS.log.header('testNodeName');
    ADS.log.write('nodeName is: ' + document.getElementById('firefox').nodeName);
});

因为sample.html中带有id=”firefox”属性的节点是一个锚节点,所在在日志窗口将会得到如下的输出:

nodeName is: A

nodeName的值取决于引用对象的类型。下表列出了不同的节点类型(nodeType)相应的nodeName返回值:

对象 返回值
Element.nodeName 元素的名称,大写
Attr.nodeName 属性的名称,大写
Text.nodeName #text
CDATASection.nodeName #cdata-section
EntityReference.nodeName 实体引用的名称
Entity.nodeName 实体的名称
ProcessingInstruction.nodeName 目标的名称
Comment.nodeName #comment
Document.nodeName #document
DocumentType.nodeName 文档类型的名称,如HTML
DocumentFragment.nodeName #document fragment
Notation.nodeName 表示法的名称

nodeValue属性会返回Attr、ProcessingInstructions、Comments、Text和CDATASection对象的值,其它所有对象的nodeValue属性都返回null。例如:

ADS.addEvent(window,'load',function () {
    ADS.log.header('The node value of the anchor');
    ADS.log.write('nodeValue is: '+ document.getElementById('firefox').nodeValue);
});

因为锚属于Element对象,所以它的nodeValue会返回:

nodeValue is: null

与nodeName类似,nodeValue属性对于不同的对象类型具有不同的含义,下表列出了每种核心对象类型的nodeValue属性的返回值:

对象 返回值
Element.nodeName null
Attr.nodeName 字符串形式的属性值
Text.nodeName 字符串形式的节点内容
CDATASection.nodeName 字符串形式的节点内容
EntityReference.nodeName null
Entity.nodeName null
ProcessingInstruction.nodeName 字符串形式的节点内容
Comment.nodeName 字符串形式的注释文本
Document.nodeName null
DocumentType.nodeName null
DocumentFragment.nodeName null
Notation.nodeName null

nodeType包含某个命名常量对应的一个整数值。下表列出了整数值对应的命名常量:

nodeType值 等价命名常量
1 Node.ELEMENT_NODE
2 Node.ATTRIBUTE_NODE
3 Node.TEXT_NODE
4 Node.CDATA_SECTION_NODE
5 Node.ENTITY_REFERENCE_NODE
6 Node.ENTITY_NODE
7 Node.PROCESSING_INSTRUCTION_NODE
8 Node.COMMENT_NODE
9 Node.DOCUMENT_NODE
10 Node.DOCUMENT_TYPE_NODE
11 Node.DOCUMENT_FRAGMENT_NODE
12 Node.NOTATION_NODE

例如:

ADS.addEvent(window,'load', function () {
    ADS.log.header('Testing nodeType');
    ADS.log.write('nodeType is: '+ document.getElementById('firefox').nodeType);
});

那么将返回:

nodeType is: 1

锚标签是HTMLAnchorElement的实例,而它又继承自Element对象,所以锚的nodeType的值为1。
如果在代码中检测nodeType,那么在比较关系中使用DOM常量即可:

if(node.nodeType == Node.COMMENT_NODE) {
    // 针对注释节点的代码
}

而不是:

if(node.nodeType == 8) {
    // 针对注释节点的代码
}

nodeType属性在老的IE浏览器中会有问题,因为IE不会报告它支持DOM2 Core,但却部分地支持该规范。要消除这种错误,可以定义自己的常量:

window['ADS']['node'] = {
    ELEMENT_NODE                : 1,
    ATTRIBUTE_NODE              : 2,
    TEXT_NODE                   : 3,
    CDATA_SECTION_NODE          : 4,
    ENTITY_REFERENCE_NODE       : 5,
    ENTITY_NODE                 : 6,
    PROCESSING_INSTRUCTION_NODE : 7,
    COMMENT_NODE                : 8,
    DOCUMENT_NODE               : 9,
    DOCUMENT_TYPE_NODE          : 10,
    DOCUMENT_FRAGMENT_NODE      : 11,
    NOTATION_NODE               : 12
};

在添加上述代码之后,就可以在跨浏览器的脚本中使用相同的逻辑:

if(node.nodeType == ADS.node.COMMENT_NODE) {
    // 在任何浏览器中针对注释节点的代码
}

使用命名常量有很多优点,既可以不用死记硬背数值与节点类型的对应关系,代码也更容易看懂、维护和调试。



转载请注明:陈童的博客 » ADS3.3 DOM2核心和DOM2 HTML——Node对象之一:节点名称、值和类型

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量