document对象:表示整个的文档
常用方法:
- write方法:向页面输出变量(值)
向页面输出html代码
document.write("hello");
document.write("<hr/>");
- getElementById()方法:通过id得到元素(标签),向input里面设置一个值value
//使用getElementById()得到input标签
var input1=document.getElementById("nameid");
//得到input里面的value值
alert(input1.value);
//向input里面设置一个值value
input1.value="dddd";
- getElementsByName():通过标签的name的属性值得到标签,返回的是一个集合(数组)
var input2=document.getElementsByName("name1");
alert(input2.length);
//遍历数组
for (var i=0;i<input2.length;i++ )
//通过遍历数组,得到每个标签里面的值
{
var input3=input2[i];//每次循环得到input对象,赋值到input3
document.write(input3.value);//得到每个input标签里面的value值
}
- getElementsByTagName(“标签名称”) 通过标签名称得到元素
var input4=document.getElementsByTagName("input");
alert(input4.length);
for (var i=0;i<input4.length;i++ )
{
var input5=input4[i];
document.write(input5.value);
}
注意的地方
只有一个标签,这个标签只能使用name得到,使用getElementByName返回的是一个数组,但是现在只有一个元素,这个时候不需要遍历,而是可以直接通过数组的下标获取到值。
var input2=document.getElementByName(“name11”)[0];
alert(input2.value);
10.window弹窗案例
实现过程:
创建一个页面
有两个输入项和一个按钮
按钮上有一个事件,弹出一个新窗口open
创建弹出页面
表格
每一个有一个按钮和编号姓名
按钮上有一个事件,把当前的编号和姓名,赋值到第一个页面相应的位置
案例代码:
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
用户编号:<input type="text" id="number" value=""/> <br/>
用户姓名:<input type="text" id="name" value=""/><br/>
<input type="button" id="chose" value="选择" onclick="choose();"/>
<script type="text/javascript">
function choose(){
window.open("10-window的open窗.html","","width=200 height=200" );
}
</script>
</body>
</html>
open小窗口代码:
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<table border="1">
<tr>
<td>操作</td>
<td>编号</td>
<td>姓名</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="chose('001','张三');"/></td>
<td>001</td>
<td>张三</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="chose('002','赵四');"/></td>
<td>002</td>
<td>赵四</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="chose('003','王五');"/></td>
<td>003</td>
<td>王五</td>
</tr>
</table>
<script type="text/javascript">
//需要把num和name赋值到weindow窗口
//跨页面的操作,opener得到创建这个窗口的窗口,得到window页面
function chose(num1,name1){
var pwin=window.opener;
pwin.document.getElementById("number").value=num1;
pwin.document.getElementById("name").value=name1;
window.close();
}
</script>
</body>
</html>