【Web APIS】02-获取元素和事件基础

如何获取元素

DOM在我们实际开发中主要用来操作元素。我们如何来获取页面中的元素呢?获取页面中的元素可以使用以下几种方式

• 根据ID名获取
• 根据标签名获取
• 通过类名获取
• 通过HTML5新增的方法获取
• 特殊元素获取（body，html）

getElementById

通过元素ID获取元素

getElementsByTagName

根据标签名获取元素注意点：

1. 获取元素对象集合是以伪数组形式存储
2. 获取具体某x父元素下的所有y标签（如ol中的li），先给x一个ID名，再Element.getElementsByTagName(‘标签名’)

   <ul>
        <li>生僻字1</li>
        <li>生僻字2</li>
        <li>生僻字3</li>
        <li>生僻字4</li>
    </ul>
    <ol id="ox">
        <li>葫芦娃1</li>
        <li>葫芦娃2</li>
        <li>葫芦娃3</li>
        <li>葫芦娃4</li>
    </ol>
    <script>
        // getElementsByTagName,通过标签名获取元素
        //    返回的是获取过来元素对象的集合，以伪数组形式存储；
        //     无论页面中只有一个li还是没有li，返回的都是伪数组；可遍历
        var lis = document.getElementsByTagName('li');//获取了8个li
        console.log(lis);
        console.log(lis[0]);
            // Element.getElementsByTagName('标签名')
            // 只获取并打印ol中的li元素：给ol一个ID值，获取后，用它的ID.getElementsByTagName获取它的li子元素
        var ox = document.getElementById('ox');
        console.log(ox.getElementsByTagName('li'));
	 </script>

H5新增的方法

1. 根据类名获取元素集合，使用方法与前两种一致
   

2. querySelector返回指定选择器的第一个对象：里面的选择器需要加符号（#ID名，.类名）

3. querySelectorAll返回指定选择器的所有对象集合

获取特殊元素（body，HTML）

事件基础

事件概述

• JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。简单理解︰触发---响应机制。
• 网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

事件三要素

1.事件源；2.事件类型；3.事件处理程序

事件执行的步骤

了解事件三元素后，对应的可以知道事件执行的步骤也分三步：

1. 获取事件源
2. 绑定事件（注册事件）
3. 添加事件处理程序（采取函数赋值形式）

常见的鼠标事件