欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript:document对象的常用属性和方法

程序员文章站 2022-04-03 15:38:36
...

1.document对象的常用方法

ID 方法 描述
1 getElementById() 返回对拥有指定id的第一个对象的引用
2 getElementByName() 返回带有指定名称的对象的集合
3 getElementByTagName() 返回带有标签名的对象的集合
4 write() 向文档写文本、HTML表达式或JavaScript代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScript:document对象的常用属性和方法</title>

    <script type="text/javascript">
        function changeText1() {
            document.getElementById("node").innerHTML = "taobao";
        }

        function all_input() {
            var all = document.getElementsByTagName("input");
            var str = "";
            for (var i = 0; i < all.length; i++) {
                str = str + all[i].value + "<br/>";
            }
            document.getElementById("s").innerHTML = str;
        }

        function all_name_input() {
            var all = document.getElementsByName("season")
            var str = "";
            for (var i = 0; i < all.length; i++) {
                str = str + all[i].value + "<br/>";
            }
            document.getElementById("s").innerHTML = str;
        }
    </script>
</head>

<body>
<div id="node">bugsweet</div>
<br/>
<input name="b1" type="button" value="改变层内容" onclick="changeText1();"/> <br/><br/>

<input type="text" name="season" value="春"/><br/>
<input type="text" name="season" value="夏"/><br/>
<input type="text" name="season" value="秋"/><br/>
<input type="text" name="season" value="冬"/><br/>
<br/><br/>
<input name="b2" type="button" onclick="all_input();" value="显示input内容"/>
<br/><br/>
<input name="b3" type="button" onclick="all_name_input();" value="显示season内容"/>
<p id="s"></p>
</body>

</html>
相关标签: document