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

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

改變元素內(nèi)容

element.innerText

element.innerHTML

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

常用元素的屬性操作

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 權重比較高。

案例： 淘寶點擊關閉二維碼

當鼠標點擊二維碼關閉按鈕的時候，則關閉整個二維碼。 利用樣式的顯示和隱藏完成， display:none 隱藏元素 display:block 顯示元素。點擊按鈕，就讓這個二維碼盒子隱藏起來即可。實現(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)設置一組元素的精靈圖背景

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

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

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

當鼠標點擊文本框時，里面的默認文字隱藏，當鼠標離開文本框時，里面的文字顯示。

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

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

2. element.className 類名樣式操作

注意：

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

2. class因為是個保留字，因此使用className來操作元素類名屬性

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

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