javascript学习笔记之document和innerHTML、innerText

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" onblur="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" onblur="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" onclick="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" onblur="show();">
					</td>
					<td>
						example:<input type="text" id="example">
					</td>
				</tr>
			</table>
		</form>
	</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>
时间: 2025-01-06 09:56:35

javascript学习笔记之document和innerHTML、innerText的相关文章

javascript学习笔记——如何修改&lt;a href=&quot;#&quot;&gt;url name&lt;/a&gt;

0.前言 使用了一段时间javascript,再花了点时间学习了jquery,但是总是感觉自己很"迷糊",例如<a href="#">url name</a>中,如果修改href中的"#"应如何编写代码,如果修改url name应如何编写代码.再加上javascript和jquery操作方法略有不同,所以我就更"迷糊"了. [说明] 曾经使用关键词--"innerHTML和value区别&qu

JavaScript学习笔记——js变量的布尔值

typeof(1): numbertypeof(NaN): numbertypeof(Number.MIN_VALUE): numbertypeof(Infinity): numbertypeof("123"): stringtypeof(true): booleantypeof(window): objecttypeof(Array()): objecttypeof(function(){}): functiontypeof(document): objecttypeof(null)

Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)

计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript学习笔记(3--this/call/apply) Java程序猿的JavaScript学习笔记(4--this/闭包/getter/setter) Java程序猿的JavaScript学习笔记(5--prototype) Java程序猿的JavaScript学习笔记(6--面向对象模拟) Java程

javascript学习笔记------概念相关

javascript中的函数.对象 1. 在javascript中,函数是被当成一种数据类型,它可以被存储在一个变量.数组.对象中,可以被当作参数传递到另一个函数中. 函数就像是字符串和数字这样的的数据类型,它可以是其它对象的一个属性 2. 函数定义的三种方式: function square(x) {   return x*x;   }    //function 语句 var square = function(x) { return x*x;}  //函数直接量  function lit

Javascript 学习笔记 2: 标识语句

可以在任何语句声明之前使用唯一标识(identifier)和冒号(:)用来标记该语句: identifier: statement 这样,你可以在程序的任何其他地方通过标识来使用这个语句.即使在语句内部也可以使用该语句的标识(例如:循环语句和条件语句).当在一个循环语句前添加一个标识,你可以在语句内部通过break 标识来退出当前循环,也可以通过continue标识来继续执行该语句.例如: mainloop: while(token != null) { // Code omitted... c

javascript学习笔记---ECMAScript-判断变量类型

判断类型之前,先要清楚有哪些类型. (理理思路:程序由数据和方法构成,数据由简单数据和复杂数据构成) 即类型有: 数据(简单数据:boolean,string,num,undefined,null.复杂数据:object), 方法(function) 万能的typeof,神一样的方法 typeof(1);// num typeof("hello");// string   typeof(false);// boolean var vFlag; typeof(vFlag);// unde

javascript学习笔记---ECMAScript语法(引用类型)

引用类型通常叫做类(class). 本教程会讨论大量的 ECMAScript 预定义引用类型. 引用类型 引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象. 本教程会讨论大量的 ECMAScript 预定义引用类型. 从现在起,将重点讨论与已经讨论过的原始类型紧密相关的引用类型. 注意:从传统意义上来说,ECMAScript 并不真正具有类.事实上,除了说明不存在类,在 ECMA-262 中根本没有出现"类"这个词.ECMAScript 定义了"对象定

javascript学习笔记---ECMAScriptECMAScript 对象----定义类或对象

使用预定义对象只是面向对象语言的能力的一部分,它真正强大之处在于能够创建自己专用的类和对象. ECMAScript 拥有很多创建对象或类的方法. 原始的方式 因为对象的属性可以在对象创建后动态定义(后绑定),类似下面的代码: var oCar = new Object; oCar.color = "blue"; oCar.doors = 4; oCar.mpg = 25; oCar.showColor = function() { alert(this.color); };不过这里有一

javascript学习笔记---ECMAScriptECMAScript 对象----修改对象

通过使用 ECMAScript,不仅可以创建对象,还可以修改已有对象的行为. prototype 属性不仅可以定义构造函数的属性和方法,还可以为本地对象添加属性和方法. 创建新方法 通过已有的方法创建新方法Number.prototype.toHexString = function() { return this.toString(16); }; 在此环境中,关键字 this 指向 Number 的实例,因此可完全访问 Number 的所有方法.有了这段代码,可实现下面的操作: var iNu