这段代码为什么输出#text？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<select name = "edu" id = "edu">
<option value = "博士">博士~~~</option>
<option value = "本科" id="benke">本科~~~</option>
<option value = "大专">大专~~~</option>
<option value = "幼儿园">幼儿园~~~</option>
</select>
<script>
var gra = document.getElementById("edu");
var A = gra.childNodes;
alert(A[0].nodeName);
</script>
</body>
</html>
第一个子节点的nodeName不应该是option么？还有就是，当alert(A[2].nodeValue)时，为什么不输出博士，而是空白
慕粉3541299浏览 1968回答 3
3回答
-
fantacy吴贝
nodeName返回节点名称，这点你的理解是对的，但元素节点返回元素名，文本节点就会返回#text。正确的从var gra=document.getElementById("edu");var A = gra.childNodes;alert(A[1].firstChild.nodeValue);nodeValue与nodeName推荐看慕课网JavaScript进阶篇9-7. -
stone310
childNodes指所有子节点（包括文本节点和元素节点），当你代码这么写：<select name = "edu" id = "edu"> <option value = "博士">博士~~~</option> <option value = "本科" id="benke">本科~~~</option> //这里select和option之间，option和option之间有空白，这段空白就是文本节点；childNodes[0]指得是中间那段空白（文本节点）,nodeName是#text；childNodes[1]为“博士”，nodeName是OPTION；childNodes[2]为空白，nodeName是#text；以此类推；可以用children（只获取元素节点）来代替childNodes -
其实我真的不是东北人
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body><select name="edu" id="edu"> <option value = "博士">博士~~~</option> <option value = "本科" id="benke">本科~~~</option> <option value = "大专">大专~~~</option> <option value = "幼儿园">幼儿园~~~</option></select><script> var gra = document.getElementById("edu"); for(var i=0;i<gra.childNodes.length;i++) { if(gra.childNodes[i].nodeType == 1) { console.log(gra.childNodes[i].firstChild.nodeValue); } }</script></body></html>
随时随地看视频慕课网APP
Html/CSS
JavaScript