當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JSDOM模型的样例
生活随笔
收集整理的這篇文章主要介紹了
JSDOM模型的样例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
參考自：http://www.w3school.com.cn/js/js_htmldom_html.asp
1.查找HTML元素
（1）利用getElementById()方法
實現點擊元素改變文字內容：
<!doctype html> <html><head><title>利用id方法查找</title><meta charset = 'utf-8'></head><body><span id = 'www' onclick = 'change()'>這是要改變的文字</span></body><script>function change(){var pass = document.getElementById('www')pass.innerHTML = '我已經改變你了，哈哈！！！'}</script> </html>（2）利用getElementsByTagName()方法
實現點擊元素改變文字內容：
<!doctype html> <html><head><title>利用TagName方法查找</title><meta charset = 'utf-8'></head><body><p onclick = 'change()'>這是要改變的文字</p><p>不要改變我啊！！！</p></body><script>function change(){var pass = document.getElementsByTagName('p')pass[0].innerHTML = '我已經改變你了，哈哈！！！'pass[1].innerHTML = '我已經改變你了，哈哈！！！'}</script> </html>（3）利用getElementsByClassName()方法
（4）利用getElementsByName()方法
注意：凡是有s的函數，都返回對象的幾個，只有第一個函數返回一個對象。
這些方法參考自：http://blog.csdn.net/ernijie/article/details/51332534
2.改變HTML文檔
（1）改變HTML文檔輸出流：
直接利用write函數
創建了一個覆蓋文檔的例子和一個不會覆蓋當前文檔的例子：
<html><head><title>利用TagName方法查找</title><meta charset = 'utf-8'><script>function recreate(){document.write('糟糕！！！重新創建了一個文檔！！！')}</script></head><body><p οnclick='recreate()'>這是原生段落</p></body><script>document.write('這是新加進來的段落')</script> </html>
（2）改變HTML文檔內容，利用innerHTML
前面的例子也多有用到，也可以參考這個http://blog.csdn.net/f156207495/article/details/78125332
（3）改變HTML屬性
實現圖片src屬性的變換
可以利用document.geetElementById('xx').src來改變
<!doctype html><html><head><title>這是利用js來實現根據不同的日期更新圖片</title><meta charset ='utf-8'></head><body><img src="0" alt="這是圖片" id='weekday'></body><script language="JavaScript"> var MyDate = new Date()var num = MyDate.getDay()var tx = new Array(7)document.write(num)tx[1]='tx_array\\1.jpg'tx[2]='tx_array\\2.jpg'tx[3]='tx_array\\3.jpg'tx[4]='tx_array\\4.jpg'tx[5]='tx_array\\5.jpg'tx[6]='tx_array\\6.jpg'tx[0]='tx_array\\7.jpg'var week = document.getElementById('weekday')week.src = tx[num]</script> </html>3.改變元素的樣式屬性，即CSS
點擊元素，文字變紅。
可以利用document.getElementById.style.某個屬性=***
<!doctype html><html><head><title>改變HTML元素的樣式屬性</title><meta charset ='utf-8'></head><body><p onclick = 'change()'>這是需要改變的文字，看我變紅變紅！！！</p></body><script language="JavaScript"> function change(){document.getElementsByTagName('p')[0].style.color = 'red'}</script> </html>
4.對HTML事件做出反應
前面已經有很多對事件的處理樣例了，這里說一下在JavaScript中增加事件屬性。
<!DOCTYPE html> <html> <head> </head> <body><p>點擊按鈕就可以執行 <em>displayDate()</em> 函數。</p><button id="myBtn">點擊這里</button><script> document.getElementById("myBtn").οnclick=function(){displayDate()}; function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script><p id="demo"></p></body> </html>5.添加或修改HTML元素
添加和刪除HTML元素混合在一個代碼里了：
<!doctype html> <html><head><title>HTML元素的添加和查找</title><meta charset = 'utf-8'></head><body><div id = 'pp'><p id ='p1'>這是一個段落</p><p id = 'p2'>這是第二個段落</p></div></body><script>var para = document.createElement('p');var node = document.createTextNode("這是新段落")para.appendChild(node)var element = document.getElementById('p2')element.appendChild(para)//添加新段落var parent = document.getElementById('pp')var child = document.getElementById('p2')parent.removeChild(child)//刪除段落</script> </html>添加HTML元素要先創建一個p元素，然后創建文本節點，再向p元素添加該文本節點，然后找到一個父節點，再向該父節點中添加該p元素即可。刪除HTML元素要先找到刪除節點所在的父節點，然后再找到需要刪除的節點，然后再用removeChild這個語法來刪除該元素
總結
以上是生活随笔為你收集整理的JSDOM模型的样例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jsDOM用法讲解
- 下一篇： javascript怎么动态更改img标