Html常见用的几个小方法

1、文本框autocomplete属性的使用
正文：
大家可能经常有这样的体验，当你在某个文本框里双击或输入某值时，文本框下面有时会出现一个下拉框，内容为你以前输入过的一些数据。这就是html的autocomplete功能。
我们可以自行控制某个文本框的autocomplete功能，例如：

<input type="text" name="firstname" value="" size="5" maxlength="30" autocomplete="off">
这样就关闭了此文档框的自动完成功能，autocomplete功能默认是打开的。

autocomplete功能需要firefox 3.5或ie8以上才有效果。

2、HTML文本框的基本用法
正文：
看下面的例子：
<form>
姓名：<input type="text" name="firstname" value="">
</form>
当input标记的type属性为text时，表示文本框，name是其名字，当此表单向服务器提交时，服务器将根据name来获取value值。
当type为text时，我们还可以使用其他一些属性来对文本框进行调整，例如：

<input type="text" name="firstname" value="" size="5" maxlength="30">
size定义输入字段的宽度，maxlength规定输入字段中的字符的最大长度，这个长度是不区分中英文的。
另外，还可以将文本框设为只读，这是通过readonly="readonly"来实现的。


3、快速将焦点转移到下一个控件
正文：
在桌面应用中，特别是银行或POS系统中，常见到营业员快速按回车即可移动到下一个控件，接着输入数据，基本不用鼠标，增大了系统的易用性。在bs系统中，我们也能很方便地实现这种效果。
看下面的代码：

<input type="text" name="t1" οnkeydοwn="if(event.keyCode==13)event.keyCode=9"  />
<input type="text" name="t2"  />
当你在t1文本框里输入完数据后，直接按回车，会自动跳到t2文本框里。这是通过onkeydown事件实现的，onkeydown事件是当按下一个键时触发。里面的代码意思是：如果按下的键码是13，那么就将建码改为9。13是回车键，而9是Tab键。实际上是通过Tab键来实现光标转移的。


4、让文本框内容居右
正文：
在一些常见的桌面应用程序中，经常会看到输入框的内容是居右的，特别是一些数值类型的输入框，那么在网页上能不能实现这种效果呢？
其实，网页实现这种效果异常简单，直接用css定义即可。如下：

<input name="money" value="389.86" style="text-align:right">
即实现了居右，同理，也可通过center和left实现居中、居左。
早就该想到用这个，只是一直以来都是用css控制div啊，span啊，table啊等等，从思想上觉得文本框不是同一类的东西，这才没有马上想到这种方法。


5、动态改变文本域的行数和列数
正文：
有时候，为了页面排版的需要，不能将文本域做的很长很宽，但当用户输入很多内容时，如果文本框太小会很不方便，这时我们可以动态改变它的大小。实现方法很简单，就是重新设置文本域的cols和rows的值。
代码如下：

<textarea rows="10" cols="30" οndblclick="this.cols=50;this.rows=20">文本域里的内容</textarea>
当用户双击文本域时，会执行ondblclick里的代码，代码重新设置了文本域的cols和rows的值。


6、使用parentNode、firstChild以及lastChild访问节点
简介：介绍如何使用parentNode、firstChild以及lastChild访问节点
正文：
请看下面这个 HTML 片段：
<table>
  <tr id='t'>
    <td>John</td>
    <td>Doe</td>
    <td>Alaska</td>
  </tr>
</table>
在上面的HTML代码中，第一个 <td> 是 <tr> 元素的首个子元素（firstChild），而最后一个 <td> 是 <tr>元素的最后一个子元素（lastChild）。
此外，<tr> 是每个 <td>元 素的父节点（parentNode）。

<script type="text/javascript">
var tr=document.getElementById("t");//获取tr节点
alert(tr.firstChild.nodeName);//获取第一个节点的nodeName
alert(tr.lastChild.nodeName); //获取最后一个节点的nodeName
</script>
parentNode 属性常被用来改变文档的结构。假设您希望从文档中删除带有 id 为 "maindiv" 的节点：

var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
首先，您需要找到带有指定 id 的节点，然后移至其父节点并执行 removeChild() 方法。
背景知识：
节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
nodeName

nodeName 属性含有某个节点的名称。
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的
nodeValue


对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是：
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9


7、通过getElementsByTagName获取指定的元素
正文：
getElementsByTagName() 方法会使用指定的标签名返回所有的元素（作为一个节点列表）
getElementsByTagName() 语法是document.getElementsByTagName("标签名称");

看代码：
<form id="f1" name="formhello">
姓名：<input type="text" name="firstname" id="fn" value="texthello">
地址：<input type="text" name="address" id="address" value="北京">
</form>
 
<script type="text/javascript">
var inputCollect=document.getElementsByTagName("input");//通过input返回一个包含指定元素的对象，这个对象有length属性
for(var i=0;i<inputCollect.length;i++){
alert(inputCollect[i].value);  //弹出每个input的value
}
</script>


8、使用JavaScript控制文本框
正文：
使用JavaScript获取值
<form>
姓名：<input type="text" name="firstname" id="fn" value="hello">
</form>
 
<script type="text/javascript">
alert(document.getElementById("fn").value);//你应尽量使用此方法来获取元素
alert(document.all.firstname.value);//通过元素的name来获取元素
alert(document.all.fn.value);//通过元素的id来获取元素
</script>
使用JavaScript设置值

//设置文档框的值
document.getElementById("fn").value="bye";
将文本框设为只读
<form>
姓名：<input type="text" name="firstname" id="fn" value="hello">
</form>
<a href="javascript:setRead(true)">只读</a><br/><a href="javascript:setRead(false)">可读</a>
<script type="text/javascript">
function setRead(readonly){
//设置文档框的值
document.getElementById("fn").readOnly=readonly;
}
</script