document object model文档对象模型
有一些元素是不需要获取就可以快速使用的。

  1. body: document.body
  2. html: document.documentElement
  3. head: document.head
  4. title: document.title // 这不是元素 而是一个属性
  5. forms: 这个文档中所有form的集合

13.1 获取元素

在JS中操作元素，必须要先获取到元素

  • 根据ID获取元素
    • document.getElementById(id)该方法用于根据ID获取元素 ID是HTML标签的属性 应当具备唯一性
    • 返回值：如果有这个元素 就可以得到该元素对象。如果没有，就是null。
  • 根据标签名获取元素
    • document.getElementsByTagName(tagName)
    • 返回值： 集合对象(类数组对象)
  • 根据name属性获取元素
    • document.getElementsByName(name)
    • 返回值： 集合对象(类数组对象)
  • 根据选择器获取元素
    • document.querySelector(selector)
    • 返回值： 元素对象

  • 根据选择器获取多个元素

    • document.querySelectorAll(selector);
    • 返回值： 集合对象(类数组对象)

      13.2 元素属性

      可以分为HTML标准属性与非标准属性(自定义属性)

  • 标准属性 指的是由W3C制定的属性

    • 通用属性 所有标签都有的属性
      • id
      • class
      • style
      • title
    • 特有属性 只有一个或者几个标签有的属性
      • name
      • type
      • checked

  • 非标准属性 指的是由程序员自己定义的属性

    • 通常以data+开头

      13.3元素的基本操作

  • 标准属性可以直接通过元素打点获取 打点修改 (或者使用方括号语法也可以) 注意避讳关键字

    1. // 避讳JS中的class关键字
    2. dom.className = "abc";
    3. // 读取name属性值
    4. var str = input.name;

  • 非标准属性

    • setAttribute(propName, propValue); 设置、修改属性值
      • propName 属性名
      • propValue 属性值
    • getAttribute(propName) 获取属性值
      • propName 属性名
    • removeAttribute(propName) 移除属性(从HTML标签身上移除)
      • propName 表示属性名