webAPI-day-01（获取元素，事件要素，操作元素）

1. 根据ID获取

语法：document.getElementById(id)
 
 
作用：根据ID获取元素对象
 参数：id值，区分大小写的字符串
 返回值：元素对象 或 null

案例代码

 
2019-9-9
 

2. 根据标签名获取元素

语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名') 
 
 
作用：根据标签名获取元素对象
 参数：标签名
 返回值：元素对象集合（伪数组，数组元素是元素对象）

案例代码

 

 
知否知否，应是等你好久11
 
知否知否，应是等你好久22
 
知否知否，应是等你好久33
 
知否知否，应是等你好久44
 
知否知否，应是等你好久55
 
 

 
生僻字
 
生僻字
 
生僻字
 
生僻字
 
生僻字
 
 

注意：1 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历，
2 得到元素对象是动态的
注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。

3.H5新增获取元素方式

image.png

image.png

    
盒子1
    
盒子2
    

        

            
首页
            
产品
        
    
 
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
 

4 获取特殊元素（body，html）

image.png

5 事件基础

5.1事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解： 触发--- 响应机制。

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

5.2事件三要素

• 事件源（谁）：触发事件的元素
• 事件类型（什么事件）： 例如 click 点击事件
• 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

案例代码

    唐伯虎
    

5.3 . 执行事件的步骤

image.png

    
123
    

5.4. 常见的鼠标事件

image.png

6 操作元素

6.1改变元素内容（获取或设置)

image.png

innerText和innerHTML的区别

• 获取内容时的区别：

  innerText会去除空格和换行，而innerHTML会保留空格和换行

• 设置内容时的区别：

  innerText不会识别html，而innerHTML会识别

6.2常用元素的属性操作

image.png

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

6.3表单元素的属性操作

image.png

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

6.4 样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

常用方式

image.png

方式1：通过操作style属性

元素对象的style属性也是一个对象！

元素对象.style.样式属性 = 值。

image.png

方式2：通过操作className属性

元素对象.className = 值;

因为class是关键字，所有使用className。

image.png