文本节点一定是元素节点的子节点
获取文本节点的步骤
文本节点一定是元素节点的子节点
获取文本节点所在的元素节点-》利用firstChild获取文本节点-》利用文本的nodeValue 属性来读写文本值
childNodes : 该方法不实用 因为如果要获取指定的节点的指定子节点的集合 可以直接调用元素节点的getElementsByTagName()方法来获取。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//获取元素节点的子节点
window.onload = function()
{
//1. 获取city节点的所有子节点
var cityNode = document.getElementById("city");
//2. 利用元素节点的childNodes 方法 可以获取指定元素节点的所有子节点
//@@@@ 显示 9个 的原因是 所有空白区域都算上了
//所以该方法不实用。
alert(cityNode.childNodes.length);
//3. 获取#city 节点的所有li子节点
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);
//4. 获取指定节点的第一个子节点和最后一个子节点
alert(cityNode.firstChild); //这是一个元素节点
alert(cityNode.lastChild); //这是文本节点
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id = "city"><li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id = "game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
name: <input type="text" name="username" id="name" value="11111"/>
</body>
</html>
正确方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//获取文本节点
window.onload = function()
{
//文本节点一定是元素节点的子节点。
//1.获取文本节点所在的元素节点
var bjNode = document.getElementById("bj");
//2.通过firstChild定义到文本节点
var bjTextNode = bjNode.firstChild;
//3.通过操作文本节点的nodeValue 属性来读写文本节点的值。
//@@@@@结果输出的北京
alert(bjTextNode.nodeValue);
//@@@@结果是2 因为北京是2个字
alert(bjTextNode.length);
//@@@@结果是 北京变成了 湖南
bjTextNode.nodeValue = "湖南";
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id = "city"><li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id = "game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
name: <input type="text" name="username" id="name" value="11111"/>
</body>
</html>