當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

JSDOM模型的样例

發(fā)布時(shí)間：2025/3/19 javascript 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 JSDOM模型的样例小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

參考自：http://www.w3school.com.cn/js/js_htmldom_html.asp

1.查找HTML元素

（1）利用getElementById()方法

實(shí)現(xiàn)點(diǎn)擊元素改變文字內(nèi)容：

<!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 = '我已經(jīng)改變你了，哈哈！！！'}</script> </html>

（2）利用getElementsByTagName()方法

實(shí)現(xiàn)點(diǎn)擊元素改變文字內(nèi)容：

<!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 = '我已經(jīng)改變你了，哈哈！！！'pass[1].innerHTML = '我已經(jīng)改變你了，哈哈！！！'}</script> </html>

（3）利用getElementsByClassName()方法

（4）利用getElementsByName()方法

注意：凡是有s的函數(shù)，都返回對(duì)象的幾個(gè)，只有第一個(gè)函數(shù)返回一個(gè)對(duì)象。

這些方法參考自：http://blog.csdn.net/ernijie/article/details/51332534

2.改變HTML文檔

（1）改變HTML文檔輸出流：

直接利用write函數(shù)

創(chuàng)建了一個(gè)覆蓋文檔的例子和一個(gè)不會(huì)覆蓋當(dāng)前文檔的例子：

<html><head><title>利用TagName方法查找</title><meta charset = 'utf-8'><script>function recreate(){document.write('糟糕！！！重新創(chuàng)建了一個(gè)文檔！！！')}</script></head><body><p οnclick='recreate()'>這是原生段落</p></body><script>document.write('這是新加進(jìn)來(lái)的段落')</script> </html>

（2）改變HTML文檔內(nèi)容，利用innerHTML

前面的例子也多有用到，也可以參考這個(gè)http://blog.csdn.net/f156207495/article/details/78125332

（3）改變HTML屬性

實(shí)現(xiàn)圖片src屬性的變換

可以利用document.geetElementById('xx').src來(lái)改變

<!doctype html><html><head><title>這是利用js來(lái)實(shí)現(xiàn)根據(jù)不同的日期更新圖片</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.改變?cè)氐臉邮綄傩?#xff0c;即CSS

點(diǎn)擊元素，文字變紅。

可以利用document.getElementById.style.某個(gè)屬性=***

<!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.對(duì)HTML事件做出反應(yīng)

前面已經(jīng)有很多對(duì)事件的處理樣例了，這里說(shuō)一下在JavaScript中增加事件屬性。

<!DOCTYPE html> <html> <head> </head> <body><p>點(diǎn)擊按鈕就可以執(zhí)行 <em>displayDate()</em> 函數(shù)。</p><button id="myBtn">點(diǎn)擊這里</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元素混合在一個(gè)代碼里了：

<!doctype html> <html><head><title>HTML元素的添加和查找</title><meta charset = 'utf-8'></head><body><div id = 'pp'><p id ='p1'>這是一個(gè)段落</p><p id = 'p2'>這是第二個(gè)段落</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元素要先創(chuàng)建一個(gè)p元素，然后創(chuàng)建文本節(jié)點(diǎn)，再向p元素添加該文本節(jié)點(diǎn)，然后找到一個(gè)父節(jié)點(diǎn)，再向該父節(jié)點(diǎn)中添加該p元素即可。

刪除HTML元素要先找到刪除節(jié)點(diǎn)所在的父節(jié)點(diǎn)，然后再找到需要?jiǎng)h除的節(jié)點(diǎn)，然后再用removeChild這個(gè)語(yǔ)法來(lái)刪除該元素

總結(jié)

以上是生活随笔為你收集整理的JSDOM模型的样例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。