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的不平凡 ,请勿用于任何商业用途)