DOM – 4.doucument属性

时间:2023-08-25 09:48:26

4.document属性

2.1 write

2.2 getElementById 方法

getElementsByName

getElementsByTagName

案例:全选反选

案例:点击一个按钮,被点击的按钮显示“呜呜”,其他按钮显示“哈哈”。

案例:十秒钟后协议文本框下的注册按钮才能点击,时钟倒数。 (btn.disabled = true )

练习:加法计算器。两个文本框中输入数字,点击【=】按钮将相加的结果放到第三个文本框中。

练习:图片浏览器。

4.document属性

1. document是window对象的一个属性,因为使用window对象成员的时候可以省略window.,所以一般直接写document

2. document的方法:

2.1 write:向文档中写入内容。writeln,和write差不多,只不过最后添加一个回车

<input type="button" value="点击" onclick="document.write('<font color=red>你好</font>')" />
在onclick等事件中写的代码会冲掉页面中的内容,只有在页面加载过程中write才会与原有内容融合在一起
    <script type="text/javascript">
        document.write('<font color=red>你好</font>');
    </script>

DOM – 4.doucument属性
write经常在广告代码、整合资源代码中被使用。见备注

内容联盟、广告代码、cnzz,不需要被主页面的站长去维护内容,只要被嵌入的js内容提供商修改内容,显示的内容就变了。

2.2 getElementById 方法(非常常用),根据元素的Id获得对象,网页中id不能重复。也可以直接通过元素的id来引用元素,但是有有效范围、form1.textbox1之类的问题,因此不建议直接通过id操作元素,而是通过getElementById
(*)getElementsByName,根据元素的name获得对象,由于页面中元素的name可以重复,比如多个 RadioButton 的name一样,因此getElementsByName返回值是对象数组。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript"> //radio单选(集合)
f1 = function () {
var radios = document.getElementsByName("sex"); for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
alert(radios[i].value); break;
}
}
} //checkbox多选
function f2() {
var s = "";
var checkboxs = document.getElementsByName("number"); for (var i = 0; i < checkboxs.length; i++) {
if (checkboxs[i].checked) {
s

+= checkboxs[i].value + ";"

;
}
}
alert(s);
}
</script>
</head>
<body>
<input type="radio" value="man" checked="checked" name="sex" />男
<input type="radio" value="woman" name="sex" />女
<input type="radio" value="yao??" name="sex" />人妖? <input type="button" onclick="f1()" value="click" />
<br />
<div>
<input type="checkbox" name="number" checked="checked" value="1" />1
<input type="checkbox" name="number" value="2" />2
<input type="checkbox" name="number" value="3" />3 <input type="button" onclick="f2()" value="click" />
</div>
</body>
</html>

DOM – 4.doucument属性DOM – 4.doucument属性

(*)getElementsByTagName,获得指定标签名称的元素数组,比如getElementsByTagName("p")可以获得所有的<p>标签。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
//全选
function Allchecked() {
//触发事件的对象 全选的checkbox
var obb = event.srcElement;
//获取所有的input标签
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
//判断当前的input对象是不是checkbox
if (inputs[i].type == "checkbox") {
inputs[i].checked = obb.checked;
}
}
} //取消全选
function oneChecked() {
//获取所有的input标签
var inputs = document.getElementsByTagName("input");
//全选框 for (var i = 0; i < inputs.length; i++) {
//判断当前的input对象是不是checkbox
if (inputs[i].type == "checkbox") {
//判断当前的input对象不是全选时
if (inputs[i].id != document.getElementById('chkAll')) {
//假设所有checkbox被选中
var ischeckAll = true;
//再循环一次
for (var j = 0; j < inputs.length; j++) {
if (inputs[j].type == "checkbox" && inputs[j].id != "chkAll") {
//判断是否被选中
if (!inputs[j].checked) {
ischeckAll = false;
break;
}
}
}
//
document.getElementById('chkAll').checked = ischeckAll;
}
}
}
} </script>
</head>
<body>
<div>
<input type="checkbox" id="chkAll" value="全选" onclick="Allchecked()" />全选
<br />
<input type="checkbox" value="A" onclick="oneChecked()" />吃饭
<br />
<input type="checkbox" value="B" onclick="oneChecked()" />睡觉
<br />
<input type="checkbox" value="C" onclick="oneChecked()" />玩电脑
<br />
<input type="button" onclick="reverseChecked()" value="反选" />
</div>
</body>
</html>

DOM – 4.doucument属性

DOM – 4.doucument属性

案例:全选反选(完整代码)

