document和innerText、innerHTML区别
来源:互联网 发布:vb keycode用法 编辑:程序博客网 时间:2024/05/18 22:11
document和innerText、innerHTML区别
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>
(转载本站文章请注明作者和出处 Coder的不平凡 ,请勿用于任何商业用途)
- document和innerText、innerHTML区别
- innerText和innerHtml区别
- innerText和innerHTML区别
- innerText和innerHTML区别
- innerText和innerHTML区别
- innerHTML 和 innerText区别
- innerText和innerHTML区别
- innerText和innerHTML区别
- innerText 和 innerHTML区别
- innerText和innerHTML区别
- innerText和innerHTML区别
- innerHTML和innerText区别
- innerHTML和innerText区别
- 区别:innerHTML---innerText---createTextNode--document.write
- innerText和innerHTML的区别
- innerText和innerHTML的区别
- innertext和innerhtml的区别
- innerText和innerHtml的区别
- codeup100000578.日期差值
- 常见Win7优化误区,教你正确方法!
- Spring RestTemplate 实践
- JAVA利用递归算法求自然数的阶乘。
- CocoaPods安装和使用及问题:Setting up CocoaPods master repo
- document和innerText、innerHTML区别
- Android源码编译---Nexus 设备出厂镜像
- [HihoCoder]#1359 : 震荡数组
- The new starting....
- javah提示:找不到 ‘XX.XXXX.XX.CLASSNAME’ 的类文件
- 第一次执行Cordova build android失败原因一则
- 极光推送(JPush)-认识提升
- 每日一linux命令(54)-------wc命令
- Spring Cloud 统一配置