Javascript DOM 01 基礎篇

時間 2019-12-01

標籤 javascript dom 基礎欄目 JavaScript 简体版

原文原文鏈接

DOM基礎

DOM是什麼

答：文件對象模型（Document Object Model，簡稱DOM），DOM能夠以一種獨立於平臺和語言的方式訪問和修改一個文檔的內容和結構！來自網絡

本節瞭解了下面知識點：

DOM節點

childNodes nodeType

獲取子節點

children

parentNode

例子：點擊連接，隱藏整個li

offsetParent

例子：獲取元素在頁面上的實際位置

DOM節點(2)

首尾子節點

有兼容性問題

firstChild、firstElementChild

lastChild 、lastElementChild

兄弟節點

有兼容性問題

nextSibling、nextElementSibling

previousSibling、previousElementSibling

元素屬性操做

第一種：oDiv.style.display=「block」;

第二種：oDiv.style[「display」]=「block」;

第三種：Dom方式

DOM方式操做元素屬性

獲取：getAttribute(名稱)

設置：setAttribute(名稱, 值)

刪除：removeAttribute(名稱)

用className選擇元素

如何用className選擇元素

選出全部元素

經過className條件篩選

封裝成函數

 1 <script>
 2 
 3 function getByClass(oParent,ClassName)
 4 {
 5     var result=[];
 6     var aEle=document.getElementsByTagName('*');//document 在這裏應該能夠用oUl代替，不知道是否是瀏覽器的問題，我這裏老調試不出來
 7     for(var i=0; i<aEle.length ; i++)
 8     {
 9         if(aEle[i].className==ClassName)
10         {
11             result.push(aEle[i]);
12             }
13         }
14       return result;
15     }
16 
17 
18 window.onload=function ()
19 {
20     var oUl=document.getElementById('ull');
21     var oBox=getByClass(oUl,'box');
22     for(var i=0;i<oBox.length;i++)
23     {
24         oBox[i].style.background='red';
25         }
26     /*var aLi=document.getElementsByTagName('li');
27     for(var i=0;i<aLi.length;i++)
28     {
29         if(aLi[i].className=='box')
30         {
31             //oLi[i].style.background='red';
32             aLi[i].style.background='red';
33 
34             }
35         }*/
36     
37     }
38 
39 
40 </script>
41 
42 <!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
43 
44 <body>
45 <ul id="ul1">
46     <li class="box"></li>
47     <li class="box"></li>
48     <li></li>
49     <li></li>
50     <li></li>
51     <li class="box"></li>
52     <li></li>
53 </ul>
54 
55 </body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。