DOM编程系列之Document对象个人分享

DOM

Document对象是什么

  • 在DOM里document对象可以代表页面
  • document对象可以得到HTML页面全部内容
  • document对象的原型是指向Node的

示例代码:


Document对象的继承链


getElementById()方法

  • 以查找ID属性的方式来定位指定元素的位置
  • 使用getElementById()方法只能查找到一个元素,因为ID属性是唯一的不能重复

示例代码:




getElementsByName()方法

  • name属性不是唯一 - 得到的结果可能是多个,也可能是一个
  • 会得到全部带有 name属性 的元素,以类数组表示得到的元素(NodeList类型)

示例代码:












getElementsByClassName()方法

  • 使用class属性的值来查找指定元素的位置
  • 会得到全部带有 class属性 的元素,以类数组表示得到的元素(HTMLCollection类型)

示例代码:











querySelector()方法与querySelectorAll()方法

  • querySelector()方法 - 返回的是第一个匹配的元素
  • querySelectorAll()方法 - 返回的NodeList集合

示例代码:










NodeList集合

  • 动态集合与静态集合

    • 动态集合(HTMLCollection) - 根据HTML元素变化而变化

      • 该集合的length属性值是变化的 - 影响后续的操作
    • 静态集合(NodeList) - 不会根据HTML元素变化而变化

      • 如果执行删除操作 - 该集合中可能存在已不存在的元素

示例代码:









创建元素节点

  • 用于创建新的元素节点

示例代码:


创建文本节点

  • 用于创建新的文本节点

示例代码:



创建属性节点

  • 用于创建属性节点
  • 注意 - 该方法只能接收一个参数,做为属性节点的属性名,属性值使用 nodeValue 创建

示例代码:



你可能感兴趣的:(dom)