屬性操作

非表單元素的屬性

href、title、id、src、className

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src);

案例：

? 點擊按鈕，切換img標簽里的圖片

? 點擊按鈕顯示隱藏div

innerHTML和innerText

var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我會生成為標簽</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不會生成為標簽</p>';
console.log(box.innerText);

HTML轉(zhuǎn)義符

""
''
&&
<<    //less than  小于
>>   // greater than  大于
空格    
?&copy;

innerHTML和innerText的區(qū)別
innerText的兼容性處理

表單元素屬性

value 用于大部分表單元素的內(nèi)容獲取(option除外)
type 可以獲取input標簽的類型(輸入框或復(fù)選框等)
disabled 禁用屬性
checked 復(fù)選框選中屬性
selected 下拉菜單選中屬性

案例

給文本框賦值，獲取文本框的值
點擊按鈕禁用文本框
搜索文本框
檢測用戶名是否是3-6位，密碼是否是6-8位，如果不滿足要求高亮顯示文本框
設(shè)置下拉框中的選中項
全選反選

自定義屬性操作

getAttribute() 獲取標簽行內(nèi)屬性
setAttribute() 設(shè)置標簽行內(nèi)屬性
removeAttribute() 移除標簽行內(nèi)屬性
與element.屬性的區(qū)別: 上述三個方法用于獲取任意的行內(nèi)屬性。

樣式操作

使用style方式設(shè)置的樣式顯示在標簽行內(nèi)

var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

注意

通過樣式屬性設(shè)置寬高、位置的屬性類型是字符串，需要加上px

類名操作

修改標簽的className屬性相當(dāng)于直接修改標簽的類名

var box = document.getElementById('box');
box.className = 'clearfix';

案例

開關(guān)燈

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>開燈</title>
  <style>
    .cls {
      background-color: black;
    }
  </style>
</head>
<body id="bd">
<input type="button" value="開/關(guān)燈" id="btn"/>
<script src="common.js"></script>
<script>
  my$("btn").onclick = function () {
    //獲取body標簽
    document.body.className = document.body.className != "cls" ? "cls" : "";
  };
</script>
</body>
</html>