显示行号 复制代码 ? 这是一段程序代码。
  1. <!DOCTYPE html>
    
  2. <html xmlns="http://www.w3.org/1999/xhtml">
    
  3. <head>
    
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
  5.     <title></title>
    
  6.     <script type="text/javascript">
    
  7.         //1.全选
    
  8.         function Allchecked() {
    
  9.             //触发事件的对象 全选的checkbox
    
  10.             var obb = event.srcElement;
    
  11.             //获取所有的input标签
    
  12.             var inputs = document.getElementsByTagName("input");
    
  13.             for (var i = 0; i < inputs.length; i++) {
    
  14.                 //判断当前的input对象是不是checkbox
    
  15.                 if (inputs[i].type == "checkbox") {
    
  16.                     inputs[i].checked = obb.checked;
    
  17.                 }
    
  18.             }
    
  19.         }
    
  20.         //2.取消全选
    
  21.         function oneChecked() {
    
  22.             //获取所有的input标签
    
  23.             var inputs = document.getElementsByTagName("input");
    
  24.             //全选框
    
  25.             for (var i = 0; i < inputs.length; i++) {
    
  26.                 //判断当前的input对象是不是checkbox
    
  27.                 if (inputs[i].type == "checkbox") {
    
  28.                     //判断当前的input对象不是全选时
    
  29.                     if (inputs[i].id != document.getElementById('chkAll')) {
    
  30.                         //假设所有checkbox被选中
    
  31.                         single();
    
  32.                     }
    
  33.                 }
    
  34.             }
    
  35.         }
    
  36.         //3.反选
    
  37.         function reverseChecked() {
    
  38.             //获取所有的input标签
    
  39.             var inputs = document.getElementsByTagName("input");
    
  40.             for (var i = 0; i < inputs.length; i++) {
    
  41.                 //判断当前的input对象是不是checkbox
    
  42.                 if (inputs[i].type == "checkbox") {
    
  43.                     //1.判断当前的input对象不是全选时
    
  44.                     if (inputs[i].id != document.getElementById('chkAll')) {
    
  45.                         //取反
    
  46.                         inputs[i].checked = !inputs[i].checked;
    
  47.                     }
    
  48.                 }
    
  49.             }
    
  50.             single();
    
  51.         }
    
  52.         //4.判断所有子checkbox是否被选中
    
  53.         function single() {
    
  54.             var inputs = document.getElementsByTagName("input");
    
  55.             var ischeckAll = true;
    
  56.             //再循环一次
    
  57.             for (var j = 0; j < inputs.length; j++) {
    
  58.                 if (inputs[j].type == "checkbox" && inputs[j].id != "chkAll") {
    
  59.                     //判断是否被选中
    
  60.                     if (!inputs[j].checked) {
    
  61.                         ischeckAll = false;
    
  62.                         break;
    
  63.                     }
    
  64.                 }
    
  65.             }
    
  66.             document.getElementById('chkAll').checked = ischeckAll;
    
  67.         }
    
  68. </script>
    
  69. </head>
    
  70. <body>
    
  71.     <div>
    
  72.         <input type="checkbox" id="chkAll" value="全选" onclick="Allchecked()" />全选
    
  73. <br />
    
  74.         <input type="checkbox" value="A" onclick="oneChecked()" />吃饭
    
  75. <br />
    
  76.         <input type="checkbox" value="B" onclick="oneChecked()" />睡觉
    
  77. <br />
    
  78.         <input type="checkbox" value="C" onclick="oneChecked()" />玩电脑
    
  79. <br />
    
  80.         <input type="button" onclick="reverseChecked()" value="反选" />
    
  81.     </div>
    
  82. </body>
    
  83. </html>
    

案例:点击一个按钮,被点击的按钮显示“呜呜”,其他按钮显示“哈哈”。

显示行号 复制代码 ? 这是一段程序代码。
  1. <!DOCTYPE html>
    
  2. <html xmlns="http://www.w3.org/1999/xhtml">
    
  3. <head>
    
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
  5.     <title></title>
    
  6.     <script type="text/javascript">
    
  7.         window.onload = function () {
    
  8.             var haha = document.getElementsByTagName("input");
    
  9.             for (var i = 0; i < haha.length; i++) {
    
  10.                 if (haha[i].type == "button") {
    
  11.                     //注册onclick事件
    
  12.                     haha[i].onclick = function () {
    
  13.                         //alert(i);   //i的值等于7,因为onload加载完i值等于最后的6,然后再循环1次
    
  14.                         for (var i = 0; i < haha.length; i++) {
    
  15.                             if (haha[i].type == "button") {
    
  16.                                 haha[i].value = "哈哈";
    
  17.                             }
    
  18.                         }
    
  19.                         //触发事件的对象
    
  20.                         event.srcElement.value = "呜呜";
    
  21.                     }
    
  22.                 }
    
  23.             }
    
  24.         };
    
  25. </script>
    
  26. </head>
    
  27. <body>
    
  28.     <div>
    
  29.         <input type="button" value="哈哈" name="haha" /><br />
    
  30.         <input type="button" value="哈哈" name="haha" /><br />
    
  31.         <input type="button" value="哈哈" name="haha" /><br />
    
  32.         <input type="button" value="哈哈" name="haha" /><br />
    
  33.         <input type="button" value="哈哈" name="haha" /><br />
    
  34.         <input type="button" value="哈哈" name="haha" /><br />
    
  35.         <input type="button" value="哈哈" name="haha" /><br />
    
  36.     </div>
    
  37. </body>
    
  38. </html>
    

