JavaScript Dom編程藝術-C3 DOM


一、DOM代表什么 D:document(文檔),網頁加載到Web瀏覽器時,把編寫的網頁文檔轉化為一個文檔對象。 O:object(對象),document對象主要功能就是處理網頁內容。 M:model(模型),一個以HTML為根節點的節點樹模型,節點分為三種,每個節點都是一個對象。
二、樹節點(node)      包括元素節點、文本節點和屬性節點。      1.元素節點(element node)           如<body>、<p>、<ul>等,標簽的名字就是元素的名字。      2.文本節點(text node)           總是被包含在元素節點之間。      3.屬性節點(attribute node)           屬性節點總是被包含在元素節點中      附加:CSS基礎概念      selector {           property:value;           }      例如:       p{          color:yellow;           font-family:”arial“,scan-serif;           font-size: 1.2em;       }      CSS子節點將自動繼承(inheritance)父節點的樣式。      為了區別開不同的元素,使用class屬性或id屬性。      class 如底下:           <p class="sp">This paragraph use sp class</p>           <h2 class= "sp">h2 use sp clasee </h2>      //對所有class=sp的元素進行設置      .sp {          font-style:italic;         }      //對h2內.sp的進行設置      h2.sp{          text-transform:uppercase;       }      id如底下:      #id{            property:value;           }      //id底下的元素      #id elementName {           property:value;           }
三、獲取元素      有三種DOM方法可湖區元素節點,元素ID、標簽名、類名字。      1.getElementById      document.getElementById(idValue); //因為id是獨一無二的,所以直接用document來獲取      返回一個對象Object      2.getElementsByTagName      element.getElementByTagName(tag);//可以通過一般的元素來獲取元素數組      返回一個對象數組 //即使只有一個元素也是數組      //某份文檔里共有多少個元素節點      document.getElementsByTagName("*").length;      3.getElementsByClassName(html5支持)      document.getElementsByClass(class [class1])  //與類名順序和類名數量無關,即含有這些類即可           返回一個對象數組      //老版本實現方法      function getElementsByClassName(node, className){           if(node.getElementsByClassName){                //使用現有方法                return node.getElementsByClassName(className);           } else {                var results=  new Array();                var elms = node.getElementsByTagName("*");                for(var i = 0; i<elms.length;i++){                     if(elems[i].className.indexOf(className)!=-1){                          results[result.length] = elems[i];                     }                }                return results;           }      } 四、獲取和設置屬性值        1.object.getAttribute(attribute);           object不包括document      2.object.setAttribute(attribute,value);           object不包括document      在setAttribute后,文檔本身的源代碼不會改變。表現了DOM的工作模式,先加載文檔的靜態內容,再動態啊U心,動態刷新后不影響文檔的靜態內容,DOM對頁面內容刷新卻不需要在瀏覽器里刷新頁面。

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com