猿问

这段代码为什么输出#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
浏览 1959回答 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
我要回答