document对象:
代表的是整个html文档,可以访问文档中的所有对象。
write()向文档输出文本或者js代码
writeln()与write()不同的是换行输出。但是对于浏览器来说没有区别。
getElementById()方法:
(1)html文档中,id号一定要唯一,如果不唯一,则只取第一个id
(2)html的id号不要以数字开头。
getElementsByName()用法:可以用于通过元素名字来获取一个对象集合。
getElementsByTagName()用法:通过标签名返回对象集合。
代码如下:
<head>
<title>document1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="javascript" type="text/javascript">
function test1()
{
var myhref=document.getElementById("a1");
alert(myhref.innerText); //总是返回第一个,因为他找到第一个就不找了。
}
function test2()
{
//id不能重复,但是名字可以重复
var hobbies = document.getElementsByName("hobby");
for(var i=0;i<hobbies.length;i++)
{
if(hobbies[i].checked) //被选中的checked为true
{
alert("你选中的是"+hobbies[i].value);
}
}
}
//通过标签名来获取元素
function test3()
{
var myobjs=document.getElementsByTagName("input");
for(var i=0;i<myobjs.length;i++)
{
alert(myobjs[i].value);
}
}
</script>
</head>
<body>
<a id="a1" href="http://www.sohu.com">连接到sohu</a><br/>
<a id="a1" href="http://www.sina.com">连接到sina</a><br/>
<a id="a1" href="http://www.163.com">连接到163</a><br/>
<input type="button" value="测试1" οnclick="test1()"/>
请选择你的爱好:
<input type="checkbox" name="hobby" value="足球"/>足球
<input type="checkbox" name="hobby" value="旅游"/>旅游
<input type="checkbox" name="hobby" value="音乐"/>音乐
<input type="button" value="复选框测试" οnclick="test2()"/>
<input type="button" value="得到所有input测试" οnclick="test3()"/>
</body>
document对象可以动态的创建/添加/删除元素或者节点。
添加举例:
<script language="javascript" type="text/javascript">
function test1()
{ //创建元素,可以是a,button,text等等。
var myElement = document.createElement("a");//参数是希望创建的html元素标签名
//给新元素添加一些信息
myElement.href="http://www.sina.com";
myElement.innerText="链接到新浪";
//新元素定位
myElement.style.left="200px";
myElement.style.top="300px";
myElement.style.position="absolute";
//添加到document的body上面去。
document.body.appendChild(myElement);
//将这个元素添加到div1
//document.getElementById("div1").appendChild(myElement);
}
function test2()
{ //创建元素
var myElement = document.createElement("a");//参数是希望创建的html元素标签名
//给新元素添加一些信息
myElement.href="http://www.sina.com";
myElement.innerText="链接到新浪";
//新元素定位
//myElement.style.left="200px";
//myElement.style.top="300px";
//myElement.style.position="absolute";
//添加到document的body上面去。
//document.body.appendChild(myElement);
//将这个元素添加到div1
document.getElementById("div1").appendChild(myElement);
}
</script>
</head>
<body>
<input type="button" οnclick="test1()" value="动态创建一个超链接"/>
<input type="button" οnclick="test2()" value="动态创建一个超链接div中"/>
<div id="div1" style="width:200px;height:400px;border:1px solid red;">div1</div>
</body>
动态添加和删除举例:
<script language="javascript" type="text/javascript"> function test1() { //创建元素,可以是a,button,text等等。 var myElement = document.createElement("input");//参数是希望创建的html元素标签名 //给新元素添加一些信息 myElement.type="text" myElement.value="我是button"; myElement.id="id1" //添加到div1。 document.getElementById("div1").appendChild(myElement); //动态添加的盒原先就有的都可以删除。 } function test2() { //删除一个元素,必须找到它的父节点 //删除一个元素的前提是找到父元素的id document.getElementById("div1").removeChild(document.getElementById("id1")); } function test3() { //找到一个节点的父节点的id的方式 //可以用于删除元素过程中查找父元素的id window.alert(document.getElementById("id1").parentNode.id); } </script> </head> <body> <input type="button" οnclick="test1()" value="添加一个元素"/> <input type="button" οnclick="test2()" value="删除一个元素id为id1"/> <input type="button" οnclick="test3()" value="得到父节点"/> <div id="div1" style="width:200px;height:400px;border:1px solid red;"></div> </body>