弹出当前值以及修改

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//点击时,加载页面
window.onload=function(){
//文本节点一定是元素节点的子节点
//获取文本节点所在的元素节点,获得所有的li节点
var liNodes = document.getElementsByTagName("li");
//循环每一个li
for(var i=0;i<liNodes.length;i++){
//给每个li节点添加一个onclick事件
liNodes[i].onclick=function(){
//输出当前的文本节点的值。this表示当前
alert(this.firstChild.nodeValue);
}
}
//获取文本节点所在的元素节点
var idNodes=document.getElementById("sh");
//通过 firstChild 定义为到文本节点
var idTest = idNodes.firstChild;
alert(idTest.nodeValue);
idTest.nodeValue = "上海,你好";
//这样的不是文本节点,所以不用nodeValue
var name = document.getElementById("name");
alert(name.value);
name.value = "照顾好自己";
}
</script>
</head>
<body>
<p>你想去的城市:</p>
<ul id="city">
<li id="sh" name="moudu">上海</li>
<li>深圳</li>
</ul>
<br/>
<p>你喜欢的编程?</p>
<ul>
<li id="java">Java</li>
<li>Javascript</li>
</ul>
<br/>
name:<input type="text" id="name" name="username" value="爱一个人很难"/>
</body>
</html>

《注释:getElementsByTagName是通过查找整个 HTML 文档中的任何 HTML 元素,传回指定名称的元素集合。》

posted @ 2017-01-06 17:07  caocx  阅读(172)  评论(0编辑  收藏  举报