黑马自学_Dom_window对象、document对象

原创 2012年03月28日 19:28:27

---------------------- Windows Phone 7手机开发.Net培训、期待与您交流! ----------------------

 

 window对象的属性

history:

        window.history.back()后退;window.history.forward()前进;也可以用window.history.go(-1)后退;window.history.go(1)前进。

<input type="button" value="后退" onclick="window.history.back()" />
<input type="button" value="前进" onclick="window.history.forward()" />


 

 

document的方法:

(1)write:向文本中写入内容。writeln:写入一行。

          在onclick事件中写的代码会冲掉页面中所有的内容,只有页面在家在过程中write才会与原有内容融合在一起。经常用作广告嵌入。

<head>
<title></title>
<script type="text/javascript">
       document.write("hello"); //这样写不会冲掉页面中的内容
</script>
</head>
<body>
这里是页面中的内容。<!--hello会显示在这里-->
</body>

 

<input type="button" value="点击" onclick="document.write('hello')" /><!--这样写整个页面内容就剩下hello-->

 

(2)getElementById:根据元素的ID获得对象,然后就可以操作该对象的事件和属性。

例子:注册按钮10秒后生效

    <script type="text/javascript">
        var theTime = 10;//失效10秒
        var id2; //计时器标识
        function time() {
            var zcButton = document.getElementById("zc"); //获取注册按钮zc
            if (zcButton) {
                if (theTime == 0) {
                    clearInterval(id2);
                    zcButton.value = "注册";
                    zcButton.disabled = "";
                }
                else {
                    zcButton.value = "注册(" + theTime + ")"; //剩余时间
                    theTime--;
                }
            }
        }
        id2 = setInterval("time()", 1000); //每秒执行一次
    </script>
    <input id="zc" type="button" value="注册(10)" onclick="" style="cursor:pointer" disabled="disabled" />


 

(3)getElementsByName:根据元素的name获得元素数组。

例子:点谁谁“呜呜”,其他都“哈哈”

    <script type="text/javascript">
        function Click() {//将name=key的控件的触发事件改为btnClick()
            var input = document.getElementsByName("key"); //获取name=“key”的所有input标签
            for (var i = 0; i < input.length; i++) {
                input[i].onclick = btnClick;  //将他们的onclick事件的响应函数设置为btnClick方法
            }
        }
        function btnClick() {
            var input = document.getElementsByName("key");
            for (var i = 0; i < input.length; i++) {
                var button = input[i];
                if (button == window.event.srcElement)//引发事件的控件
                {
                    button.value = "呜呜";
                }
                else {
                    if (button.value != "哈哈")
                        button.value = "哈哈";
                }
            }
        }
    </script>
    <input type="button" name="key" value="哈哈" />
    <input type="button" name="key" value="哈哈" />
    <input type="button" name="key" value="哈哈" />
    <input type="button" name="key" value="哈哈" />

 

(4)getElementsByTagName:获得指定标签的元素数组。

例子:隔行改变颜色

    <script type="text/javascript">
        function changeColor() {
            var tbchange = document.getElementById("tbChange");//获取table标签
            var trs = tbchange.getElementsByTagName("tr");//获取table标签内所有tr标签元素
            for (var i = 0; i < trs.length; i++) {
                if (i % 2 == 0) //偶数行
                    trs[i].style.background = "yellow";
            }
        }
    </script>
    <table id="tbChange"><tr><td>美羊羊</td><td>100</td></tr>
    <tr><td>美羊羊</td><td>100</td></tr>
    <tr><td>美羊羊</td><td>200</td></tr>
    <tr><td>美羊羊</td><td>100</td></tr>
    <tr><td>美羊羊</td><td>200</td></tr></table>
    <input type="button" value="点击" onclick="changeColor()" />

 

 (5)CreateElement:创建具有指定标签的DOM对象,然后通过元素的appendChild的方法将新创建的元素添加到指定标签中。

 例子:点击添加一行。

    <script type="text/javascript">
        function create() {
            var input = document.createElement("input");//*只是在内存中创建一个input标签元素,并没有添加到页面中*
            var divMin = document.getElementById("divMin");//获取div元素
            input.type = "button";//指定input元素是一个按钮
            input.value = "动态添加的";
            divMin.appendChild(input);//*将input的元素添加到div中,如果没有这一句则不会添加到页面中*我们很容易忘记这一句话*
        }
    </script>
    <div id="divMin">
    </div>
    <input type="button" value="添加标签" onclick="create()" />

 

 

