黑马自学_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培训、期待与您交流! ----------------------

 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

黑马程序员_学习日记59_705Dom1(事件、window对象、document对象)

一、简介 DOM(Document Object Model,文档对象模型)就是把Html页面模拟成一个对象,就像XDocument一样,把Xml模拟成了一个对象。 JavaScript和Dom的...

JavaScript入门<3>JS外置对象:Window、Document对象与DOM实例详解

一)window对象 1、什么是DHTML? 2、DHTML对象模型 3、什么是Window对象?它有哪些常用属性?常用子对象? 4、Window对象有哪些常用方法?      1)对话框      ...

js关于document和window对象

  • 2013-12-30 17:13
  • 30KB
  • 下载

document、window对象

版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://solecjj.blogbus.com/logs/45973666.html 关于获取各种浏览器可见窗口大小的一点点研究...

2.window、document对象0806

一、    window : alert()/confirm()/setInterval/setTimeout setInterval(code,time)方法可以每隔 time毫秒执行一次code...

Selenium Webdriver 的使用java执行js代码 解决 ScriptEngine不支持浏览器内置对象window,document的问题

问题场景: 使用java 掉用js代码,发现 ScriptEngine不支持浏览器内置对象window,document的问题; 问题一:为什么要 用java掉用js代码?     比如在 抓取...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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