DOM节点中属性nodeName、nodeType和nodeValue的区别
function showElement() { var element = document.getElementById("h1");// h1是一个<h1>标签 alert('nodetype:' + element.nodeType);// nodeType=1 alert('nodeName:' + element.nodeName); alert('nodeValue:' + element.nodeValue); // null alert('element:' + element);}function showText() { var element = document.getElementById("h1"); var text = element.childNodes[0]; alert('nodeType:' + text.nodeType); // nodeType=3 alert('nodeValue:' + text.nodeValue); // 文本节点的nodeValue是其文本内容 text.nodeValue = text.nodeValue + "abc"; // 文本内容添加修改删除等等。 alert('nodeName:' + text.nodeName); alert(text.data); // data同样是其内容,这个属性下同样可以增删改。}function showDocument() { alert('nodeType:' + document.nodeType); // 9 alert('nodeName:' + document.nodeName); alert(document);}function showAttr() { var btnShowAttr = document.getElementById("btnShowAttr"); // 演示按钮，有很多属性 var attrs = btnShowAttr.attributes; for (var i = 0; i < attrs.length; i++) { var attr = attrs[i]; alert('nodeType:' + attr.nodeType); // attribute 的nodeType=2 alert('attr:' + attr); alert('attr.name:' + attr.name + '=' + attr.value); }}function demo() { var btnDemo1 = document.getElementById("btnDemo1"); btnDemo1.onclick = showElement; // 按钮1取节点nodetype值 var btnDemo2 = document.getElementById("btnDemo2"); btnDemo2.onclick = showText; var btnDemo3 = document.getElementById("btnDemo3"); btnDemo3.onclick = showDocument; var btnShowAttr = document.getElementById("btnShowAttr"); btnShowAttr.onclick = showAttr;}window.onload = demo;
?
?
?
