JavaScript控制获取HTML元素

1.getElementsByName():获取name.

  1.    <p name="pn">hello</p>
  2.    <p name="pn">hello</p>
  3.    <p name="pn">hello</p>
  4.    <script>
  5.        function getName(){
  6.                   var count=document.getElementsByName("pn");
  7.                   alert(count.length);
  8.                   var p=count[2];
  9.                   p.innerHTML="world";
  10.           }
  11.    </script>

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

2.getElementsByTagName():获取元素。

  1.    <p>hello</p>
  2.    <p>hello</p>
  3.    <p>hello</p>
  4.    <script>
  5.        function getName(){
  6.                   var count=document.getElementsByTagName("p");
  7.                   alert(count.length);
  8.                   var p=count[2];
  9.                   p.innerHTML="world";
  10.           }
  11.    </script>

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

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

  1. <a id="aid" title="得到a的标签属性"></a>
  2.    <script>
  3.            function getAttr1(){
  4.                var anode=document.getElementById("aid");
  5.                var attr=anode.getAttribute("id");
  6.                alert("a的ID是:"+attr);
  7.             }
  8.            function getAttr2(){
  9.               var anode=document.getElementById("aid");
  10.               var attr=anode.getAttribute("title");
  11.               alert("a的title内容是："+attr);
  12.            }
  13.             getAttr1();
  14.             getAttr2();
  15.   </script>

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

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

  1. <a id="aid2">aid2</a> 
  2.    <script>
  3.         function setAttr(){
  4.            var anode=document.getElementById("aid2");
  5.            anode.setAttribute("title","动态设置a的title属性");
  6.            var attr=anode.getAttribute("title");
  7.            alert("动态设置的title值为："+attr);
  8.        }
  9.        setAttr();
  10.    </script>

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

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

  1. <ul><li>1</li><li>2</li><li>3</li></ul>
  2.    <script>
  3.            function getChildNode(){
  4.                 var childnode=document.getElementsByTagName("ul")[0].childNodes;
  5.                 alert(childnode.length);
  6.                 alert(childnode[0].nodeType);
  7.            }
  8.           getChildNode();
  9.   </script>

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

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

  1. <div>
  2.         <p id="pid"></p>
  3.    </div>
  4.    <script>
  5.         function getParentNode(){
  6.             var div=document.getElementById("pid");
  7.             alert(div.parentNode.nodeName);
  8.         }
  9.        getParentNode();
  10.   </script>

结果：弹出提示框：DIV.

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

  1. <script>
  2.       function createNode(){
  3.             var body=document.body;
  4.             var input=document.createElement("input");
  5.             input.type="button";
  6.             input.value="按钮";
  7.             body.appendChild(input);//插入节点
  8.        }
  9.         createNode();
  10. </script>

结果:出现一个按钮。

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

  1. <script>
  2.      function createNode(){
  3.            var element = document.createElement("div");
  4.            element.className = "message";
  5.            var textNode = document.createTextNode("Hello world!");
  6.            element.appendChild(textNode);
  7.            document.body.appendChild(element);
  8.      }
  9.    createNode();
  10. </script>

代码分析：这个例子创建了一个新

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

结果：页面显示hello world。

9.insertBefore():插入节点。

  1. <div id="div">
  2.           <p id="pid">p元素</p>
  3.     </div>
  4.     <script>
  5.         function addNode(){
  6.              var div=document.getElementById("div");
  7.              var node=document.getElementById("pid");
  8.              var newnode=document.createElement("p");
  9.              newnode.innerHTML="动态插入一个p元素";
  10.              div.insertBefore(newnode,node);
  11.         }
  12.         addNode();
  13.     </script>

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

10.removeChild():删除节点。

  1. <div id="div">
  2.           <p id="pid">p元素</p>
  3.     </div>
  4.     <script>
  5.        function removeNode(){
  6.                var div=document.getElementById("div");
  7.                var p=div.removeChild(div.childNodes[1]);
  8.         }
  9.       removeNode();
  10.    </script>

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

11.offsetHeight； .scrollHeight:网页尺寸

  1. <script>
  2.      function getSize(){
  3.          var width=document.documentElement.offsetWidth||document.body.offsetWidth;//解决兼容问题
  4.          var height=document.documentElement.offsetHeight||document.body.offsetHeight;
  5.          alert(width+","+height);
  6.      }
  7.      getSize();
  8. </script>

发布日期： 作者： 511遇见

所属分类： JavaScript/jquery 标签： 　

没有相关文章!

相关文章: