javascript中如何获得ul中所有列表项的值
3个回答
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>javascript获取ul节点的所有子节点内容</title>
<script type="text/javascript">
//在页面加载的时候为id为clk_btn的按钮绑定onclick事件
window.onload=function(){
//得到id为clk_btn的按钮节点
var clk_btn = document.getElementById("clk_btn");
//alert(clk_btn);
clk_btn.onclick=function(){
//得到id为ulNode的节点
var ulNode = document.getElementById("ulNode");
//得到ulNode所有的孩子结点
var childrens = ulNode.childNodes;
//alert(childrens.length);
var len = childrens.length;
//循环遍历所有孩子结点，并输出节点内的值
for(var i=0;i<len;i++){
alert(childrens[i].nodeName);
alert("第"+(i+1)+"节点的内容是:"+childrens[i].innerHTML);
}
}
}
</script>
</head>
<body>
<ul id="ulNode">
<li>first one</li>
<li>second one</li>
<li>third one</li>
<li>fourth one</li>
<li>fifth one</li>
</ul>
<input type="button" value="click me" id="clk_btn"/>
</body>
</html>
以上代码在IE中能正常运行，由于FF与IE关于DOM有不同的特性，所以在FF中运行有些许不同，你可以试试！
<html>
<head>
<title>javascript获取ul节点的所有子节点内容</title>
<script type="text/javascript">
//在页面加载的时候为id为clk_btn的按钮绑定onclick事件
window.onload=function(){
//得到id为clk_btn的按钮节点
var clk_btn = document.getElementById("clk_btn");
//alert(clk_btn);
clk_btn.onclick=function(){
//得到id为ulNode的节点
var ulNode = document.getElementById("ulNode");
//得到ulNode所有的孩子结点
var childrens = ulNode.childNodes;
//alert(childrens.length);
var len = childrens.length;
//循环遍历所有孩子结点，并输出节点内的值
for(var i=0;i<len;i++){
alert(childrens[i].nodeName);
alert("第"+(i+1)+"节点的内容是:"+childrens[i].innerHTML);
}
}
}
</script>
</head>
<body>
<ul id="ulNode">
<li>first one</li>
<li>second one</li>
<li>third one</li>
<li>fourth one</li>
<li>fifth one</li>
</ul>
<input type="button" value="click me" id="clk_btn"/>
</body>
</html>
以上代码在IE中能正常运行，由于FF与IE关于DOM有不同的特性，所以在FF中运行有些许不同，你可以试试！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这些东西不要自己写啦！
用jQuery把
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('ul#id>li').each(function(i){
alert($(this).val())
})
})
</script>
解析：
#引用JQ库
#$(document).ready
页面元素都加载好之后执行
#$('ul#id>li')
查找找出id=id的ul元素
>li 的意思是在ul的下级元素中找出li
.each 的意思是遍历一次所有找到的元素
$(this) 当前找到的元素，就是你要的li，这里是循环的
你可以用其他形式保存也可以。
例如 str+=$(this).val() 等等
用jQuery把
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('ul#id>li').each(function(i){
alert($(this).val())
})
})
</script>
解析：
#引用JQ库
#$(document).ready
页面元素都加载好之后执行
#$('ul#id>li')
查找找出id=id的ul元素
>li 的意思是在ul的下级元素中找出li
.each 的意思是遍历一次所有找到的元素
$(this) 当前找到的元素，就是你要的li，这里是循环的
你可以用其他形式保存也可以。
例如 str+=$(this).val() 等等
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
试一下这个document.getElementById('myul').getElementsByTagName('li').innerText
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
