javascript 里找元素操作元素

 

                                   javascript 

 

一、找到元素。 var d = document.getElementById("") var d = document.getElementsByName("") var d = document.getElementsByTagName("") var d = document.getElementsByClassName("")

二、操作元素。 （一）操作内容 1.表单 value 赋值，取值

2.非表单 赋值，取值 innerHTML innerText

（二）操作属性 1.获得属性值 getAttribute("属性名")，返回的是属性值。

2.给属性赋值（添加属性，修改属性） setAttribute("属性名","属性值")

3.删除属性 removeAttribute("属性名")

（三）操作样式

三、操作相关元素。

 

 

1.同意不同意代码

 

<title>无标题文档</title>
<script language="javascript">
function keYong()
{
    var b = document.getElementById("btn");
    b.removeAttribute("disabled");
}
function buKeYong()
{
    var b = document.getElementById("btn");
    b.setAttribute("disabled","disabled");
}
</script>
</head>

<body>
<form action="" method="get">
<h1>用户协议</h1>
<p>asdgsad</p>
<p>g</p>
<p>asdg</p>
<p>asdgadsgadhgadfhadfh</p>
<p>adfhadfhadhdafhadfhad</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<input name="aaa" type="radio" value="true" onclick="keYong()" />同意
<input name="aaa" type="radio" value="false" onclick="buKeYong()" checked="checked" />不同意
<br/>
<input type="Submit" value="下一步" disabled="disabled" name="btn" id="btn"/>
</form>
</body>
</html>


2.用户名注册表框验证

<title>无标题文档</title>
<style type="text/css">
.eee
{
    color:red;
}
</style>
<script language="javascript">
function docheck()
{
    var s = "";
    var uid = document.getElementById("txtUID").value;
    var p1 = document.getElementById("txtPWD1").value;
    var p2 = document.getElementById("txtPWD2").value;
    var email = document.getElementById("txtEmail").value;
    if(uid.length==0)
    {
        s +=  "用户名不能为空\n";
    }
    if(p1.length==0)
    {
        s+="密码不能为空\n";
    }
    if(p2.length==0)
    {
        s+="确认密码不能为空\n";
    }
    if(email.length==0)
    {
        s+="邮箱不能为空\n";
    }
    if(p1 != p2)
    {
        s+= "两次输入的密码不一样！";
    }
    
    alert(s);
}
function docheck1()
{
    var uid = document.getElementById("txtUID").value;
    var p1 = document.getElementById("txtPWD1").value;
    var p2 = document.getElementById("txtPWD2").value;
    var email = document.getElementById("txtEmail").value;
    if(uid.length == 0)
    {
        document.getElementById("spUID").innerHTML = "<h1>用户名不能为空</h1>";
    }
    else
    {
        document.getElementById("spUID").innerHTML = "";
    }
    if(p1 != p2)
    {
        document.getElementById("spPWD2").innerHTML = "两次输入的密码不一样";
    }
    else
    {
        document.getElementById("");
    }
}
</script>
</head>

<body>
<form >
<table width="500" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr>
    <td width=100 align="right">用户名：</td>
    <td width=200>
    <input type="text" name="txtUID" id="txtUID" />
    </td>
    <td width="200"><span id="spUID" class="eee"></span></td>
  </tr>
  <tr>
    <td align="right">密码：</td>
    <td>
    <input type="text" name="txtPWD1" id="txtPWD1" />
    </td>
    <td><span id="spPWD1" class="eee"></span></td>
  </tr>
  <tr>
    <td align="right">确认密码：</td>
    <td>
    <input type="text" name="txtPWD2" id="txtPWD2" />
    </td>
    <td><span id="spPWD2" class="eee"></span></td>
  </tr>
  <tr>
    <td align="right">邮箱：</td>
    <td>
    <input type="text" name="txtEmail" id="txtEmail" />
    </td>
    <td><span id="spEmail" class="eee"></span></td>
  </tr>
  <tr>
    <td colspan="3" align="center">
    <input id="btn" type="button" value="注册(10)" disabled="disabled" onclick="docheck1()" /><br/>
    <a id="a1" href="Untitled-1.html">查看用户协议</a>
    </td>
  </tr>
</table>
</form>
</body>
</html>
<script language="javascript">
var n=10;
function bianHua()
{
    n--;
    if(n==0)
    {
        var b = document.getElementById("btn");
        b.value="注册";
        b.removeAttribute("disabled");
    }
    else
    {
        var b = document.getElementById("btn");
        b.value="注册("+n+")";
        window.setTimeout("bianHua()",1000);
    }
    
    
}
bianHua()

/*
var a = document.getElementById("a1");
var s = a.getAttribute("href");
alert(s);
*/
//var b = document.getElementById("btn");
//b.setAttribute("disabled","disabled");
//b.removeAttribute("disabled");
</script>

 

3 .点击确定出现文本框里内容


 

<title>无标题文档</title>

</head>

<body>
<form action="" method="get">
<input name="aaa" id="txt" type="text" />
<input name="aaa" id="btn" type="button" value="ClickMe" />
</form>
<p></p>
<div></div>
<div class="aaa"></div>
<div id="dd"></div>
<div class="aaa"></div>
<div></div>
</body>
</html>
<script language="javascript">
var d = document.getElementById("btn");
alert(d.value);

var t = document.getElementById("txt");
t.value="这是一个文本框";
</script>

 

posted @ 2015-01-28 20:34  奔跑的小黄鸡  阅读(238)  评论(0)  编辑  收藏  举报