【前端】JavaScript之DOM简介

最新推荐文章于 2022-07-31 05:00:00 发布

*韬韬*

最新推荐文章于 2022-07-31 05:00:00 发布

阅读量226

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq2263796380/article/details/89635196

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

DOM文档对象模型

DOM文档对象模型是基于HTML树的api，这里可以把HTML结构看成是一颗树形结构，使用DOM可以操作树中的节点，即操作（增删改查）HTML标签。
DOM树形结构

getElementById

getElementById根据html标签的id来获取标签对象：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementById</title>
</head>
<body>
    <form name="baseInfo" action="#" method="post">
        姓名：<input type="text"   id="name">
        <br>
        密码：<input type="password"  id="pwd" >
        <br>
        <input type="button" id="btn" name="submit" value="提交" />
    </form>
</body>
<script type="text/javascript">
    var username = document.getElementById("name");
    var pwd = document.getElementById("pwd");

    var btn = document.getElementById("btn");

    btn.onclick = function(){
        alert(username.value);
        alert(pwd.value);
    };
</script>
</html>

getElementsByName

getElementsByName根据html标签的name来获取一个数组对象，在html标签中name值是可以重复的，所以该方法会返回一个数组对象：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementsByName</title>
</head>
<body>
    <form name="baseInfo" action="#" method="post">
        input：<input type="text" value="value1"  name="monkey">
        <br>
        input：<input type="text" value="value2"  name="monkey">
        <br>
        input：<input type="text" value="value3" name="monkey">
        <br>
        <input type="button" id="btn" name="submit" value="提交" />
    </form>
</body>
<script type="text/javascript">
    var arr = document.getElementsByName("monkey");
    //alert(arr.length);
    /*
    for(index in arr){
        if(!arr.hasOwnProperty(index)){
            continue;
        }

        alert(arr[index].value);
    }
    */
    for(var i=0; i<arr.length; i++){
        alert(arr[i].value);
    }
</script>
</html>

getElementsByTagName

getElementsByTagName根据标签的名字来获取数组对象：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementsByTagName</title>
</head>
<body>
    <form name="baseInfo" action="#" method="post">
        input：<input type="text" value="value1" name="name">
        <br>
        input：<input type="text"  value="value2" name="name">
        <br>
        input：<input type="text"  value="value3"  name="name">
        <br>

       <select name="hobby" id="hobby">
             <option value="basketball">篮球</option>
          <option value="football">足球</option>
          <option value="volleyball">排球</option>
       </select>
       <br>
       <select name="star" id="star" >
             <option value="cl">成龙</option>
          <option value="llj">李连杰</option>
          <option value="zzd">甄子丹</option>
          <option value="wj">吴京</option>
       </select>

       <br>
       <input type="button" id="btn" name="submit" value="提交" />
    </form>
</body>
<script type="text/javascript">
    /*
    //获取所有的input元素
    var inputArr = document.getElementsByTagName("input");
    alert(inputArr.length);

    //输出input中type="text"中的 value属性值
    for(var i=0; i<inputArr.length; i++){
        if("text" == inputArr[i].type){
            alert(inputArr[i].value);
        }

    }
    //输出所有option标签中value的值
    var optionArr = document.getElementsByTagName("option");
    for(var i=0; i<optionArr.length; i++){
        alert(optionArr[i].value);
    }
    //输出所有下拉框 id="star"中option标签中 value属性的值
    var star = document.getElementById("star");
    var optionArr = star.getElementsByTagName("option");
    for(var i=0; i<optionArr.length; i++){
        alert(optionArr[i].value);
    }
    */





    //输出下拉框中被选中的value值
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        var optionArr = document.getElementsByTagName("option");
        for(var i=0; i<optionArr.length; i++){
            if(optionArr[i].selected){
                alert(optionArr[i].value);    
            }

        }
    };


</script>
</html>

DOM理解

DOM就像是JavaScript的方法，每个方法有不同的功能。

*韬韬*

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
10
评论
【前端】JavaScript之DOM简介

DOM文档对象模型DOM文档对象模型是基于HTML树的api，这里可以把HTML结构看成是一颗树形结构，使用DOM可以操作树中的节点，即操作（增删改查）HTML标签。getElementByIdgetElementById根据html标签的id来获取标签对象：<!DOCTYPE html><html><head><meta char...
复制链接

扫一扫