<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<style type="text/css">
.xyz {
}
.abc {
}
table {
width: 500px;
margin: auto;
border-collapse: collapse;
}
table, tr, td {
border: 1px solid #000000;
}
</style>
</head>
<body onmousemove="doMove(event);">
<div>
<table onclick="doEventTargetTest(event);">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</div>
<hr>
<div id="point">
</div>
<hr>
<div id="content">
<ul>
<li>?</li>
<li>?</li>
<li>?</li>
<li>?</li>
<li>?</li>
</ul>
</div>
<hr>
<div>
<input class="xyz" type="text" name="username" value="ROSE">
<input type="radio" name="sex" value="1">男
<input class="xyz abc" type="radio" name="sex" value="0">女
<input type="checkbox" name="c" value="R">RED
<input type="checkbox" name="c" value="G">GREEN
<input type="checkbox" name="c" value="B">BLUE
<select id="car" name="car" onchange="fun();">
<option value="ford">福特</option>
<option value="redflag">红旗</option>
<option value="bmw">宝马</option>
<option value="audi">奥迪</option>
</select>
</div>
</body>
<script type="text/javascript">
// 改变背景颜色
// document.bgColor = "#ABABAB";
// 获取元素
// var _div = document.getElementById("content");
var ele = document.createElement("li");
ele.innerText = "?";
document.querySelector("ul").appendChild(ele);
function fun() {
// 方法一：
var val = document.getElementById("car").value;
alert(val);
// 方法二：
var ele = document.getElementById("car");
var idx = ele.selectedIndex;
alert(ele.children.item(idx).value); // 取下拉列表中值
alert(ele.children.item(idx).text); // 取下拉列表中的文本
}
function doMove(evn) {
var x = evn.x, y = evn.y;
document.getElementById("point").innerHTML = (x + " :: " + y);
}
function doEventTargetTest(evn) {
var ele = evn.target;// 获取事件源（实际触发事件的元素节点）IE古老浏览器要换srcElement
alert(ele.innerText);
ele.style.backgroundColor = "red";
}
</script>
</html>
简易例子——documnent对象的使用
最新推荐文章于 2021-06-21 06:56:46 发布
1074
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