.src_container{background-color:#e7e5dc; width:99%; overflow:hidden; margin:12px 0 12px 0 !important; padding:0px 3px 3px 0px}
.src_container .titlebar{ background-color:#d4dfff; border:1px solid #4f81bd; border-bottom:0; padding:3px 24px; margin:0; width:auto; line-height:120%; overflow:hidden; text-align:left; font-size:12px}
.src_container .toolbar{ display:inline; font-weight:normal; font-size:100%; float:right; cursor:hand; color:#00f; text-align:left; overflow:hidden}
.toolbar span.button{ display:inline; font-weight:normal; font-size:100%; cursor:hand; color:#00f; text-align:left; overflow:hidden; cursor:pointer;}
.src_container div.clientarea{ background-color:white; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; height:auto; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys",courier,monospace,serif}
.src_container ol.mainarea{ padding:0 0 0 52px; margin:0; background-color:#f7f7ff !important}
.number_show{ padding-left:52px !important; list-style:decimal outside !important}
.number_show li{ list-style:decimal outside !important; border-left:1px dotted #4f81bd}
.number_hide{ padding-left:0px !important; list-style-type:none !important}
.number_hide li{ list-style-type:none !important; border-left:0px}
ol.mainarea li{ display:list-item !important; font-size:12px !important; margin:0 !important; line-height:18px !important; padding:0 0 0 0px !important; background-color:#f7f7ff !important; color:#4f81bd}
ol.mainarea li pre{color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap ol.mainarea li pre{white-space:pre-wrap; white-space:-moz-pre-wrapwhite-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word}
ol.mainarea li pre.alt{ background-color:#f7f7ff !important}

DOM – 4.doucument属性

案例:十秒钟后协议文本框下的注册按钮才能点击,时钟倒数。
(btn.disabled = true )

隐藏行号 复制代码 ? 这是一段程序代码。
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <script type="text/javascript">
  7.         var count = 10;
  8.         //设置计数器
  9.         var tmrId = setInterval("test()", 1000);
  10.         function test() {
  11.         var btn = document.getElementById("btn");
  12.         if (count > 0) {
  13.                 aa = Date();
  14.                 btn.value = "请仔细阅读(" + count + ")秒";
  15.                 count--;
  16.             } else {
  17.                 btn.value = "同意";
  18.                 btn.disabled = false;
  19.                 clearInterval(tmrId);
  20.             }
  21.         }
  22. </script>
  23. </head>
  24. <body>
  25.     <div>
  26.         <input id="btn" type="button" value="设置" disabled="disabled" />
  27.     </div>
  28. </body>
  29. </html>

倒计时中 --- 》  DOM – 4.doucument属性

练习:加法计算器。两个文本框中输入数字,点击【=】按钮将相加的结果放到第三个文本框中。

练习:图片浏览器。

DOM – 4.doucument属性DOM – 4.doucument属性

显示行号 复制代码 ? 这是一段程序代码。
  1. <!DOCTYPE html>
    
  2. <html xmlns="http://www.w3.org/1999/xhtml">
    
  3. <head>
    
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
  5.     <title></title>
    
  6.     <script type="text/javascript">
    
  7.         window.onload = function () {
    
  8.             var ul = document.getElementById("meinv");
    
  9.             //获取ul中的a标签
    
  10.             var nv = ul.getElementsByTagName("a");
    
  11.             for (var i = 0; i < nv.length; i++) {
    
  12.                 //为ul下的a标签注册onclick事件
    
  13.                 nv[i].onclick = function () {
    
  14.                     var img = document.getElementById("i1");
    
  15.                     //img的地址等于当前点击a标签地址
    
  16.                     img.src = event.srcElement.href;
    
  17.                     //防止跳转
    
  18.                     return false;
    
  19.                 }
    
  20.             }
    
  21.         }
    
  22. </script>
    
  23. </head>
    
  24. <body>
    
  25.     <ul id="meinv">
    
  26.         <li><a href="image/1.jpg">美女1</a></li>
    
  27.         <li><a href="image/2.jpg">美女2</a></li>
    
  28.         <li><a href="image/3.jpg">美女3</a></li>
    
  29.         <li><a href="image/4.jpg">美女4</a></li>
    
  30.     </ul>
    
  31.     <br />
    
  32.     <img id="i1" src="data:image/1.jpg" />
    
  33. </body>
    
  34. </html>