this和event.srcElement:

两者都是获得发生事件的控件。不同的是只有在事件响应函数中才能使用this,在事件响应函数调用的函数中不能使用this。

如果要使用必须传入到函数或者使用event.srcElement。

 

innerText、innerHTML:分别表示元素标签内内容的文本表现形式和HTML源代码,这两个属性是可读可写的。

   <a id="super" href="www.chaoren.com">我是<font color="Red">超</font>人</a>;

  <input type="button" value="查看" onclick="document.getElementById('super').innerText;document.getElementById('super').innerHTML" />

   结果是 “我是超人”、“我是<font color="Red">超</font>人”

 

---------------------- Windows Phone 7手机开发.Net培训、期待与您交流! ----------------------

 

 

深入Javascript Object(对象)视频教程

掌握Object的静态属性和静态方法, 原型属性和原型方法. 理解相关面向对象的一些使用方法等等. 为学习面向对象做一定的基础.
  • 2017年02月26日 13:00

document对象

  • 2010年12月12日 23:26
  • 112KB
  • 下载

js--document对象以及方法

document对象 document对象的方法:     write():向html文档中输入指定的对象。     writeln():向html文档中写入数据并换行。     open()...
  • yjz_sdau
  • yjz_sdau
  • 2016-05-12 16:02:53
  • 737

$(document).ready 缺少对象

今天做把页面的js代码全部放到js文件中。之后出现“缺少对象”的错误。 原来导入引入js时要先引入jquery的js 如下 JS/jquery-1.8.0.js"> JS/feed...
  • kebikakaxi
  • kebikakaxi
  • 2012-10-29 17:36:56
  • 2114

jquery对象 与 document 对象的互为转换关系

function t1() { var jtest = $('#test'); var dtest = document.getElementById('test');...
  • a519640026
  • a519640026
  • 2013-04-16 10:29:45
  • 10512

document对象常用方法总结

DOM中常用的几个方法: 1,getelementById方法 获取id属性 2,getelementByTagName方法 获取标签名字,常见的有等html标签,返回的是一个数组 3,getelem...
  • zxb_ooooo
  • zxb_ooooo
  • 2017-04-08 22:32:05
  • 85

JavaScript HTML DOM节点类型之Document类型(Document对象属性和Document对象集合属性)

ocument对象使我们可以用JavaScript对 HTML 页面中的所有元素进行访问。要访问 HTML 页面中元素,除可以用Document对象中的方法外,还可以通过Document对象的属性。D...
  • bfboys
  • bfboys
  • 2017-01-11 22:34:14
  • 1259

Document对象,Element对象和Node对象简介

Document对象: 根元素的访问,也就是HTML标签的访问。使用document.documentElement访问根对象。使用Document对象查找对象 getElementById()...
  • qq455276333
  • qq455276333
  • 2013-09-08 17:04:30
  • 17515

学习笔记之Document Object Model(1)——如何使用document获得文档元素(element对象)

每天学习一点点,进步多一点儿!!
  • weilixin88
  • weilixin88
  • 2017-02-19 17:39:24
  • 724

浅谈window对象和document对象

1、window:代表浏览器中一个打开的窗口。 (1)对象属性 ① window.self 引用本窗口window==window.self ② window.name 为窗口名字 ③ win...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-03-13 17:39:47
  • 847
收藏助手
不良信息举报
您举报文章:黑马自学_Dom_window对象、document对象
举报原因:
原因补充:

(最多只允许输入30个字)