拿JavaScript DOM說那麼一些事

                                                     HTML元素那些事

在WEB開發中兩個主要人物就是document類型和element類型。HTMLElement繼承自Element並添加了一些屬性。在實際的開發程式中總是通過HTML元素的屬性去辦一些事，有時候標準屬性滿足不了需求，就要添加一些自訂屬性來來辦事。如下：

<div id="divDom" title="dom那些事" customAttr="myDom"></div>

可以通過如下代碼訪問這些屬性

function MyAttr() {
var div = document.getElementById("divDom");
            alert(div.customAttr);//非IE undefined 
            alert(div.title);
            alert(div.id);
        }
        MyAttr();

還可以修改HTML元素的屬性，如下

 function MyAttr() {
var div = document.getElementById("divDom");
            alert(div.customAttr);//非IE undefined
            div.customAttr = "Dom真的就是那麼回事";
            alert(div.customAttr);
        }
        MyAttr();

為了操作這些特性，DOM還提供了幾個介面getAttribute()、setAttribute()和removeAttribute()。

 function MyAttr() {
var div = document.getElementById("divDom");
            alert(div.getAttribute("customAttr"));
            div.setAttribute("customAttr", "Dom真的就是那麼回事");
            alert(div.getAttribute("customAttr"));
            div.setAttribute("color", "blue");
            alert(div.getAttribute("color"));
            div.removeAttribute("customAttr");
            alert(div.getAttribute("customAttr"));
        }

通過實驗可以看出，用setAttribute添加的自訂屬性，在非IE下一樣有值，div.customAttr只有IE才會為其建立屬性，firefox並沒有為它建立屬性只是undefined。removeAttribute挺霸道，還真的是把屬性給徹底移除，再次訪問屬性變為null。

      
                                             innerText、innerHTML和outerText 、outerHTML那些事

innerText：返回當前元素之間的所有文本。給它賦值時即使有html元素也當做普通文本對待。

innerHTML:返回當前元素之間所有HTML表現。如果給它賦值“<strong>Hello World!</strong>

“，它就會返回加粗的“Hello World!”。

<div id="divDom" title="dom那些事" customAttr="myDom">別拿DOM不當回事</div>
      <script language="javascript" type="text/javascript">
function dom() {
var div = document.getElementById("divDom");
              div.innerText == undefined ? div.textContent = "<strong>Hello World!</strong>" : div.innerText = "<strong>Hello World!</strong>";
              alert(div.innerText == undefined ? div.textContent : div.innerText); //<strong>Hello World!</strong>
              div.innerHTML = "<strong>Hello World!</strong>"; //加粗的Hello World!
              alert(div.innerHTML);
          }
          dom();
</script>

outerText:（firefox不支援）在讀資料是和innerText一樣，但是在寫資料時就是用所賦給的值替換掉原來的元素。

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

              alert(div.outerText); //別拿DOM不當回事

              div.outerText = "<strong>Hello World!</strong>";

              alert(div.outerText); //空，已經被<strong>Hello World!</strong>給替換掉了，原來的divDom已經不存在了

outerHTML: （firefox不支援）在讀取資訊的時候返回調用它的元素的HTML代碼，寫資訊的用給定的HTML替換掉調用它的HTML元素。

                                           動態操作DOM的那些事

用<script>元素動態向頁面插入指令碼。可以用類似下面的代碼

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

          script.type = "text/javascript";

          script.src = "xxx.js";

          document.body.appendChild(script);

還可以動態添加樣式：

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

          link.rel = "style
sheet";

          link.type = "text/css";

          link.href = "xxx.css";

          var
head = document.getElementsByTagName("head")[0];

          head.appendChild(link);

                                        元素位移量的那些事

OffsetHeight:元素在垂直方向上佔用的空間大小，以像素為單位。

OffsetWidth:元素在水平方向上佔用的空間大小，以像素為單位。

OffsetLeft:元素的左外邊框至包含元素的左內邊框的之間的像素距離。

offsetTop:元素的上外邊框至包含元素的上內邊框之間的像素距離。

要想知道某個元素在頁面上的位移量，可以將這個元素的offsetLeft和offsetTop與其offsetParent的相同屬性相加，一直迴圈到跟元素，就可得到一個基本準確的值。範例程式碼如下

function getElementLeft(element)
{
var actualLeft=element.offsetLeft;
var current=element.offsetParent;
while(current!==null)
{
   actualLeft+=current.offsetLeft;
   current=current.offsetParent;
}
return actualLeft;
}

元素的客戶區大小指的是元素內容及其內邊距所佔據的空間大小。

clientWidth:元素內容區寬度加上左右內邊距寬度。

clientHight:元素內容區高度加上上下內邊距高度。