1·、結(jié)構(gòu)
HTML DOM (文檔對象模型)
當(dāng)網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model）。?
2、核心關(guān)注的內(nèi)容：“元素”，“屬性”，“修改樣式”，“事件反應(yīng)”。==>四要素
- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠?qū)撁嬷械乃惺录龀?/span>反應(yīng)
?3.操作的內(nèi)容
javascript操作的內(nèi)容就是上面的四要素
<p id="demo">文章標(biāo)題</p>
4.獲取元素的方法,操作元素前，需要先獲取元素
[以前的方法，現(xiàn)在有新的css類選擇的方法]
需要操作 HTML 元素，您必須首先找到該元素。有三種方法來做這件事：
1.通過 id 找到 HTML 元素
var x=document.getElementById("intro");?
2.通過標(biāo)簽名找到 HTML 元素
var y=x.getElementsByTagName("p");?
?3.通過類名找到 HTML 元素
var x=document.getElementsByClassName("intro");?
?
5.修改內(nèi)容，獲取元素后，修改元素內(nèi)容
第4步是獲取元素，如果修改，修改的是什么呢？
一個元素有可以修改的內(nèi)容有；
“元素內(nèi)容”，“屬性”，“修改樣式”，“事件反應(yīng)”。
5.1修改元素內(nèi)容：元素內(nèi)容”
document.getElementById("p1").innerHTML="新文本!";
5.2修改“”屬性“”?“屬性”
document.getElementById("image").src="landscape.jpg";
5.3修改樣式?修改樣式”
語法：
document.getElementById(id).style.property=新樣式
document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger";
5.4修改事件反應(yīng)??事件反應(yīng)”。
HTML DOM 允許我們通過觸發(fā)事件來執(zhí)行代碼
- 當(dāng)用戶點擊鼠標(biāo)時
- 當(dāng)網(wǎng)頁已加載時
- 當(dāng)圖像已加載時
- 當(dāng)鼠標(biāo)移動到元素上時
- 當(dāng)輸入字段被改變時
- 當(dāng)提交 HTML 表單時
- 當(dāng)用戶觸發(fā)按鍵時
...........................
<h1 id="id1">我的標(biāo)題 1</h1>
<button type="button"
οnclick="document.getElementById('id1').style.color='red'">
點我!</button>
?
文章來源：http://www.zghlxwxcb.cn/news/detail-678238.html
?
文章來源地址http://www.zghlxwxcb.cn/news/detail-678238.html
到了這里，關(guān)于html-dom核心內(nèi)容--四要素的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
