1、document 对象
定义:document对象代表的整个html文档,因此可以去访问到文档中的各个对象(元素)
document重要的函数
1.1 write
向文档输出文本或js代码
1.2 writeln
向文档输出文本或者js代码,与write不一样的地方是,writeln是换行输出。
比如: document.write("hello");document.writeln("ok");
hello
ok
但是对浏览器来看,输出效果没有区别。
1.3 getElementById()
1.3.1 规定:HTML文档中id号要唯一,如果不唯一,则只取第一个元素。
1.3.2 id不要用数字开头
<script language="javascript" type="text/javascript"> function test1(){ var myhref=document.getElementById("1a"); window.alert(myhref.innerText); } </script> <body> <a id="1a" href="http://www.sohu.com">连接到sohu</a></br> <a id="1a" href="http://www.sina.com">连接到sina</a></br> <a id="1a" href="http://www.163.com">连接到163</a></br> <input type="button" value="testing" onclick="test1()"/> </body>
1.4 getElementsByName()
通过元素的名字来获取对象集合
<script language="javascript" type="text/javascript"> function test2(){ //id不能唯一,但是name可以重复 var hobbies=document.getElementsByName("hobby"); //window.alert(hobbies.length); for(var i=0;i<hobbies.length;i++){ //如何判断是否选择 if(hobbies[i].checked){ window.alert("你的爱好是" + hobbies[i].value) } } } </script> <body> 请选择你的爱好 <input type="checkbox" name="hobby" value="足球"/>足球 <input type="checkbox" name="hobby" value="旅游"/>旅游 <input type="checkbox" name="hobby" value="音乐"/>音乐 <input type="button" value="testing" onclick="test2()"/> </body>
1.5 getElementsByTagName()
通过标签的名字获取对象集合
<script language="javascript" type="text/javascript"> //通过标签名来获取对象(元素) function test3(){ var myObjs = document.getElementsByTagName("input"); for(var i=0;i<myObjs.length;i++){ window.alert(myObjs[i].value); } } </script> <body> <input type="checkbox" name="hobby" value="足球"/>足球 <input type="checkbox" name="hobby" value="旅游"/>旅游 <input type="checkbox" name="hobby" value="音乐"/>音乐 <input type="button" value="testing" onclick="test3()"/> </body>
1.6 动态创建HTML元素
举例:
<script language="javascript" type="text/javascript"> function test1(){ var myElement=document.createElement("a");//??写希望创建的html元素标签名 myElement.type="button"; myElement.value="我说button"; myElement.id="id1"; //给新的元素添加必要的属性信息 //myElement.href="http://www.sina.com.cn"; //myElement.inner="链接到新浪"; //myElement.style.left ="200px"; //myElement.style.top ="300px"; //myElement.style.position="absolute"; //添加到document.body //document.body.appendChild(myElement); //将元素添加到div document.getElementById("div1").appendChild(myElement); } function test2(){ //删除一个元素(删除一个元素是有前提:必须获取父元素) //这是第一种删除方法(比较不灵活) //document.getElementById("div1").removeChild(document.getElementById("id1")); window.alert(document.getElementById("id1").parentNode.id); //第二种比较灵活(推荐) document.getElementById("id1").parentNode.removeChild(document.getElementById("id1")); } </script> <body> <input type="button" onclick="test1()" value="动态的创建一个超链接"/> <input type="button" onclick="test2()" value="删除一个元素"/> <div id="div1" style="200px;height:400px;border:1px solid red;">div1</div> </body>
2、在Dom编程中,一个Html文档会被当做dom树来对待,dom会把所有的html元素映射成Node节点,于是你就可以使用Node节点(对象)的属性和方法
<script language="javascript" type="text/javascript"> function test1(){ var wuguiDiv=$("wugui"); window.alert(wuguiDiv.nodeName+" "+wuguiDiv.nodeType +" "+wuguiDiv.nodeValue); window.alert(wuguiDiv.childNodes.length+" "+wuguiDiv.nextSibling.nodeValue+" "+wuguiDiv.parentNode.parentNode); } function $(id){ return document.getElementById(id); } </script> <body> <input type="button" value="testing" onclick="test1()"/> <!--把乌龟放在一个div--> <div id="wugui" style="position:absolute;left:100px;top:120px;"> <img src="1.bmp" border="1" alt=""/> </div> <!--公鸡图片div--> </body>
3、dom的属性
案例:
<script language="javascript" type="text/javascript"> document.fgColor="white"; document.bgColor="black"; </script> <body> hello </body>
4、body对象说明
4.1 body 属性:
4.1.1 innerText 某个元素间的文本
4.1.2 innerHtml 某个元素间的html代码
举例:
<script language="javascript" type="text/javascript"> function test(){ //innerHtml浏览器会作为html来解析 document.getElementById("myspan").innerHtml="<a href='http://www.sohu.com'>到sohu</a>"; //innerText浏览器会作为文本来解析 document.getElementById("myspan").innerText="<a href='http://www.sohu.com'>到sohu</a>"; } </script> <body> <span id="myspan"></span> <input type="button" onclick="test()" value="测试"/> </body>
4.2 body事件
4.2.1 window_onselectstart()
4.2.2 window_onscroll()
<script language="javascript" type="text/javascript"> function window_onscroll(){ myHref.style.top=document.body.scrollTop + 50; myHref.style.left=document.body.scrollLeft; } function document_onselectstart(){ return false; //返回false,这样就可以禁止用户选网页中的文本, //当用户选择文本时,会触发 onselectstart 事件,当返回false时,就不会选中 //你也可以在body加入onselectstart="return false;"同样达到这个效果 } </script> <script language = javascript for=document event=onselectstart> <!-- //这样的写法等同于在body上 onselectstart="return false" window.alert('abc'); return document_onselectstart() //--> </script> <body onscroll="return window_onscroll()"> <TEXTAREA id="Textareal" name="Textareal" rows="500" cols="500"> 这个文本足够大! 这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大!这个文本足够大! </TEXTAREA> <a id=myHref href="http://www.sohu.com" style="LEFT:0px;POSITION:absolute;Top:50px;word-break:keep-all"><img src="ad.bmp"/></a> </body>