<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查询与事件</title>
<script type="text/javascript">
function nodeLayerTest() {
var pNode =document.getElementById("select1");
var sNode1=pNode.firstChild;
var sNode2=pNode.lastChild;
var sNode3=sNode1.nextSibling;
alert(pNode.childNodes.length);
alert("sNode1:"+sNode1.innerHTML+"sNode2:"+sNode2.innerHTML+"snode3:"+sNode3.innerHTML);
}
function tagNameTest() {//根据tagname查找元素
var nodes=document.getElementsByTagName("option");
alert(nodes.length);
}
function eventPopTest() {
alert("你点击了按钮");
event.stopPropagation();
}
function eventDiv() {
alert("你点击了div");
}
</script>
</head>
<select id="select1">
<option value="value1">篮球</option>
<option value="value2">足球</option>
<option value="value3">游泳</option>
<option value="value4">跆拳道</option>
</select>
<body>
<input type="button" value="开始测试" οnclick="nodeLayerTest();">
<input type="button" value="tagName测试" οnclick="tagNameTest();">
<!-- 冒泡事件 -->
<div id="div1" οnclick="eventDiv()">
<input type="button" value="冒泡事件" οnclick="eventPopTest()">
</div>
<!-- 看事件 鼠标事件 键盘事件 状态事件 -->
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查询与事件</title>
<script type="text/javascript">
function nodeLayerTest() {
var pNode =document.getElementById("select1");
var sNode1=pNode.firstChild;
var sNode2=pNode.lastChild;
var sNode3=sNode1.nextSibling;
alert(pNode.childNodes.length);
alert("sNode1:"+sNode1.innerHTML+"sNode2:"+sNode2.innerHTML+"snode3:"+sNode3.innerHTML);
}
function tagNameTest() {//根据tagname查找元素
var nodes=document.getElementsByTagName("option");
alert(nodes.length);
}
function eventPopTest() {
alert("你点击了按钮");
event.stopPropagation();
}
function eventDiv() {
alert("你点击了div");
}
</script>
</head>
<select id="select1">
<option value="value1">篮球</option>
<option value="value2">足球</option>
<option value="value3">游泳</option>
<option value="value4">跆拳道</option>
</select>
<body>
<input type="button" value="开始测试" οnclick="nodeLayerTest();">
<input type="button" value="tagName测试" οnclick="tagNameTest();">
<!-- 冒泡事件 -->
<div id="div1" οnclick="eventDiv()">
<input type="button" value="冒泡事件" οnclick="eventPopTest()">
</div>
<!-- 看事件 鼠标事件 键盘事件 状态事件 -->
</body>
</html>