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>


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>

(*)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>

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

显示行号 复制代码 ? 这是一段程序代码。
  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}

案例:十秒钟后协议文本框下的注册按钮才能点击,时钟倒数。
(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>

倒计时中 --- 》 

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

练习:图片浏览器。

显示行号 复制代码 ? 这是一段程序代码。
  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>
    

DOM – 4.doucument属性的更多相关文章

  1. html标签属性(attribute)和dom元素的属性(property)

    简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...

  2. HTML DOM对象的属性和方法

    HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 docum ...

  3. HTML DOM 的nodeType属性

    在HTML DOM中每一部分都是节点: HTML元素是元素节点 HTML中属性是属性节点 文本是文本节点 注释是注释节点 这时我们要给它区分开我们就可以使用HTML DOM的nodeType属性 no ...

  4. js 获取DOM的style属性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. DOM常用的属性和方法

    之前一直傻傻分不清DOM和JavaScript究竟有什么区别,随着相关工作时间的增长,开始逐渐区分DOM和JavaScript了,最近,也一直在复习有关DOM方面的知识,<JavaScript ...

  6. DOM相关方法,属性整理

    DOM相关方法,属性整理1.获取元素的方法 1根据id获取对象 document.getElementById(''); 2根据标签名获取对象 document.getElementsByTagNam ...

  7. DOM节点中属性nodeName、nodeType和nodeValue的区别 < Delphi >

    http://msdn.microsoft.com/zh-cn/library/vstudio/hf9hbf87.aspx <?xml version="1.0"?> ...

  8. HTML DOM对象的属性和方法介绍(原生JS方法)

    HTML DOM对象的属性和方法介绍 DOM 是 Document Object Model(文档对象模型)的缩写. DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口), ...

  9. HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次)

    HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...

随机推荐

  1. 新技能get——斜率优化

    好久没写博客了……我终于回来了…… dp总是令我很头疼的问题之一,然而我还是要学一下怎么优化它. 下面请看一道题吧: [bzoj3675][Apio2014]序列分割 试题描述 小H最近迷上了一个分割 ...

  2. SNMP详解

    简单网络管理协议(SNMP)是TCP/IP协议簇的一个应用层协议.在1988年被制定,并被Internet体系结构委员会(IAB)采纳作为一个短期的网络管理解决方案:由于SNMP的简单性,在Inter ...

  3. 使用PopupWindow

    PopupWindow可以用来实现弹出任意位置的菜单,比Context Menu和Option Menu灵活性更高.Android中弹出一个PopupWindow基本有两个方法: 1 2 //Disp ...

  4. jQuery插件-表单验证插件-Validation

    1.Validation简介 标准的验证方法库 1)内置验证规则:必填,数字,E-Mail,URL和信用卡号码等19类内置验证规则. 2)自定义验证规则:自定义 3)验证信息提示:默认了验证信息提示, ...

  5. [转]ubuntu 14.04 如何开启和关闭触控板

    转自:http://lxn348567248.blog.163.com/blog/static/1201759252014649443513/ 禁用触摸板的命令:  sudo rmmod psmous ...

  6. Border Tree笔记

    最近在学这个东西(当然不是行道树了QAQ..),感觉挺鬼畜的,整个人都不太好了..(特别是鬼畜的sone爷代码与讲稿),感觉他写的并不是普及向算法...?

  7. VQuery高级特性

    VQuery高级特性 css方法 同时设置多个--for in 链式操作 链式操作 函数,链式操作 css 方法链式操作 json的使用 阻止冒泡,默认事件 VQuery插件 插件机制 可以扩展库的功 ...

  8. PHP 常量

    1.__NAMESPACE__           http://php.net/manual/zh/language.namespaces.nsconstants.php

  9. C语言中#define的用法(转)

    转自:http://www.dingge.com/main/article.asp?id=10 今天整理了一些#define的用法,与大家共享! 1.简单的define定义 #define MAXTI ...

  10. Android SDK在线更新镜像服务器

    http://www.cnblogs.com/tc310/p/4696731.html#_label0