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的名称不一定是一模一样的。