你的位置:首页 > Java教程

[Java教程]JS DOM 来控制HTML元素


JS DOM 来控制HTML元素

(ps:这个有很多方法,挑一些详解,嘻嘻)

1.getElementsByName():获取name.

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

例:<p name="pn">hello</p>

      <p name="pn">hello</p>

      <p name="pn">hello</p>

      <script>

              function getName(){

                                   var count=document.getElementsByName("pn");

                                   alert(count.length);

                                   var p=count[2];

                                   p.innerHTML="world";

                   }

     </script>

结果:界面打印出三个hello,并且伴有一个提示框“3”,当点击确定后,界面显示的内容变为hello hello world

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~··

2.getElementByTagName():获取元素。

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

例:<p>hello</p>

      <p>hello</p>

      <p>hello</p>

      <script>

              function getName(){

                                   var count=document.getElementsByTagName("p");

                                   alert(count.length);

                                   var p=count[2];

                                   p.innerHTML="world";

                   }

     </script>

结果:界面打印出三个hello,并且伴有一个提示框“3”,当点击确定后,界面显示的内容变为hello hello world

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

3.getAttribute():获取元素属性。

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

例:<a id="aid" title="得到a的标签属性"></a>

     <script>

                     function getAttr1(){

                              var anode=document.getElementById("aid");

                              var attr=anode.getAttribute("id");

                             alert("a的ID是:"+attr);

                       }

                     function getAttr2(){

                            var anode=document.getElementById("aid");

                            var attr=anode.getAttribute("title");

                            alert("a的title内容是:"+attr);

                      }

                        getAttr1();

                        getAttr2();

    </script>

结果:弹出提示框“a的ID是:aid”.点击确定后,弹出提示框“a的title内容是:得到a的标签属性”。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4.setAttribute()设置元素属性。

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

例:<a id="aid2">aid2</a> 

     <script>

               function setAttr(){

                      var anode=document.getElementById("aid2");

                      anode.setAttribute("title","动态设置a的title属性");

                      var  attr=anode.getAttribute("title");

                      alert("动态设置的title值为:"+attr);

             }

             setAttr();

      </script>

结果:弹出提示框“动态设置的title值为:动态设置a的title属性”。

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

5.childNodes():访问子节点。

~~~~~~~~~~~~~~~~~~~~~~~~~~··

例:<ul><li>1</li><li>2</li><li>3</li></ul>

     <script>

                      function getChildNode(){

                                var childnode=document.getElementsByTagName("ul")[0].childNodes;

                               alert(childnode.length);

                               alert(childnode[0].nodeType);

                     }

                    getChildNode();

    </script>

结果:界面打印出.1 .2 .3弹出对话框“3”,按确定后弹出“1”。

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

6.parentNode():访问父节点。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·

例:<div>

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

     </div>

     <script>

               function getParentNode(){

                       var div=document.getElementById("pid");

                       alert(div.parentNode.nodeName);

               }

              getParentNode();

    </script>

结果:弹出提示框:DIV.

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

7.createElement():创建元素节点。

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

例:

   <script>

              function createNode(){

                          var body=document.body;

                          var input=document.createElement("input");

                          input.type="button";

                          input.value="按钮";

                          body.appendChild(input);//插入节点

               }

                 createNode();

  </script>

结果:出现一个按钮。

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

8.createTextNode():创建文本节点。

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

例:

       <script>
               function createNode(){
                            var element = document.createElement("div");
                            element.className = "message";
                            var textNode = document.createTextNode("Hello world!");
                            element.appendChild(textNode);
                            document.body.appendChild(element);
               }

           createNode();

     </script>

代码分析:这个例子创建了一个新<div>元素并为它指定了值为“message”的class特性。然后,又创建了一个文本节点,并将其添加到前面创建的元素中。最后一步,就是将这个元素添加到了文档中的<body>元素中,这样可以在浏览器中看到新创建的元素和文本节点了。

 

结果:页面显示hello world。

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

9.insertBefore():插入节点。

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

 例:<div id="div">

                   <p id="pid">p元素</p>

       </div>

       <script>

                function addNode(){

                         var div=document.getElementById("div");

                         var node=document.getElementById("pid");

                         var newnode=document.createElement("p");

                         newnode.innerHTML="动态插入一个p元素";

                         div.insertBefore(newnode,node);

               }

               addNode();

       </script>

结果:界面打印出:动态插入一个p元素

                         p元素

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

10.removeChild():删除节点。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·

 例:<div id="div">

                   <p id="pid">p元素</p>

       </div>

       <script>

             function removeNode(){

                             var div=document.getElementById("div");

                             var p=div.removeChild(div.childNodes[1]);

                }

            removeNode();

      </script>

结果:界面什么也没显示。

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

11.offsetHeight:网页尺寸

12.scrollHeight:网页尺寸

~~~~~~~~~~~~~~~~~~~~~~~~~~~·

例:

   <script>

            function getSize(){

                   var width=document.documentElement.offsetWidth||document.body.offsetWidth;//解决兼容问题

                   var height=document.documentElement.offsetHeight||document.body.offsetHeight;

                   alert(width+","+height);

            }

            getSize();

  </script>

显示结果: