javascript DOM 控制标签小结

前言：近些天感受到了DOM创建标签的好处，就大量的运用了这块，也遇到了些许问题，现总结下！

验证事件

HTML:

<ul>

<li>

<input type="text" id="txtVali" runat="server"/>

</li>

<li><input type="submit" id="btn" runat="server" value="Enter"/>

</ul>

SCRIPT:

// 说明：如果此时txtVali文本框是空，给出重新输入的提示。

<script type="text/javascript">

function $(str){return document.getElementById(str);}

$('<%=btn.ClientID%>').onclick=function()//<%=%>脚本里是可以用这个写法绑定后台的数据值的，也就是说可以用这个写法结合脚本编写

//给btn按钮赋点击事件赋于了一个实体

{

 if($('<%=txtVali.ClientID%>').value=="")//如果文本值是空

{

 var span=document.createElement("span");

span.className="spMes";//设置span的样式

span.id="span";

span.innerHTML="小子，你要给文本框输入一个值呀！";

if($("span")==null)//这里要做个判断不然会无限添加的，很雷人！因为如果你创建一个sapn并且设置了ID为span用$(str)方法就能在页面中找到

$('<%=txtVali.ClientID%>').parentNode.appendChild(span);//找到文本框的父节点并追加节点sapn

return false;
}

return true;
}

//当我们发现提示要给文本框输入值时，在文本框里输入了值后就提示信息就要隐藏掉的，不然会给我会觉的这程序写的不人性化

$('<%=txtVali.ClientID%>').onclick=function()

{

 $('<%=txtVali.ClientID%>').parentNode.removeChild($("span"));//这种写法兼容性很高通过找到文本框的父节点去移除节点sapn

document.body.removeChild($("span"));//这种写法兼容性要差些，有时会报参数不正确！
}

</script>

 javascript结合后台代码进行编程

<input type=“text" id="txt" onclick="if('<%= Method()%>'=='True'){alert('可以执行点击事件');}else{alert('丫的没权限呀！')}"/>

C#

public bool Method()

{

 if(Request.QueryString["UID"]==null)

{

 return false;
}

return true;

}

 给多个标签赋于事件的方法

var items=document.getElementsByTagName("li");

for(var i=0;i<items.length;i++)

{

items[i].onmouseover=function(this){this.className="red";}

items[i].onmouseout=function(this){this.className="fff";}//我在这里就把items[i]放了进来，结果只有最后一个li有事件。要改成this，不可变量引用地址

}