JavaScript DOM 事件(二)

如下图:实现点击每个li节点,都弹出其文本值

喜欢城市

    id="city">
  • id="bj" name="beijing">北京
  • id="sh" name="beijing">上海
  • id="zz" name="beijing">郑州


代码如下:

window.onload = function(){
// 点击每个li节点,都弹出其文本值
var liNode = document.getElementsByTagName("li");
//使用for循环进行遍历,得到每一个li节点

for(var i=0; i< liNode.length; i++){
liNode[i].onclick= function(){
//在响应函数中获取当前节点的文本节点的文本值
//alert(liNode[i].firstChild.nodeValue);该方法不能实现,此时i已经是3了,而liNode[3]不指向任何节点
alert(this.firstChild.nodeValue);//this 正在响应事件的节点
}
}
}


效果如下:

JavaScript DOM 事件(二)_第1张图片









你可能感兴趣的:(HTML,JavaScript)