正文

JavaScript基础--DOM对象加强篇（十四）

IP云
IP云V管理员/6 阅读
12/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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="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="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>

相关阅读

目录[+]