屬性操作

1 非表單元素的屬性

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轉義符

" "

‘ '

& &

< <    //less than  小於

> >   // greater than  大於

空格     

innerHTML和innerText的區別

innerText的兼容性處理

2 表單元素屬性

value 用於大部分表單元素的內容獲取(option除外)

type 可以獲取input標籤的類型(輸入框或複選框等)

disabled 禁用屬性

checked 複選框選中屬性

selected 下拉菜單選中屬性

3 案例

給文本框賦值，獲取文本框的值

點擊按鈕禁用文本框

搜索文本框

檢測用戶名是否是3-6位，密碼是否是6-8位，如果不滿足要求高亮顯示文本框

設置下拉框中的選中項

全選反選

4 自定義屬性操作

getAttribute() 獲取標籤行內屬性

setAttribute() 設置標籤行內屬性

removeAttribute() 移除標籤行內屬性

與element.屬性的區別: 上述三個方法用於獲取任意的行內屬性。

5 樣式操作

使用style方式設置的樣式顯示在標籤行內

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

注意

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

6 類名操作

修改標籤的className屬性相當於直接修改標籤的類名

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

7 案例

開關燈

點擊按鈕變色

圖片切換二維碼案例

當前輸入的文本框高亮顯示

點擊按鈕改變div的大小和位置

列表隔行變色、高亮顯示

京東商品展示

tab選項卡切換