DOM編程 學習筆記（二）

標籤：

學習內容：

1.document對象

2.event對象

該對象將標記型文檔進行封裝
該對象的作用，是對可標記型文檔進行操作
常見操作，想要實現動態效果，需要對節點操作，那麼先擷取到這個節點，想擷取節點，就必須先擷取節點所屬的文檔對象document
擷取節點的方法體現：
getElementById();提高標籤的id屬性值擷取該標籤節點，返回該標籤節點
getElementsByName();通過標籤的name屬性擷取節點，返回的是一個數組/容器

getElementsTagName();通過標籤名擷取節點，因為標籤名會有重複，所以返回一個數組

在操作文檔時為了擷取某一個特定的元素，getelementById方法是最好的選擇...

 

<html><head><script type="text/javascript">function getValue()  {  var x=document.getElementById("myHeader")  alert(x.innerHTML)//修改h1所顯示的標題...  }</script></head><body><h1 id="myHeader" onclick="getValue()">This is a header</h1><p>Click on the header to alert its value</p></body></html>

 

當我們在執行多次的getelementById方法時，我們可以定義一個方法，使其返回getelementById方法，這樣可以避免

在每次調用的時候，都書寫其方法，解決了代碼冗餘...

function id(x) {  if (typeof x == "string") return document.getElementById(x);  return x;  }

getElementByName（）與getelementById方法相似，但是他查詢的是name，而不是id屬性...

<html><head><script type="text/javascript">function getElements()  {  var x=document.getElementsByName("myInput");  alert(x.length);  }</script></head><body><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><br /><input type="button" onclick="getElements()" value="名為 ‘myInput‘ 的元素有多少個？" /></body></html>

getElementsByTagName（） 返回一個指定標籤的集合...

<html><head><script type="text/javascript">function getElements()  {  var x=document.getElementsByTagName("input");  alert(x.length);  }</script></head><body><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><br /><input type="button" onclick="getElements()"value="How many input elements?" /></body></html>

可以用 getElementsByTagName() 方法擷取任何類型的 HTML 元素的列表。例如，下面的代碼可擷取文檔中所有的表：

 

var tables = document.getElementsByTagName("table");alert ("This document contains " + tables.length + " tables");

 

也可以使用 getElementsByTagName() 方法擷取文檔中的一個特定的元素。

<script type="text/javascript">        function getNodeByTagNameDemo2(){                var divNode = document.getElementById("newlink");                var nodes = divNode.getElementsByTagName("a");//nodes成為了一個數組，存放著多個a屬性...                for(var i = 0;i<nodes.length;i++){                    nodes[i].target="_blank";                }        }    </script>    <input type="button" value="document對象擷取節點" onclick="getNodeByTagNameDemo2()"/>    <a href="http://www.baidu.com">百度1</a>    <a href="http://www.baidu.com">百度2</a>    <div id="newlink">        <a href="http://www.163.com">1631</a>        <a href="http://www.163.com">1632</a>        <a href="http://www.163.com">1633</a>    </div>

 

 

2.event對象..

事件綁定：

第一種方式

 

<html><head><script type="text/javascript">        function text(){              window.alert("hello");        } </script></head><body>        <input type="button" value="直接綁定方式" onclick="test()"/></body></html>    

 

第二種方式：

通過getelementById方法擷取元素後再監聽綁定

<html><head><script language=”javascript”Function test(){Document.write("hello");}</script></head><body>        <input type=”button” id=”ID名稱” value=”重新整理介面”/><script>          Document.getElementById(“ID名稱”).onClick=test;//只能綁定在這，綁定在前面會報錯。。。</script></body></html>              

 

DOM編程 學習筆記（二）