你的位置:首页 > Java教程

[Java教程]javascript 之DOM篇


要怎么样的开场白才能使我有力气再更新学习进度呢?啊啊啊啊啊,表示好累啊~~~默念“棒棒棒,我最棒~”召唤精气神开总结敲字咯。哈哈哈。

-----------------------------------------------------------------------------------------------

DOM简介:

1、HTML DOM(网页对象模型):当网页被加载时,浏览器会创建页面的文档对象模型。

     HTML DOM 模型被构造为对象的树。

     HTML DOM树:

(ps:这个东东好像有点难懂也不知道是干嘛的?就是DOM的一个结构啥的吧,蛮看吧,后面我的学习好像没有涉及这个可怕的深奥定义,以后用到了,我再做提醒嘎。)

--------------------------------------------------------------------------------------------------------------------------

DOM操作HTML

1.改变html的输出流;(!注意:一定不要再整个文档加载完成之后使用document.write(),否则会覆盖该文档!!!!)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例(针对1):(1)<script> document.write("hello");</script>    

       结果:界面打印出hello

     (2)<p>hello</p>

          <script>document.write("world");</script>

       结果:界面打印出hello

                             world(因为p是段落标签,所以world换行)。

     (3)<p>hello</p>

          <button onclick="demo()">按钮</button>

          <script>

                   function  demo(){

                        document.write("world");

                      }

          </script>

        结果:界面打印出hello

                             一个按钮标志

         当鼠标点击按钮是,界面出现覆盖现象,变为打印出world。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

2.寻找元素:(1)通过id找到html元素;       (2)通过标签名找到html元素;

3.改变html内容:使用属性innerHTML

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例(针对2,3):

                   <p id="pid">hello</p>

                   <button onclick="demo()">按钮</button>

                   <script>

                           function demo(){

                                     var nv=document.getElementById("demo");

                                     nv.innnerHTML="world";

                                  }

                   </script>

                结果:界面打印出hello

                                      按钮标志

                     当鼠标点击按钮是,hello变为world。

(ps:通过标签寻找即是用document.getElementByTagName("标签名"))。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

4.改变HTML属性:使用属性attribute.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例(针对4):

             <a id="aid" href="http://www.cnblogs.com/yanyuanyuan/”>烽火戏诸诸诸候</a>

              <button onclick="demo()">按钮</button>

              <script>

                       function demo(){

                                    document.getElementById("aid").href="http://www:baidu.com";

                          }

              </script>

              结果:界面出现链接字样:烽火戏诸诸诸候,点击不是跳转到http://www.cnblogs.com/yanyuanyuan/,而是跳转到http://www.baidu.com。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``

---------------------------------------------------------------------------------

DOM操作CSS

1.通过DOM对象改变CSS

   语法:document.getElementById(id).style.property=new style.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例:<style>

               .div{

                          width:100px;

                          heigth:100px;

                          background:red;

                 }

     </style>

      <body>

                 <div id="div" >hello</div>

                 <button onclick="demo()">按钮</button>

                 <script>

                       function demo(){

                           document.getElementById("div").style.background="blue";

                       }

                 </script>

      </body>

     结果:界面打印出宽100px,高100px的红色背景框,里面有hello字样

                                              一个按钮

               当鼠标点击按钮时,背景色变为蓝色。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

————————————————————————————————————--------------------

1.DOM EventListener

     方法:(1)addEventListener():方法用于向指定元素添加事件句柄。

             (2)removeEventListener():移出方法添加的事件句柄。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例:<button id="btn">按钮</button>

      <script>

            var x=document.getElementById("btn");

            x.addEventListener("click",hello);

            x.addEventListener("click",world);

            function hello(){

                    alert("hello");

               }

          function world(){

                  alert("world");

             }

      </script>

    结果:界面弹出提示框“hello”,点击确定继续弹出提示框“world”.

(ps:removeEventListener()是对事件的移除,即上述例子,则就在add......后就一语句:x.removeEventListener("click",hello),则不会弹出提示框hello)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

-----------------------------------------------------

下期见,嘻嘻。