关闭

黑马自学_Dom_window对象、document对象

131人阅读 评论(0) 收藏 举报

---------------------- 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培训、期待与您交流! ----------------------

 

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4200次
    • 积分:164
    • 等级:
    • 排名:千里之外
    • 原创:12篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章存档