1. html dom 簡介
dom: document, 當網(wǎng)頁被夾在時, 瀏覽器會創(chuàng)建頁面的文檔對象模型(Document Object Model).
- JavaScript能夠改變頁面中所有的HTML元素.
- JavaScript能夠改變頁面中所有的HTML屬性.
- JavaScript能夠改變頁面中所有CSS樣式.
- JavaScript能夠?qū)撁嬷兴惺录鞒龇磻?
通過JavaScript查找HTMl元素有三種方法:
// 通過id查找元素
var x = document.getElementBtId("intro"); //如果找到以對象方式返回病存儲在變量`x`中; 如果沒找到, 則x將包含null.
//通過標簽名查找元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
//通過類名查找元素
var x=document.getElementsByClassName("intro");
2. Dom Html
在 JavaScript 中，document.write() 可用于直接向 HTML 輸出流寫內(nèi)容。
<body>
<script>
document.write(Date());
</script>
</body>
//絕對不要在文檔加載完成之后使用 document.write()谅海。這會覆蓋該文檔担钮。
改變HTML內(nèi)容:
document.getElementById(id).innerHTML=new HTML
改變HTML屬性:
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
改變HTML樣式:
如需改變 HTML 元素的樣式把沼，請使用這個語法：
document.getElementById(id).style.property=new style
<script>
document.getElementById("p2").style.color="blue";
</script>
一些DOm方法
| 方法 | 描述 |
|---|---|
| getElementById() | 返回帶有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含帶有指定標簽名稱的所有元素的節(jié)點列表（集合/節(jié)點數(shù)組）。 |
| getElementsByClassName() | 返回包含帶有指定類名的所有元素的節(jié)點列表。 |
| appendChild() | 把新的子節(jié)點添加到指定節(jié)點周叮。 |
| removeChild() | 刪除子節(jié)點。 |
| replaceChild() | 替換子節(jié)點界斜。 |
| insertBefore() | 在指定的子節(jié)點前面插入新的子節(jié)點仿耽。 |
| createAttribute() | 創(chuàng)建屬性節(jié)點。 |
| createElement() | 創(chuàng)建元素節(jié)點各薇。 |
| createTextNode() | 創(chuàng)建文本節(jié)點项贺。 |
| getAttribute() | 返回指定的屬性值。 |
| setAttribute() | 把指定屬性設(shè)置或修改為指定的值峭判。 |
3. DOM事件
HTML DOM使JavaScript有能力對HTML事件作出反應.
onload 和 onunload 事件:
onload 和 onunload 事件會在用戶進入或離開頁面時被觸發(fā)敬扛。
onload 事件可用于檢測訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載網(wǎng)頁的正確版本朝抖。
onload 和 onunload 事件可用于處理 cookie。
<body onload="checkCookies()">
其它常用事件:
- onchange: 當用戶輸入字段時候調(diào)用, 輸入框文本有變化時候調(diào)用.
- onmouseover : 當用戶鼠標移到HTML元素上時候調(diào)用.
- onmouseout : 當用戶鼠標移出HTML元素時候調(diào)用.
- onmousedown: 當用戶按下鼠標觸發(fā).
- onmouseup : 當用戶松開鼠標觸發(fā).
- onclick : 當用戶完成一個點擊(onmousedown + onmouseup)觸發(fā).
- onfocus: HTML元素獲取焦點時候觸發(fā)的事件.
