DOM操作怎樣改變?cè)氐膬?nèi)容和屬性？【DOM核心內(nèi)容】

JavaScript 的 DOM 操作可以改變網(wǎng)頁(yè)內(nèi)容、結(jié)構(gòu)和樣式，我們可以利用 DOM 操作元素來(lái)改變?cè)乩锩娴膬?nèi)容 、屬性等。以下屬性都可以通過(guò) DOM 操作來(lái)改變。

改變?cè)貎?nèi)容

element.innerText

element.innerHTML

起始位置到終止位置的全部?jī)?nèi)容，包括 html 標(biāo)簽，同時(shí)保留空格和換行。

常用元素的屬性操作

1. innerText、innerHTML 改變?cè)貎?nèi)容
2. src、href
3. id、alt、title

樣式屬性操作

我們可以通過(guò) JS 修改元素的大小、顏色、位置等樣式。

1. element.style     行內(nèi)樣式操作

2. element.className 類(lèi)名樣式操作

JS 里面的樣式采取駝峰命名法 比如 fontSize、 backgroundColor，JS 修改 style 樣式操作，產(chǎn)生的是行內(nèi)樣式，CSS 權(quán)重比較高。

案例： 淘寶點(diǎn)擊關(guān)閉二維碼

當(dāng)鼠標(biāo)點(diǎn)擊二維碼關(guān)閉按鈕的時(shí)候，則關(guān)閉整個(gè)二維碼。 利用樣式的顯示和隱藏完成， display:none 隱藏元素 display:block 顯示元素。點(diǎn)擊按鈕，就讓這個(gè)二維碼盒子隱藏起來(lái)即可。實(shí)現(xiàn)代碼如下：

var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
// 2.注冊(cè)事件 程序處理
btn.onclick = function() {
box.style.display = 'none';

案例： 循環(huán)精靈圖背景

可以利用 for 循環(huán)設(shè)置一組元素的精靈圖背景

首先精靈圖圖片排列有規(guī)律的，利用for循環(huán)。修改精靈圖片的，背景位置background-position。剩下的就是考驗(yàn)?zāi)愕臄?shù)學(xué)功底了。讓循環(huán)里面的 i 索引號(hào) * 44 就是每個(gè)圖片的y坐標(biāo)。實(shí)現(xiàn)循環(huán)精靈圖背景的代碼如下：

var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
// 讓索引號(hào) 乘以 44 就是每個(gè)li 的背景y坐標(biāo) index就是我們的y坐標(biāo)
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}

案例：顯示隱藏文本框內(nèi)容

當(dāng)鼠標(biāo)點(diǎn)擊文本框時(shí)，里面的默認(rèn)文字隱藏，當(dāng)鼠標(biāo)離開(kāi)文本框時(shí)，里面的文字顯示。

要實(shí)現(xiàn)隱藏文本框內(nèi)容，首先表單需要2個(gè)新事件，獲得焦點(diǎn) onfocus  失去焦點(diǎn) onblur。如果獲得焦點(diǎn)， 判斷表單里面內(nèi)容是否為默認(rèn)文字，如果是默認(rèn)文字，就清空表單內(nèi)容。如果失去焦點(diǎn)， 判斷表單內(nèi)容是否為空，如果為空，則表單內(nèi)容改為默認(rèn)文字。
我們可以通過(guò) JS 修改元素的大小、顏色、位置等樣式，實(shí)現(xiàn)文本隱藏，示例代碼如下：

1. element.style     行內(nèi)樣式操作

2. element.className 類(lèi)名樣式操作

注意：

1. 如果樣式修改較多，可以采取操作類(lèi)名方式更改元素樣式。

2. class因?yàn)槭莻€(gè)保留字，因此使用className來(lái)操作元素類(lèi)名屬性

3. className 會(huì)直接更改元素的類(lèi)名，會(huì)覆蓋原先的類(lèi)名。

操作元素是 DOM 核心內(nèi)容，以下列舉幾類(lèi)常見(jiàn)操作的實(shí)現(xiàn)方法：