黑马自学_Dom_window对象、document对象

最新推荐文章于 2023-01-22 23:19:46 发布

原创最新推荐文章于 2023-01-22 23:19:46 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input #button #windows phone #function #table #div

本文详细介绍了JavaScript中如何操作DOM，包括使用window.history进行浏览器历史记录的控制，利用document的方法如getElementById、getElementsByName等选择元素，以及通过createElement创建DOM对象等技巧。

---------------------- 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>;

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

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