DOM中常用的选择器

选择器

- DOM的概念

• DOM，文档对象模型，document
• document表示文档，页面，整个网页
• 所有的页面操作都需要找document
• 因为document表示页面，页面是由html组成的，所以document的结构就是html的结构
• html的结构：树形结构，家族结构
• 家族的所有组成部分，都叫节点
  • 元素节点
  • 属性节点
  • 文本节点
  • 注释节点
  • 根节点
• js做行为，和页面交互，元素，哪个？选择器，改变内容，样式，属性

- 选择器

• 元素节点选择器

  • id：就算有多个也是只选择一个，为单个对象
    • document.getElementById("id名")
  • class：就算只有一个，也是数组的形式，数组内是具体的对象
    • document.getElementsByClassName("class名")
  • tagName
    • document.getElementsByTagName("元素名")
  • name
    • document.getElementsByClassName("属性名")
  • query:支持css选择器写法
    • document.querySelector(".cont")
  • queryAll:支持css选择器写法
    • document.querySelectorAll(".cont")

• 关系选择器：必须需要一个参考元素

  • 父选子元素
  • 子选父元素
  • 第一个子元素
  • 最后一个子元素
  • 兄元素
  • 弟元素

	 <div class="box">
        <div class="xbox">
            <h2>二级标题1</h2>
            <h2 class="start">二级标题2