Dom 学习总结以及实例的使用介绍

时间：2021-05-28

1、重新导航到指定的地址：navigate("https://mafy(this.value);this.style.textAlign='right';"
onfocus="this.style.textAlign='left';this.value=this.value.replace(/,/g,'')" />
<br />
</body>
</html>

复制代码 代码如下:
省市选择
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
案例：实现省市选择界面。请选择省的处理，从后向前删。
-->
<head>
<title>欢迎来到daomul的博客，欢迎再来，谢谢（省市选择）</title>
<script type="text/javascript">
var data = { "山东": ["济南", "青岛", "潍坊"], "河南": ["郑州", "洛阳", "三门峡"], "辽宁": ["沈阳", "鞍山", "大连"] };
function loadProv() {
var prov = document.getElementById("prov");
for (var key in data) {
var option = document.createElement("option");
option.value = key;
option.innerText = key;
prov.appendChild(option);
}
}
function provChange() {
var prov = document.getElementById("prov");
var city = document.getElementById("city");

for (var i = city.childNodes.length - 1; i >= 0; i--) {
var option = city.childNodes[i];
city.removeChild(option);
}

var provName = prov.value;
var cities = data[provName]; //取出的内容["济南", "青岛", "潍坊"]
for (var i = 0; i < cities.length; i++) {
var option = document.createElement("option");
option.value = cities[i];
option.innerText = cities[i];
city.appendChild(option);
}
}
</script>
</head>
<body onload="loadProv()">
<select id="prov" onchange="provChange()">
<option value="请选择省">--请选择省--</option>
</select>
<select id="city">
</select>
</body>
</html>

案例3：复选框实现全选、全不选、反选
复制代码 代码如下:
复选框选择
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>欢迎来到daomul的博客，欢迎再来，谢谢（歌曲选择）</title>
<script type="text/javascript">
function selAll() {
var div1 = document.getElementById("playlist");
var input1 = div1.getElementsByTagName("input");
for (var i = 0; i < input1.length; i++) {
if (input1[i].type == "checkbox") {
input1[i].checked = "checked";
}
}
}
function deSelAll() {
var div1 = document.getElementById("playlist");
var input1 = div1.getElementsByTagName("input");
for (var i = 0; i < input1.length; i++) {
if (input1[i].type == "checkbox") {
input1[i].checked = "";
}
}
}
function reverseSel() {
var div1 = document.getElementById("playlist");
var input1 = div1.getElementsByTagName("input");
for (var i = 0; i < input1.length; i++) {
if (input1[i].type == "checkbox") {
if (input1[i].checked == true) {
input1[i].checked = false;
}
else{
input1[i].checked = true;
}
}
}
}
</script>
</head>
<body>
<div id="playlist">
<input type="checkbox" id="p1" /><label for="p1">leaving into the dog</label><br />
<input type="checkbox" id="p2" /><label for="p1">take a shower</label><br />
<input type="checkbox" id="p3" /><label for="p1">fire heart</label><br />
<input type="checkbox" id="p4" /><label for="p1">china</label><br />
<p>
<input type="button" onclick="selAll()" value="全选" />
<input type="button" onclick="deSelAll()" value="全不选" />
<input type="button" onclick="reverseSel()" value="反选" />
</p>
</div>
</body>
</html>

案例4：权限选择
复制代码 代码如下:
权限选择
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>欢迎来到daomul的博客，欢迎再来，谢谢（权限选择）</title>
<script type="text/javascript">
function moveSelected(selectedSrc, selectedLast) {
for (var i = selectedSrc.childNodes.length - 1; i >= 0; i--) {
var newOption = selectedSrc.childNodes[i];
if (newOption.selected == true) {
selectedSrc.removeChild(newOption);
newOption.selected = false;
selectedLast.appendChild(newOption);
}
}
}
function moveAll(selectedSrc, selectedLast) {
for (var i = selectedSrc.childNodes.length - 1; i >= 0; i--) {
var newOption = selectedSrc.childNodes[i];
selectedSrc.removeChild(newOption);
selectedLast.appendChild(newOption);
}
}
</script>
</head>
<body>
<select style="float:left;width:15%;height:100px;" id="select1" multiple="multiple">
<option>添加</option>
<option>删除</option>
<option>修改</option>
<option>查询</option>
<option>打印</option>
</select>
<div style="float:left">
<input style="float:left;width:100%;" type="button" value=">" onclick="moveSelected(document.getElementById('select1'),document.getElementById('select2'))" />
<input style="float:left;width:100%;" type="button" value="<" onclick="moveSelected(document.getElementById('select2'),document.getElementById('select1'))" />
<input style="float:left;width:100%;" type="button" value=">>" onclick="moveAll(document.getElementById('select1'),document.getElementById('select2'))" />
<input style="float:left;width:100%;" type="button" value="<<" onclick="moveAll(document.getElementById('select2'),document.getElementById('select1'))" />
</div>
<select style="float:left;width:15%;height:100px;" id="select2" multiple="multiple"></select>
</body>
</html>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章