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

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

HTML DOM 简介:

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

什么是DOM:

1.整个文档是一个文档节点。
2.每个 HTML 元素是元素节点。
3.HTML 元素内的文本是文本节点。
4.每个 HTML 属性是属性节点。
5.注释是注释节点。
HTML开发与应用:准确快速定位获取元素方法HTML DOM。_第1张图片

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

因为节点有很明显,很清晰的分层关系,或者说是有很清晰的等级关系,如果标签1包含一个标签2和一个标签3,那么我们就称标签1是标签2和标签3的父标签。2标签和3标签是1标签的子标签。2便签是3标签的同胞标签。那么也就是说,如果我们获得一个标签的位置,那么我们就可以通过父子关系,同级关系,等关系来表示出个个标签的位置,以此来获得元素。
HTML开发与应用:准确快速定位获取元素方法HTML DOM。_第2张图片

标签如下:

innerHTML - 节点(元素)的文本值
parentNode - 节点(元素)的父节点
childNodes - 节点(元素)的子节点
attributes - 节点(元素)的属性节点
HTML开发与应用:准确快速定位获取元素方法HTML DOM。_第3张图片
HTML开发与应用:准确快速定位获取元素方法HTML DOM。_第4张图片

HTML DOM 对象 - 方法和属性:

HTML开发与应用:准确快速定位获取元素方法HTML DOM。_第5张图片
HTML开发与应用:准确快速定位获取元素方法HTML DOM。_第6张图片

我们来看一个例子:

这个例子是将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">密  码:td><td><input type="password" id="passwd" />td>
            tr>
            <tr>
                <td align="right">专  业:td><td><select id="profession"><option>——请选择——option><option>电子option><option>信息option>select>td>
            tr>
            <tr>
                <td align="right">性  别: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">兴  趣: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;iif(stuGender[i].checked){
                        gender=stuGender[i].value;
                        break;
                }
                }
            var stuHobby=document.getElementsByName("hobby");
            var hobby="";
            for(var i=0;iif(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;ifalse;

            }
            for(var i=0;ifalse;
            }

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



            for(var i = 0; ivar 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+"
"
; } } function dele(){ var div_result = document.getElementById("result"); div_result.innerHTML=""; registerStudent=new Array(); } script>

在这里,我们要实现的功能有:
1.基本表单的功能,包括单选多选,下拉框。
2.点击注册清空原有列表的内容。
3.点击显示按钮则可以查看之前所录入的讯息。
4.点击清空,可以将原有的信息清空。
在这里为了方便用户体验,我并没有用document.write,而是将那些信息放进了一个被右移动的div中。
HTML开发与应用:准确快速定位获取元素方法HTML DOM。_第7张图片

你可能感兴趣的:(HTML)