JavaScript学习笔记之document和innerText、innerHTML

最新推荐文章于 2024-04-22 08:33:24 发布

寻找现实扭曲力场

最新推荐文章于 2024-04-22 08:33:24 发布

阅读量1.5w

点赞数 2

分类专栏： javascript 文章标签： javascript dom 浏览器标签 html

本文链接：https://blog.csdn.net/pearyangyang/article/details/39325333

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Javascript中我们最常用的对象就是document对象

感谢前段那些事儿丰富了这篇文章~~~

Document对象：

每个载入浏览器的html文档都会成为document对象。我们可以利用document对象访问HTML中的元素。

一、document.getElementById()

通过id来获取相应的值

1.文本框

<html>
	<head>
		<script type="text/javascript">
			function show(){
				//document.getElementById("example")拿到文本框对象
				var txt = document.getElementById("example");
				alert(txt.value);
			}
		</script>
	</head>
	<body>
		<!--onblur事件是对象失去焦点时发生-->
		example:<input type="text" id="example" οnblur="show();">
	</body>
</html>

如果想获得下拉列表框的值

2.下拉选择框

<html>
	<head>
		<script type="text/javascript">
			function show(){
				var sortName = document.getElementById("sort");
				//关键还是下面这句
				sortValue = sortName.options[sortName.selectedIndex].value;
				alert(sortValue);
			}
		</script>
	</head>
	<body>
		<select name="sort" id="sort" οnblur="show();">
			<option name="stuNum">studentNumber</option>
			<option name="class">classes</option>
			<option name="grade">grades</option>
		</select>
	</body>
</html>

二、document.getElementsByName

这个方法和getElementById大致差不多，只是getelementById返回的是一个对象，而getElementsByName返回的是一个List，此方法多用在name相同的文本框或checkbox中（checkbox见上一篇文章列表全选功能）

<html>
	<head>
		<script type="text/javascript">
			window.onload = function(){
				var names = document.getElementsByName("username");
				for(var i=0;i<names.length;i++){
					alert(names[i].value);
				}
			}
		</script>
	</head>
	<body>
		name1:<input type="text" name="username" value="name1">
		name2:<input type="text" name="username" value="name2">
		name3:<input type="text" name="username" value="name3">
	</body>
</html>

三、document.getElementByTagName

getElementsByTagName拿到的是一个指定标签下的一个集合，不会因为标签放置的位置而不会计入集合范围内（例如再写一个form表单，里面也有input标签所代表的元素，它还是会计入elements这个集合中的，它可以通过getElementsByTagName找到的）

<html>
	<head>
		<script type="text/javascript">
			function getElements(){
				var elements = document.getElementsByTagName("input");
				alert(elements.length);
			}
		</script>
	</head>
	<body>
		<input name="name" type="text" value="name1">
		<input name="name" type="text" value="name2">
		<input name="name" type="text" value="name3">
		<input type="button" οnclick="getElements();" value="click">
	</body>
</html>

以上三种方法结合使用是我们网页制作比较常见的步骤，所以要理解以上的相关知识

四、另外document还有一些方法和对象集合

document.write：向文档写HTML表达式或Javascript代码

有时候我们动态创建html标签的时候就会用到document.write()方法

document.forms[]：返回对文档中所有form引用，如我们想获得一个form里面文本框的值，我们可以这样：

<html>
	<head>
		<script type="text/javascript">
			function show(){
				var f = document.forms[0];
				alert(f.username.value);
			}
		</script>
	</head>
	<body>
		<form name="form2">
			<table>
				<tr>
					<td>
						username:<input type="text" name="username" οnblur="show();">
					</td>
					<td>
						example:<input type="text" id="example">
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

document.all对整个HTML文档的元素进行访问。我们可以通过特定的数字来对元素进行访问。

<html>
	<head>
		<script type="text/javascript">
			function show(){
				var alllength = document.all.length;
				var txt = document.all[7];
				alert('txtValue='+txt.value+'&&alllength='+alllength);
			}
		</script>
	</head>
	<body>
		<div name="username">Yang</div>
		<div name="age">17</div><br/>
		<input type="text" name="address" value="address">
		<div>
			<input type="submit" value="submit" οnclick="show();">
		</div>
	</body>
	<!--也可以输出每个元素-->
	<script type="text/javascript">
		var tagLength = document.all.length;
		for(var i=0;i<tagLength;i++){
			document.write("tagName["+i+"]"+document.all[i].tagName+"<br />");
		}
	</script>
</html>

这里我们已经知道了我们想要获取的文本框所处于的标志是7（从0开始数，<br />标签也算哦~~~ ），就可以通过这种方式拿值了。

我们可以按照相应的name属性和id来取值

<html>
	<head></head>
	<body>
		<input name="aaa" value="aaa">
		<input id="bbb" value="bbb">
		<script type="text/javascript">
			alert(document.all.aaa.value);   //根据name="aaa"来取值
			alert(document.all.bbb.value);   //根据id="bbb"来取值
		</script>
	</body>
</html>

当然很多时候我们会出现很多名字相同的标签栏，如checkbox（有时候全选操作就必须它们name一样才好一次性获取点击事件），这样我们通过下标值来获取。

<pre name="code" class="html"><html>
	<head></head>
	<body>
		<input name="aaa" value="a1">
		<input name="aaa" value="a2">
		<input id="bbb" value="b1">
		<input id="bbb" value="b2">
		<script type="text/javascript">
			alert(document.all.aaa[0].value);   //根据name="aaa"来取值
			alert(document.all.aaa[1].value);
			//根据id来取值
			//alert(document.all.bbb[0].value); 
			//alert(document.all.bbb[1].value);
			//和上面效果类似
			alert(document.all('bbb',0).value);
			alert(document.all('bbb',1).value);
		</script>
	</body>
</html>

五、关于innerText与innerHTML

innerText和innerHTML都可以给标签体里添加相应信息，如我们定义一个<span id="feedback"></span>，我们返回的信息就可以通过动态加载来放在这个<span>里面，这里我们就可以用到innerText或innerHTML。今天在做项目的时候，发现一个问题，就是火狐浏览器不支持innerText属性，解决方法就是把innerText换成innerHTML就可以了

<html>
	<head>
		<script type="text/javascript">
			window.onload = function(){
				/*document.getElementById("top").innerText = 'top message';*/
				document.getElementById("top").innerHTML = 'top message';
			}
		</script>
	</head>
	<body>
		<div id="top"></div>
	</body>
</html>

（转载本站文章请注明作者和出处 Coder的不平凡 ，请勿用于任何商业用途）

寻找现实扭曲力场

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
JavaScript学习笔记之document和innerText、innerHTML

Javascript中我们最常用的对象就是document对象Document对象：每个载入浏览器的html文档都会成为document对象。我们可以利用document对象访问HTML中的元素。一、document.getElementById()通过id来获取相应的值
复制链接

扫一扫