Element對象 常用屬性與常用方法

常用屬性

• .children 子元素列表
• .childElementCount 子元素數量
• .firstElementChild 第一個子元素
• .lastElementChild 最後一個子元素
• .classList 類名列表（對象）
• .className 類名（字元串）
• .id 元素id
• .attributes 所有顯性屬性
• .innerHTML 元素內部的HTML標記
• .outerHTML 包含元素在內的HTML標記
• .clientWidth 內容區 + padding的寬度
• .clientHeight 內容區 + padding的高度
• .scrollHeight 元素中可以滾動的高度
• .scrollWidth 元素中可以滾動的寬度
• .scrollTop 元素中的內容已經向上滾出去多少
• .scrollLeft 元素中的內容已經向左滾出去多少

常用方法

• .getAttribute(屬性名) 獲取屬性的值
• .setAttribute(屬性名，屬性值) 獲取屬性的值
• .getAttributeNames() 列出所有屬性
• .hasAttribute(屬性名) 是否擁有屬性
• .hasAttributes() 是否擁有至少一條屬性
• .removeAttribute(屬性名) 刪除一條屬性
• .addEventListener(事件名稱，回調函數) 監聽一個事件
• .getElementById(id) 在當前元素下通過id獲取元素
• .getElementsByClassName(class) 在當前元素下通過class獲取元素
• .getElementsByTagName(標簽名) 在當前元素下通過元素名稱獲取元素
• .querySelector(選擇器) 在當前元素下通過CSS選擇器來獲取一個元素
• .querySelectorAll(選擇器) 在當前元素下通過CSS選擇器來獲取多個元素

• FAQ

  attribute和property有什麼區別？

  我們都知道HTML標簽可以填寫屬性

  <a href="http://biaoyansu.com" id="biao">表</a>

  此處的href是attribute（顯性屬性）

  var biao = document.getElementById('biao');

  biao.href中的.href是property（隱性屬性）

  註意，property和attribute的名稱不一定是一模一樣的。