• 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=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>
  • 相关阅读:
    简单的逻辑学 笔记
    中国古代文化常识 笔记
    Docker 使用官方镜像
    Docker 入门 之基本命令
    Windows.form增删改查
    自定义控件
    LISTVIEW
    窗体布局
    计算器
    登录
  • 原文地址:https://www.cnblogs.com/luyuwei/p/3835964.html
Copyright © 2020-2023  润新知