DOM操作怎樣改變元素的內(nèi)容和屬性？【DOM核心內(nèi)容】

JavaScript 的 DOM 操作可以改變網(wǎng)頁內(nèi)容、結(jié)構(gòu)和樣式，我們可以利用 DOM 操作元素來改變元素里面的內(nèi)容 、屬性等。以下屬性都可以通過 DOM 操作來改變。

改變元素內(nèi)容

element.innerText

element.innerHTML

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

常用元素的屬性操作

1. innerText、innerHTML 改變元素內(nèi)容
2. src、href
3. id、alt、title

樣式屬性操作

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

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

2. element.className 類名樣式操作

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)閉整個二維碼。 利用樣式的顯示和隱藏完成， display:none 隱藏元素 display:block 顯示元素。點(diǎn)擊按鈕，就讓這個二維碼盒子隱藏起來即可。實(shí)現(xiàn)代碼如下：

var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
// 2.注冊事件 程序處理
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 索引號 * 44 就是每個圖片的y坐標(biāo)。實(shí)現(xiàn)循環(huán)精靈圖背景的代碼如下：

var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
// 讓索引號 乘以 44 就是每個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)離開文本框時(shí)，里面的文字顯示。

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

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

2. element.className 類名樣式操作

注意：

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

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

3. className 會直接更改元素的類名，會覆蓋原先的類名。

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