DOM文檔對象模型(Document object model)
-
網(wǎng)頁被加載是瀏覽器都會自動創(chuàng)建DOM如下：
Screenshot from 2017-05-31 23-19-00.png
Javascript DOM的主要用途
- JavaScript DOM能夠改變頁面中的所有 HTML 元素
- JavaScript DOM能夠改變頁面中的所有 HTML 屬性
- JavaScript DOM能夠改變頁面中的所有 CSS 樣式
- JavaScript DOM能夠?qū)撁嬷械乃惺录龀龇磻?yīng)
改變頁面中的HTML元素
- 查找HTML元素
| 方法 | 描述 |
|---|---|
| getElementsByName | 通過標(biāo)簽的name屬性查找(可用于單選按鈕) |
| getElementsByClassName | 通過類名查找 |
| getElementsByTagName() | 通過標(biāo)簽名查找 |
| getElementById | 通過ID屬性查找 |
eg:同下
改變元素
- 通過appendchild方法
添加節(jié)點
<div id="div1">
<p>**************</p>
</div>
<div id="div2">
<a href="http:www.baidu.com">百度</a>
<input type="text" placeholder="請輸入文本">
<input type="button" value="提交" onclick="test()">
</div>
<script >
function test() {
var element=document.getElementById("div1");
var inner_div=document.createElement("div");//創(chuàng)建元素節(jié)點
var inner_text=document.createTextNode("#######");//創(chuàng)建文本節(jié)點
inner_div.appendChild(inner_text)
element.appendChild(inner_div);
}
</script>-
刪除節(jié)點
function test() { var element=document.getElementById("div1"); alert(1); p_node=document.getElementsByTagName("p"); element.removeChild(p_node[0]); }
- 通過innerHTML方法
-
修改HTML屬性
function test() { var node=document.getElementsByTagName("input"); node[0].type="radio"; }
function test() {
var node=document.getElementById("div1");
node.innerHTML="<i>帥</i>"
} -
- 修改CSS屬性
function test() {
var node=document.getElementById("div1");
node.style.backgroundColor="red";
} - 事件監(jiān)聽請見下一篇博客
