实战，DOM节点属性介绍（dom 节点）

先复习下上次的内容，上次介绍了DOM节点，分为文档节点，元素节点，属性节点，文本节点和注释节点。这次我们补充个内容，节点属性

在DOM中，每个节点都是一个对象，DOM节点有三个重要的属性：

nodeName:节点名称

nodeValue:节点值

nodeType:节点类型

nodeName

看看实例吧，还是chorme浏览器按F12打开开发者选项，我们获取下节点的属性nodeName

document.nodeName; //文档节点
document.getElementById('js_editor_insertvideo').nodeName; //元素节点
document.getElementById('js_editor_insertvideo').attributes[0].nodeName; //属性节点
document.getElementById('js_editor_insertvideo').childNodes[0].nodeName; //文本节点
document.getElementById('audio_music_plugin_btn').nextSibling.nextSibling.nodeName; //注释节点

我们可以看到文档节点的nodeName是#document，元素节点<LI>的nodeName是'LI'，元素节点<LI>的第一个属性nodeName是'class'，元素节点<LI>的子节点文本节点的nodeName是#text，绿色框是注释节点，它的nodeName是#comment。

我们总结下：

• 文档节点的nodeName是#document
• 元素节点的nodeName是元素标签名
• 属性节点的nodeName是属性名
• 文本节点的nodeName是#text
• 注释节点的nodeName是#comment
• 
  

nodeValue

我们再获取下节点的属性nodeValue

document.nodeValue; //文档节点
document.getElementById('js_editor_insertvideo').nodeValue; //元素节点
document.getElementById('js_editor_insertvideo').attributes[0].nodeValue; //属性节点
document.getElementById('js_editor_insertvideo').childNodes[0].nodeValue; //文本节点
document.getElementById('audio_music_plugin_btn').nextSibling.nextSibling.nodeValue; //注释节点

可以看到文档节点的nodeValue是null，元素节点<LI>的nodeValue是null，元素节点<LI>的class属性的nodeValue是属性值'tpl_item jsInsertIcon video edui-state-disabled'，文本节点的nodeValue是文本内容'视频'，注释节点的nodeValue是注释的内容。

总结下：

• 文档节点的nodeValue是null
• 元素节点的nodeValue是null
• 属性节点的nodeValue是属性值
• 文本节点的nodeValue是文本内容
• 注释节点的nodeValue是注释内容
• 
  

nodeType

我们再获取下节点的属性nodeType

document.nodeType; //文档节点
document.getElementById('js_editor_insertvideo').nodeType; //元素节点
document.getElementById('js_editor_insertvideo').attributes[0].nodeType; //属性节点
document.getElementById('js_editor_insertvideo').childNodes[0].nodeType; //文本节点
document.getElementById('audio_music_plugin_btn').nextSibling.nextSibling.nodeType; //注释节点

这些数字代表啥意思啊，我查阅了资料，有个对照表元素类型节点类型对照表

这节的内容就先分享到这，大家可以按F12试试，下节我们介绍下节点的层次关系。

下次再见。