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最开始是获取，上节讲述了第一个通用获取第几个节点的方法，这一节开始总结表单、下拉框、表格获取节点的方法

 

action	返回该表单的提交地址
elements	返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件。
length	返回表单内表单域的个数
method	返回表单内的method属性，主要有get和post两个值
target	确定提交表单时的结果窗口，主要有_self、_blank、_top等
reset()、submit()	重置表单和确定表单方法

.elements[index]	返回该表单中第index个表单控件
.elements[elementName]	返回表单内id或name为elementName的表单控件
.elementName	返回表单内id或name为elementName的表单控件

我们来看一个例子：

<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]获取返回值，获取第几个。

 

 二、列表框、下拉菜单

　　

form	返回列表框、下拉菜单所在的表单对象
length	返回列表框、下拉菜单的选项个数
options	返回列表框、下拉菜单里所有选项组成的数组
selectedIndex	返回下拉列表中选中选项的索引
type	返回下拉列表的类型，多选的话返回select-multiple，单选返回select-one

 

使用options[index]返回具体选项所对应的常用属性：

 

defaultSelected	返回该选项默认是否被选中
index	返回该选项在列表框、下拉菜单中的索引
selected	返回该选项是否被选中
text	返回该选项呈现的文本
value	返回该选项的value属性值

 

例子：

<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]下标

三、表格

caption	返回表格的标题对象
rows	返回该表格里的所有表格行(数组)

通过rows[index]返回表格指定的行所对应的属性：

cells

返回该表格行内所有的单元格组成的数组

通过cells[index]返回表格指定的列所对应的属性：

cellIndex

返回该单元格在表格行内的索引值　　　　　　　　　　　　　　　　　　　　　　　　　　　　 <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>