DOM编程学习（1）访问HTML元素

最新推荐文章于 2021-11-05 21:44:54 发布

eabozp

最新推荐文章于 2021-11-05 21:44:54 发布

阅读量177

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_39528472/article/details/90213000

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.使用id访问HTML元素

document.getElementById(idVal):返回id为idVal的HTML元素。


<body>
	<div id="a">疯狂</div>
	<textarea id="b" rows="3" cols="25">
			轻量</textarea>
	<input type="button" value="访问" onclick="accessById();"/>
        <script type="text/javascript">
		var accessById = function(){		   
            alert(document.getElementById("a").innerHTML+"\n"+
            document.getElementById("b").value);
		}
	</script>
</body>

2.使用CSS选择器访问HTML元素

1.Element querySelector(selectos):返回第一个符合选择器参数的HTML元素。

<body>
    <div id="a">fffffffffffffff</div>
    <textarea id="b" rows="3" cols="25">aaaaaaaaaaaaaaaaaaaaaaa</textarea>
    <input type="button" value="访问两个元素" onclick="accessById();"/>
    <script type="text/javascript">
    var accessById = function(){
        alert(document.querySelector("#a").innerHTML+"\n"+
        document.querySelector("#b").value);}
    </script>
</body>

2.NodeList querySelsctorAll(selectors):返回所有符合css选择器的HTML元素。

var divList = document.querySelectorAll("div");

3.利用节点关系访问HTML元素

parentNode:返回当前节点的父节点
perviousSibling:返回当前节点的前一个兄弟节点
nextSibling:返回当前节点的兄弟节点
childNodes:返回当前节点的所有子节点
getElementsByTagName(tagName):返回当前节点具有指定标签名的所有字节点
firstChild:返回当前节点的第一个子节点
lastChild:返回当前节点的最后一个子节点

注：对于HTML来说，浏览器会将元素中的空白也当成节点，但早期的IE浏览器不会将空白当成子元素

4.访问表单控件

对于表单的访问除了之气的属性，还有如下的基本属性：

action：用于指定表单的提交地址
element：返回表单内部全部表单控件组成的数组。使用该数组可以访问表单内的任何表单控件
length：指出表单内表单域的个数
method：有GET和POST两种属性，默认使用method属性
target：确定提交表单时的结果窗口
reset()：重设表单，表单数据设置为初始值
submit()：提交表单

<body>
	<form id="d" action="" method="get">
		<input name="user" type="text" /><br/>
		<input name="pass" type="text" /><br/>
		<select name="color">
			<option value="red">红色</option>
			<option value="blue">蓝色</option>
		</select><br/>
		<input type="button" value="第一个" onclick=
		    "alert(document.getElementById('d').elements[0].value);"/>
		<input type="button" value="第二个" onclick=
		    "alert(document.getElementById('d').elements['pass'].value);"/>
		<input type="button" value="第三个" onclick=
			"alert(document.getElementById('d').color.value);"/>
			
	</form>
</body>

代码效果：

5.访问列表框、下拉菜单的选项

form：返回列表框、下拉菜单所在的表单对象

length：返回选项个数

options：返回所有选项组成的数组

selectedIndex：返回被选中选项的索引，如果有多个被选中，只返回第一个

type：返回是否允许多选

options的具体语法格式如下：

select.option[]：返回第x+1个选项

form：返回包含该选项所处多的表单对象

defaulSelected：返回是否默认选中

index：返还索引

selected：返回是否被选中

text：返回选项的文本

value：返回选项的value值

<body>
	<select id="mySelect" name="mySelect" size="6">
		<option value="java">j</option>
		<option value="ssh">s</option>
		<option value="ajax">a</option>
		<option value="xml">x</option>
		<option value="ejb">e</option>
		<option value="android">an</option>
	</select><br/>
	<input type="button" value="第一个" onclick="change(curTarget.options[0]);"/>
	<input type="button" value="上一个"  
       onclick="change(curTarget.options[curTarget.selectedIndex-1]);"/>
    <input type="button" value="下一个" 
       onclick="change(curTarget.options[curTarget.selectedIndex+1]);"/>
	<input type="button" value="最后一个" 
       onclick="change(curTarget.options[curTarget.length-1]);"/>
	<script type="text/javascript">
			var curTarget=document.getElementById("mySelect");
			var change=function(target){
				alert(target.text);
		    }
	</script>
</body>

6.访问表格子元素

caption：返回表格标题

rows：返回所有行

tBodies：返回所有<tbody.../>元素组成的数组

tFoot：返回<tfoot.../>元素

tHead：返回<thead.../>元素

rows的其他属性：

table.rows[]：返回x+1行的表格行

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

rowIndex：返回表格行在表格内的索引

sectionRowIndex：返回表格行在其所在元素的索引

cellIndex：返回单元格在表格行内的索引

<body>
		<table id="d" border="1">
			<caption>aaaaaaa</caption>
			<tr>
				<td>fengkuangsssssssss</td>
				<td>fengkuangdd</td>
			</tr>
			<tr>
				<td>fengkuang</td>
				<td>fengkuangddddddd</td>
			</tr>
			<tr>
				<td>fengxml</td>
				<td>bbbbbbbbbbbb</td>
			</tr>
		</table>
		<input type="button" value="表格标题" 
              onclick="alert(document.getElementById('d').caption.innerHTML);"/>
		<input type="button" value="第一行，第一格" 
              onclick="alert(document.getElementById('d').rows[0].cells[0].innerHTML);"/>
		<input type="button" value="第二行，第二格" 
              onclick="alert(document.getElementById('d').rows[1].cells[1].innerHTML);"/>
		<input type="button" value="第三行，第二格" 
              onclick="alert(document.getElementById('d').rows[2].cells[1].innerHTML);"/>
</body>

eabozp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM编程学习（1）访问HTML元素

1.使用id访问HTML元素 document.getElementById(idVal):返回id为idVal的HTML元素。<body> <div id="a">疯狂</div> <textarea id="b" rows="3" cols="25"> 轻量</textarea> <input ty...
复制链接

扫一扫

专栏目录