DOM - 节点选择器和属性选择器

Day21

一、DOM

1. 介绍

   • 概念：DOM（document of module）、
   • DOM不属于BOM
   • window对象身上有提供document对象
   • DOM主要控制页面（html文件），所有的页面操作都需要通过DOM
   • DOM的结构，html结构：属性结构，包含结构，家族结构（父子级，兄弟级）
   • html根元素：head，body
   • DOM树形结构的每个组成部分，都叫节点。所有节点，都是对象

2. 选择器

   • 元素节点选择器（只有元素节点）

     • 直接选择器

       • id选择器：document.getELementById(“id名”);

       • class选择器：document.getElementsByClassName("class名”);

       • tag选择器：document.getElementsByTagName("tag名“)；

       • name选择器：document.getElementsByName(“name名”)；

       • ES5新增的选择器：查询选择器

         • querySelector选择器：document.querySelector(“css选择器”)；
         • querySelectorAll选择器：document.querySelectorAll(“css选择器”)

       • 总结

         • 返回单个元素

           • id, querySelector

         • 返回数组

           • class,tag,name,querySelectorAll

     • 关系选择器：先有基准元素

       • 父子关系

         • 父选子：先拿到父

           var oList = document.querySelector