DOM:
Document Object Model (文檔對象模型)
DOM節(jié)點:
節(jié)點和節(jié)點層次的概念？
節(jié)點：頁面中的所有內容都是節(jié)點：包括標簽，聲明，注釋，文字，腳本等。。。
節(jié)點層次：節(jié)點之間的關系就是節(jié)點的層次
在js中稱為node。
獲取元素節(jié)點的方法:
獲取單一節(jié)點對象:
-
document.getElementById()-->獲取帶有指定id的元素 -
document.querySelector()-->通過css選擇器獲取相應元素--注意:IE8及以下瀏覽器不支持
獲取一類節(jié)點對象,得到一個類數(shù)組對象:
-
document.getElementsByName()-->獲取帶有指定name屬性值的元素 -
document.getElementsByTagName()-->獲取帶有指定標簽名的元素 -
document.getElementsByClassName()-->獲取帶有指定類名的元素--注意:IE8及以下瀏覽器不支持 -
document.querySelectorAll()-->通過css選擇器獲取相應元素--注意:IE8及以下瀏覽器不支持
注意: 以上傳入的都是字符串
節(jié)點的屬性:
nodeName 節(jié)點名稱屬性
- 返回的大寫標簽名
nodeType 節(jié)點類型值
- 返回的是一個數(shù)字
元素節(jié)點: 1
屬性節(jié)點: 2
文本節(jié)點: 3
文檔節(jié)點: 9
nodeValue 節(jié)點值
- 返回的是節(jié)點的值,元素節(jié)點的值永遠都是null
通過元素節(jié)點獲取屬性:
1. 可以通過節(jié)點來獲取元素身上的屬性:元素節(jié)點.屬性名
2. class屬性比較特殊,因為它是關鍵字,所以需要寫成className來獲取
3. 注意:css的樣式名在js中全都要轉換為駝峰式命名法,如:font-size在js中寫成fontSize;
4. style屬性也比較特殊,它得到的是一個樣式集合對象,里面包含了css你能設置的所有樣式,不管你設沒設置
- 想獲取某個樣式可以繼續(xù)以對象屬性的方法獲取:元素節(jié)點.style.width;
- 還可以通過這種方法來修改樣式:元素節(jié)點.style.width = "100px";注意要寫字符串
- 如果修改的樣式很多,還可以通過行內樣式的方法:
元素節(jié)點.style = "width:100px;height:100px;font-size:26px;";
注意:這種寫法用的還是原css寫法,不使用駝峰命名法;
