操作元素
前言
// 從起始位置到終止位置的內容,但它去除html標籤，同時空格和換行也會去掉
element.innerText
// 從起始位置到終止位置的內容,包括html標籤，同時空格和換行會保留
element.innerHtml
區別
- innerText 不識別html標籤 非標準 去除空格和換行
- innerHTML 識別html標籤 W3C標準 保留空格和換行的
設置屬性的值
元素對象.屬性名 = 值
<body>
<button id="wza">爲之奧</button>
<button id="xxy">下新與</button> <br>
<img src="images/wza.jpg" alt="" title="爲之奧">
<script>
var ldh = document.getElementById('wza');
var img = document.querySelector('img');
zxy.onclick = function() {
img.src = 'images/zxy.jpg';
img.title = '張學友思密達';
}
</script>
</body>
表單元素的屬性操作
利用DOM可以操作如下表單元素的屬性：
type、value、checked、selected、disabled
獲取屬性的值
元素對象.屬性名
設置屬性的值
元素對象.屬性名 = 值
表單元素中有一些屬性如：disabled、checked、selected，元素對象的這些屬性的值是布爾型。
樣式屬性操作
我們可以通過 JS 修改元素的大小、顏色、位置等樣式。
常用方式：
1.element.style 行內樣式操作
2.element.className 類名樣式操作
注意:JS 修改style 樣式操作，產生的是行內樣式，CSS權重比較高
方式1：通過操作style屬性
元素對象的style屬性也是一個對象！
元素對象.style.樣式屬性 = 值;
<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。