拿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:元素内容区高度加上上下内边距高度。