言編寫的文檔 HTML-DOM：提供了一些更簡單的標記來描述各種HTML元素的屬性，使用HTML-DOM時代碼通常比較簡短，但是範圍沒有DOM Core廣泛，適用於處理HTML文檔 CSS-DOM：是針對CSS的操作，在JS中CSS-DOM技術主要作用是獲取和設置style對象的各種屬性，即CSS屬 ...
言編寫的文檔
HTML-DOM：提供了一些更簡單的標記來描述各種HTML元素的屬性，使用HTML-DOM時代碼通常比較簡短，但是範圍沒有DOM Core廣泛，適用於處理HTML文檔
CSS-DOM：是針對CSS的操作，在JS中CSS-DOM技術主要作用是獲取和設置style對象的各種屬性，即CSS屬性。
用父(parent)、子(child)、同胞(sibling)等術語來描述這些節點層次關係
頂部節點稱為根(root),如<html>
每個節點都有父節點，除根節點
一個節點可以有任意子節點
同胞節點是擁有相同的父節點
使用DOM Core訪問HTML節點
使用getElement系列方法訪問
getElementByld():返回按id屬性查詢第一個對象的引用
getElementsByName():返回按帶有指定名name查找的對象的集合,返回元素數組
getElementsByTagName():返回帶有指定標簽名TagName查找對象集合,返回數組
根據層次關係訪問
節點屬性
|
屬性名稱 |
描述 |
|
parentNode |
返回節點的父節點 |
|
childNodes |
返回子節點集合，childNodes[i] |
|
firstChild |
返回節點的第一個位元組點，普遍用法是訪問該元素的文本節點 |
|
lastChild |
返回節點的最後一個位元組點 |
|
nextSibling |
下一個節點 |
|
previousSibling |
上一個節點 |
element屬性：給高級瀏覽器使用，低版本用上面的節點屬性
|
常用屬性 |
說明 |
|
firstElementChild |
返回最後一個子節點，普遍用法是訪問該元素的文本節點 |
|
lastElementChile |
返回節點最後一個位元組點 |
|
nextElementSibling |
下一個節點 |
|
previousElementSibling |
上一個節點 |
書寫順序不能亂
空格也算節點的一種，nodeType是3，文本Text類型
每個節點都擁有包含著關於節點的某些信息如：
nodeName(節點名稱)
nodeValue(節點值)
nodeType(節點類型)
節點類型;可返回節點的類型是一個只讀屬性
|
類型 |
NodeType值 |
|
元素element |
1 |
|
屬性attr |
2 |
|
文本text |
3 |
|
註釋comments |
8 |
|
文檔document |
9 |
getAttribute(“屬性名”);用來獲取屬性的值
setAttribute(“屬性名”,”屬性值”);用來設置屬性值
創建節點
|
名稱 |
描述 |
|
createElement(tagName) |
創建一個標簽名為tagName的新元素節點 |
|
A.appendChild(B) |
把B節點追加至A節點的末尾 |
|
insertBefore(A,B) |
把A節點插入到B節點之前,A是必選,表示新插入的節點 |
|
cloneNode(deep) |
複製某個指定的節點,deep若為true則複製該節點及該節點所有的子節點，若為flase，則只複製該節點和其屬性 |
|
removeChild(node) |
刪除指定的節點 |
|
replaceChild(newNode,oldNode) |
用其他的節點替換指定節點 |
在HTML DOM中style是一個對象，代表一個單獨的樣式聲明
語法：HTML元素.style.樣式值=“值”;
常用屬性
|
類別 |
屬性 |
描述 |
|
background(背景) |
backgroundColor |
元素的背景顏色 |
|
backgroundImage |
背景圖像 |
|
|
backgroundRepeat |
是否及如何重覆背景圖像 |
|
|
text(文本) |
fontSize |
字體大小 |
|
fontWeight |
字體粗細 |
|
|
textAlign |
排列文本 |
|
|
font |
設置同一行字體屬性 |
|
|
color |
字體顏色 |
|
|
padding(邊距) |
padding |
元素填充 |
|
paddingTop |
上邊距 |
|
|
paddingBotton |
下邊距 |
|
|
paddingLeft |
左邊距 |
|
|
paddingRight |
右邊距 |
|
|
border(邊框) |
border |
設置四個邊框屬性 |
|
|
borderTop borderBotton borderLeft borderRight |
上 下 左 右 |
常用事件
|
名稱 |
描述 |
|
onclick |
單擊某個對象時調用事件 |
|
onmouseover |
滑鼠移到某元素之上 |
|
onmouseout |
滑鼠從某元素移開 |
|
onmousedown |
滑鼠按鈕被按下 |
HTML元素.className=”樣式名稱”;:可設置或返回元素的class樣式
獲取樣式的屬性值：HTML元素.style.樣式屬性；
JS操作SCC樣式：
dom.style.樣式名稱=”樣式值”;
dom.style.cssText=”屬性名:屬性值；屬性名:屬性值”
dom.className=”標簽中的class的屬性值”
