javascript学习笔记之document和innerHTML、innerText
2015-04-25 10:24
393 查看
Javascript中我们最常用的对象就是document对象
Document对象:每个载入浏览器的html文档都会成为document对象。我们可以利用document对象访问HTML中的元素。
document.getElementById()
通过id来获取相应的值
1.文本框
如果想获得下拉列表框的值
2.下拉选择框
二、document.getElementsByName
这个方法和getElementById大致差不多,只是getelementById返回的是一个对象,而getElementsByName返回的是一个List,此方法多用在name相同的文本框或checkbox中(checkbox见上一篇文章列表全选功能)
三、document.getElementByTagName
getElementsByTagName拿到的是一个指定标签下的一个集合,不会因为标签放置的位置而不会计入集合范围内(例如再写一个form表单,里面也有input标签所代表的元素,它还是会计入elements这个集合中的,它可以通过getElementsByTagName找到的)
以上三种方法结合使用是我们网页制作比较常见的步骤,所以要理解以上的相关知识
四、另外document还有一些方法和对象集合
document.write:向文档写HTML表达式或Javascript代码
有时候我们动态创建html标签的时候就会用到document.write()方法
document.forms[]:返回对文档中所有form引用,如我们想获得一个form里面文本框的值,我们可以这样:
五、关于innerText与innerHTML
innerText和innerHTML都可以给标签体里添加相应信息,如我们定义一个<span id="feedback"></span>,我们返回的信息就可以通过动态加载来放在这个<span>里面,这里我们就可以用到innerText或innerHTML。今天在做项目的时候,发现一个问题,就是火狐浏览器不支持innerText属性,解决方法就是把innerText换成innerHTML就可以了
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>
相关文章推荐
- JavaScript 学习笔记(二)setTimeout、setInterval、innerHTML、innerText、outerHTML
- JavaScript 学习笔记(一)prompt、parseInt、document.write、switch(a) {case **:……}、new Date()、getFullYear()
- JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作
- javascript学习笔记之document对象、表单及表单元素、脚本化cookie
- Javascript学习笔记(document节点)
- javascript初学者笔记——关于innerHTML、innerText、outerHTML和outerText的区别
- javascript学习笔记1-document.write
- javascript学习笔记之document.compatMode
- JavaScript权威设计--JavaScript脚本化文档Document与CSS(简要学习笔记十五)
- 学习笔记:javascript 文档对象(document)
- JavaScript 学习笔记(八).innerHTML、onblur="……"、密码强度
- 韩顺平 javascript教学视频_学习笔记28_dom对象(document对象) 最重要的
- 韩顺平 javascript教学视频_学习笔记29_dom编程加强_dom对象(document2) 加强重要
- JavaScript学习笔记 4 Image Swapping(图片交换)
- JavaScript学习笔记
- Javascript教程,javascript入门,学习笔记,Javascript Tutorials
- JavaScript DOM编程 学习笔记-插入节点
- javascript学习笔记(三)BOM和DOM详解
- Javascript模块化开发学习笔记
- javascript学习笔记(三) String 字符串类型介绍