dom对html元素访问 *** 作2

一、getElementByID()方法来查找具有唯一ID属性值的元素。

例如

function showContent(){

var mydiv,txtname,content;

with(document){

mydiv=getElementByID("mydiv");

txtname=getElementByID("txtname");

content=getElementByID("content");

}

alert(mydiv.INNERHTML+"\n"+txtname.value+"\n"+content.value);

}

二、getElementsByTagname

返回当前节点的具有指定标签名的所有子节点

例如：

function showCount(){

alert(document.getElementsByTagname("li").length);

}

查询所有li的长度

三、getElementsByClassname

查询class的名称

var arr=["-670px","-520px","-370px","-210px","-63px"];
function dianji(obj){
    var gunlun1=document.getElementByID("gunlun1");
    var num=obj.getAttribute("num");
    var kefu3=document.getElementsByClassname("kefu3")//查询kefu3名称的class数组
    for(var i=0;i<kefu3.length;i++){
        kefu3[i].style.color="#212020";
    }
    kefu3[num].style.color="#0390cc";
    gunlun1.style.left=arr[num];
    gunlun1.style.Transition="left 0.5s";
}

接上节所讲，dom最开始是获取，上节讲述了第一个通用获取第几个节点的方法，这一节开始总结表单、下拉框、表格获取节点的方法

我们来看一个例子：

<form ID="myform" action="https://www.baIDu.com/" method="get" target="_blank">    <input name="username" type="text" value="张三"><br>    <input name="password" type="text" value="123"><br>    <select name="city">        <option value="shanghai">上海</option>        <option value="beijing" selected>北京</option>    </select><br>    <input type="button" value="获取表单内第一个控件" onClick="get(formm.elements[0])">    <!--获取第index个的值-->    <input type="button" value="获取表单内第二个控件" onClick="get(formm.elements[‘password‘])">    <!--获取ID或name的值-->    <input type="button" value="获取表单内第三个控件" onClick="get(formm.city)">    <!--之前调取值-->    <input type="button" value=" *** 作表单" onClick="oper()">    <input type="button" value="提交" onClick="oper()"></form></body><script type="text/JavaScript">    //获取表单元素    var formm=document.getElementByID("myform");    //获取元素节点中的value属性节点    function get(node){        alert(node.value);//node.value=formm.elements【0】    }    function oper(){        formm.reset();    }    function oper(){        formm.submit();    }

第一步：这上面就是用ID获取到form的唯一名称，来获取表单元素

第二步：用函数定义方法传参来定义每一个form节点下的value值，

利用鼠标事件onclink调取形参与函数联合，并利用.elements[index]获取返回值，获取第几个。

 二、列表框、下拉菜单

例子：

<select name="city" ID="city" size="5">    <option value="beijing">北京</option>    <option value="shanghai" selected>上海</option><!--默认选中-->    <option value="tianjin">天津</option>    <option value="nabjing">南京</option>    <option value="shenzhen">深圳</option>    <option value="wuhan">武汉</option></select><br><input type="button" value="第一个城市" onClick="get(city.firstChild.prevIoUsSibling)"><input type="button" value="上一个城市" onClick="get(city.options[city.selectedindex-1])"><!--整体中被选中的下拉菜单中的值--><input type="button" value="下一个城市" onClick="get(city.options[city.selectedindex+1])"><input type="button" value="最后一个城市" onClick="get(city.options[city.length-1])"><!--数组从零开始-1--></body><script type="text/JavaScript">    /*获取ID为city的下拉菜单元素对象*/    var city=document.getElementByID("city");    /*写方法获取元素的text值*/    function get(node){        alert(node.text);    }            </script>

第一步：利用ID获取city值

第二步：函数传值获取text值来，获取options[index]下标

三、表格

<table ID="mytable" border="1">    <caption>甲骨文课程表</caption>    <tr>        <td>HTML</td>        <td>JavaScript</td>    </tr>    <tr>        <td>javaSE</td>        <td>Oracle</td>    </tr>    <tr>        <td>MysqL</td>        <td>Struts2</td>    </tr></table><input type="button" value="表格标题" onClick="get(table1.caption)"><input type="button" value="第一行、第一格" onClick="get(table1.rows[0].cells[0])"><input type="button" value="第二行、第二格" onClick="get(table1.rows[1].cells[1])"><input type="button" value="第三行、第二格" onClick="get(table1.rows[2].cells[1])"><br>设置指定单元格的值：第<input type="text" ID="row" size="2">行，第<input type="text" ID="cell" size="2">列的值为<input type="text" ID="course" size="10"><input type="button" ID="btn_set" value="修改" onClick="updateCell()"></body><script type="text/JavaScript">    //获取表格元素    var table1=document.getElementByID("mytable");    //写一个方法获取任意元素中的文本属性        function get(node){        alert(node.INNERHTML);    }    function updateCell(){            //1、先获取value值        //获取用户修改第几行        var row=document.getElementByID("row").value;        //获取用户修改第几列        var cell=document.getElementByID("cell").value;            //获取用户修改的课程        var course=document.getElementByID("course").value;        //修改 数组必须-1        table1.rows[row-1].cells[cell-1].INNERHTML=course;    }    </script>

以上是内存溢出为你收集整理的dom对html元素访问 *** 作2全部内容，希望文章能够帮你解决dom对html元素访问 *** 作2所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。