js中获取页面元素

     

  <ul>
    <li>1A</li>
    <li class="c1 c2">2B</li>
    <li id="id3">3C</li>
    <li class="c1">4D</li>
    <li>5F</li>
  </ul>

- js中对页面标签的分类

          + 非常规元素

            - document.documentElement: html标签

            - document.head: head标签

            - document.body: body标签

            - document.scripts: 所有script标签          

            - document.title: 操作页面标题

  // 非常规元素
    console.log( document.documentElement ) // html
    console.log( document.head ) // head
    console.log( document.body ) // body
    console.log( document.scripts ) // 页面的所有script
    console.log( document.title ) // 'Leon'
    document.title = 'DOM'

          + 常规元素(获取常规元素)            

            1. 通过 id 获取页面元素

              - 语法: document.getElementById(id值)

              - 返回值:

                + 返回 页面中对应 id 的标签元素

                + 如果页面没有对应的id 则返回null

 // 1. 通过id
    var ele = document.getElementById('id3');
    var ele = document.getElementById('id666');
    console.log( ele )

            2. 通过 类名 获取页面元素

              - 语法: document.getElementsByClassName(类名)

              - 返回值: 一定是一个伪数组

                + 返回 页面中对应 类名 的标签元素 组成的伪数组

                + 如果页面没有对应的类名 则返回空的伪数组

// 2. 通过class
    var eles = document.getElementsByClassName('c1');
    var eles = document.getElementsByClassName('c2');
    var eles = document.getElementsByClassName('c3');
    console.log( eles )

            3. 通过 标签名 获取页面元素

              - 语法: document.getElementsByTagName(标签名)

              - 返回值: 一定是一个伪数组

                + 返回 页面中对应 标签名 的标签元素 组成的伪数组

                + 如果页面没有对应的标签名 则返回空的伪数组

// 3. 通过标签名
    var eles = document.getElementsByTagName('li');
    var eles = document.getElementsByTagName('ul');
    var eles = document.getElementsByTagName('div');
    console.log( eles )

            4. 通过 选择器 获取页面元素

              - 语法: document.querySelector(选择器)  // 此处的选择器和css中一样

              - 返回值:

                + 返回 页面中对应 选择器 的第一个标签元素

                + 如果页面没有对应 选择器的标签 则返回null

 // 4. 通过选择器
     var ele = document.querySelector('#id3');
    var ele = document.querySelector('.c1');
    var ele = document.querySelector('ul>li');
    var ele = document.querySelector('li');
    var ele = document.querySelector('div');
    console.log( ele )

            5. 通过 选择器 获取页面元素

              - 语法: document.querySelectorAll(选择器)

              - 返回值: 一定是一个伪数组

                + 返回 页面中对应 选择器 的所有标签元素 组成的伪数组

                + 如果页面没有对应的标签名 则返回空的伪数组

// 5. 通过选择器
     var eles = document.querySelectorAll('.c1');
     var eles = document.querySelectorAll('#id3');
     var eles = document.querySelectorAll('ul li');
     var eles = document.querySelectorAll('span');
     console.log( eles )