首页 > 代码库 > JavaScript基础--DOM对象加强篇(十四)

JavaScript基础--DOM对象加强篇(十四)

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=http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/足球"/>足球<input type="checkbox" name="hobby" value="http://www.mamicode.com/旅游"/>旅游<input type="checkbox" name="hobby" value="http://www.mamicode.com/音乐"/>音乐<input type="button" value="http://www.mamicode.com/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="http://www.mamicode.com/足球"/>足球<input type="checkbox" name="hobby" value="http://www.mamicode.com/旅游"/>旅游<input type="checkbox" name="hobby" value="http://www.mamicode.com/音乐"/>音乐<input type="button" value="http://www.mamicode.com/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="http://www.mamicode.com/动态的创建一个超链接"/>   <input type="button" onclick="test2()" value="http://www.mamicode.com/删除一个元素"/>   <div  id="div1" style="width: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="http://www.mamicode.com/testing" onclick="test1()"/><!--把乌龟放在一个div--><div id="wugui" style="position:absolute;left:100px;top:120px;">    <img src="http://www.mamicode.com/1.bmp" border="1" /></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.mamicode.com/‘http://www.sohu.com‘>到sohu";      //innerText浏览器会作为文本来解析      document.getElementById("myspan").innerText="<a href=http://www.mamicode.com/‘http://www.sohu.com‘>到sohu";   }</script><body>   <span id="myspan"></span>   <input type="button" onclick="test()" value="http://www.mamicode.com/测试"/></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="http://www.mamicode.com/ad.bmp"/></a></body>