HTML开发与应用：准确快速定位获取元素方法HTML DOM。

最新推荐文章于 2022-09-16 22:41:41 发布

Love.Robin

最新推荐文章于 2022-09-16 22:41:41 发布

阅读量2.6k

点赞数 1

文章标签： HTML

本文链接：https://blog.csdn.net/qq_42802111/article/details/81461953

版权

HTML开发与应用：准确快速定位获取元素方法HTML DOM。

HTML DOM 简介：

根据ID查找元素：根据ID来获取一个元素，并且得到该元素对象
根据name属性查找元素：根据name属性来获取元素，得到符合条件的所有元素（数组）。
根据标签名查找元素：根据标签名来获取，并且得到符合标签名的所有元素（数组）。

什么是DOM：

1.整个文档是一个文档节点。
2.每个 HTML 元素是元素节点。
3.HTML 元素内的文本是文本节点。
4.每个 HTML 属性是属性节点。
5.注释是注释节点。
这里写图片描述

为什么节点方便用于地位获取元素？

因为节点有很明显，很清晰的分层关系，或者说是有很清晰的等级关系，如果标签1包含一个标签2和一个标签3，那么我们就称标签1是标签2和标签3的父标签。2标签和3标签是1标签的子标签。2便签是3标签的同胞标签。那么也就是说，如果我们获得一个标签的位置，那么我们就可以通过父子关系，同级关系，等关系来表示出个个标签的位置，以此来获得元素。
这里写图片描述

标签如下：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
这里写图片描述

HTML DOM 对象 - 方法和属性：

这里写图片描述

我们来看一个例子：

这个例子是将form表单实现对信息的登记，也就是将用户所填写的信息获取，在按某种方式罗列出来，这是一道对初学者来说相当综合的一道题。他这里面有对表单的考察，与应用。我们先来看看代码。

<body>
        <table border="1px" bordercolor="#0000ff" width="600px" height="400px" cellpadding="0px" cellspacing="0px" >
            <tr>
                <td align="right">用户名:</td><td><input type="text" name="" id="stuName" value="" /></td>
            </tr>
            <tr>
                <td align="right">密&nbsp;&nbsp;码:</td><td><input type="password" id="passwd" /></td>
            </tr>
            <tr>
                <td align="right">专&nbsp;&nbsp;业:</td><td><select id="profession"><option>——请选择——</option><option>电子</option><option>信息</option></select></td>
            </tr>
            <tr>
                <td align="right">性&nbsp;&nbsp;别:</td><td><input type="radio" name="gender" value="男" />男<input type="radio"name="gender" value="女" />女<input type="radio" name="gender" value="其他" />其他</td>
            </tr>
            <tr>
                <td align="right">兴&nbsp;&nbsp;趣:</td><td><input type="checkbox" name="hobby" id="" value="羽毛球" />羽毛球<input type="checkbox" name="hobby" id="" value="篮球" />篮球<input type="checkbox" name="hobby" id="" value="乒乓球" />乒乓球</td>
            </tr>
            <tr>
                <td><center><input type="submit" onclick="shouInput()" value="提交" /></center></td>
                <td><center> <button onclick="show()"  style="margin-right: 40px;">显示</button>
                    <input type="reset" onclick="dele()" value="清除" />
                </center>
                </td>
            </tr>
        </table>

        <div style="width: 800px; height: 400px; border: solid 1px; background-color: aliceblue; position: fixed; left: 100%; top: 0px; margin-left:-800px ;" id="result">



        </div>


    </body>
    <script type="text/javascript">

        /*定义一个全局变量*/
        var registerStudent = new Array();

        function shouInput(){
            var stuNameInput=document.getElementById("stuName").value;
            var passwdInput=document.getElementById("passwd").value;
            var stuProfession=document.getElementById("profession").value;
            var stuGender=document.getElementsByName("gender");
            var gender="";
                for(var i=0;i<stuGender.length;i++){
                    if(stuGender[i].checked){
                        gender=stuGender[i].value;
                        break;
                }
                }
            var stuHobby=document.getElementsByName("hobby");
            var hobby="";
            for(var i=0;i<stuHobby.length;i++){
                if(stuHobby[i].checked){
                    if(hobby!=""){
                    hobby=hobby+","+stuHobby[i].value;}
                    else{
                    hobby=stuHobby[i].value;}
                }
            }


            //将所输入的信息存储进object中。
            var student = new Object();
            student.name=stuNameInput;
            student.password= passwdInput;
            student.profession=stuProfession;
            student.gender = gender;
            student.hobby = hobby;

            registerStudent.push(student);
            //清空text表单。
            document.getElementById("stuName").value="";
            document.getElementById("passwd").value="";
            document.getElementById("profession").value="";
            //清空多选与单选。
            for(var i=0;i<stuGender.length;i++){
                stuGender[i].checked=false;

            }
            for(var i=0;i<stuHobby.length;i++){
                stuHobby[i].checked=false;
            }

        }
        function show(){
            var div_result = document.getElementById("result");



            for(var i = 0; i<registerStudent.length;i++){
                var name = registerStudent[i].name;
                var password = registerStudent[i].password;
                var profession = registerStudent[i].profession;
                var gender=registerStudent[i].gender;
                var hobby=registerStudent[i].hobby;

                div_result.innerHTML += "1.姓名:"+name+" 2.密码:"+password+" 3.专业:"+profession+"4.性别"+gender+"5.爱好"+hobby+"<br />";
            }
        }
        function dele(){
            var div_result = document.getElementById("result");

            div_result.innerHTML="";
            registerStudent=new Array();
        }
    </script>

在这里，我们要实现的功能有：
1.基本表单的功能，包括单选多选，下拉框。
2.点击注册清空原有列表的内容。
3.点击显示按钮则可以查看之前所录入的讯息。
4.点击清空，可以将原有的信息清空。
在这里为了方便用户体验，我并没有用document.write,而是将那些信息放进了一个被右移动的div中。
这里写图片描述

Love.Robin

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML开发与应用：准确快速定位获取元素方法HTML DOM。

HTML开发与应用：准确快速定位获取元素方法HTML DOM。HTML DOM 简介：根据ID查找元素：根据ID来获取一个元素，并且得到该元素对象根据name属性查找元素：根据name属性来获取元素，得到符合条件的所有元素（数组）。根据标签名查找元素：根据标签名来获取，并且得到符合标签名的所有元素（数组）。什么是DOM：1.整个文档是一个文档节点。 2.每个 HTML ...
复制链接

扫一扫