JavaScript的 DOM 操作可以改變網頁內容、結構和樣式，我們可以利用 DOM 操作元素來改變元素里面的內容、屬性等。（注意：這些操作都是通過元素對象的屬性實現的）
innerText改變元素內容
<body>
<button>顯示當前系統時間</button>
<div>某個時間</div>
<p>1123</p>
<script>
// 當我們點擊了按鈕， div里面的文字會發生變化
// 1. 獲取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注冊事件
btn.onclick = function() {
// div.innerText = '2019-6-6';
div.innerHTML = getDate();
}
function getDate() {
var date = new Date();
// 我們寫一個 2019年 5月 1日 星期三
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
</script>
</body>
innerText和innerHTML的區別
-
獲取內容時的區別：
innerText會去除空格和換行，而innerHTML會保留空格和換行
-
設置內容時的區別：
innerText不會識別html，而innerHTML會識別
案例代碼
<body>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
// innerText 和 innerHTML的區別
// 1. innerText 不識別html標簽 非標准 去除空格和換行
var div = document.querySelector('div');
// div.innerText = '<strong>今天是：</strong> 2019';
// 2. innerHTML 識別html標簽 W3C標准 保留空格和換行的
div.innerHTML = '<strong>今天是：</strong> 2019';
// 這兩個屬性是可讀寫的 可以獲取元素里面的內容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>
3. 常用元素的屬性操作
1. innerText、 innerhTML 改變元素內容
2. src、href
3. id、alt、title
獲取屬性的值
元素對象.屬性名
設置屬性的值
元素對象.屬性名 = 值
案例代碼
<body>
<button id="ldh">劉德華</button>
<button id="zxy">張學友</button> <br>
<img src="images/ldh.jpg" alt="" title="劉德華">
<script>
// 修改元素屬性 src
// 1. 獲取元素
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
// 2. 注冊事件 處理程序
zxy.onclick = function() {
img.src = 'images/zxy.jpg';
img.title = '張學友思密達';
}
ldh.onclick = function() {
img.src = 'images/ldh.jpg';
img.title = '劉德華';
}
</script>
</body>
獲取屬性的值
元素對象.屬性名
設置屬性的值
元素對象.屬性名 = 值
表單元素中有一些屬性如：disabled、checked、selected，元素對象的這些屬性的值是布爾型。
案例代碼
<body>
<button>按鈕</button>
<input type="text" value="輸入內容">
<script>
// 1. 獲取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. 注冊事件 處理程序
btn.onclick = function() {
// 表單里面的值 文字內容是通過 value 來修改的
input.value = '被點擊了';
// 如果想要某個表單被禁用 不能再點擊 disabled 我們想要這個按鈕 button禁用
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函數的調用者 btn
}
</script>
</body>
4. 樣式屬性操作
我們可以通過 JS 修改元素的大小、顏色、位置等樣式。
常用方式
1. element. style 行內樣式操作
2. element. className 類名樣式操作
方式1：通過操作style屬性
元素對象的style屬性也是一個對象！
元素對象.style.樣式屬性 = 值;
注意:
1.JS里面的樣式采取駝峰命名法比如fontSize、backgroundColor
2.JS修改style樣式操作,產生的是行內樣式，CSS權重比較高
案例代碼
<body>
<div></div>
<script>
// 1. 獲取元素
var div = document.querySelector('div');
// 2. 注冊事件 處理程序
div.onclick = function() {
// div.style里面的屬性 采取駝峰命名法
this.style.backgroundColor = 'purple';
this.style.width = '250px';
}
</script>
</body>
方式2：通過操作className屬性
元素對象.className = 值;
因為class是關鍵字，所有使用className。
主意:
1.如果樣式修改較多，可以采取操作類名方式更改元素樣式。
2. class因為是個保留字，因此使用className來操作元素類名屬性 className
會直接更改元素的類名，會覆蓋原先的類名。
案例代碼
<body>
<div class="first">文本</div>
<script>
// 1. 使用 element.style 獲得修改元素樣式 如果樣式比較少 或者 功能簡單的情況下使用
var test = document.querySelector('div');
test.onclick = function() {
// this.style.backgroundColor = 'purple';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';
// 2. 我們可以通過 修改元素的className更改元素的樣式 適合於樣式較多或者功能復雜的情況
// 3. 如果想要保留原先的類名，我們可以這么做 多類名選擇器
// this.className = 'change';
this.className = 'first change';
}
</script>
</body>
5. 小結
