学习笔记10_获取元素和事件基础

如何获取页面元素

• 根据 ID 获取
• 根据标签名获取
• 通过 HTML5 新增的方法获取
• 特殊元素获取

1.根据ID获取

使用 getElementByld() 方法可以获取带ID的元素对象

doucument.getElementByld('id名');

1. 参数 id是大小写敏感的字符串
2. 返回的是一个元素对象
3. 如果当前文档中拥有特定ID的元素不存在则返回null

例子

<div id="time">2019-9-9</div>

<script>
    //因为文档页面从上往下加载，得先有标签，所以script写在标签下面
    var timer = document.getElementById('time');
    console.log(timer);
    //console.dir 打印元素对象，更好的查看里面的属性和方法
	console.dir(timer);
</script>

2.根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合

doucument.getElementsByTagName('标签名');

1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
2. 返回的是获取过来元素对象的集合，以伪数组的形式存储
3. 如果获取不到元素，则返回为空的伪数组

<ul>
    <li>知否知否，应是等你好久</li>
    <li>知否知否，应是等你好久</li>
    <li>知否知否，应是等你好久</li>
    <li>知否知否，应是等你好久</li>
    <li>知否知否，应是等你好久</li>
</ul>
<script>
    //返回的是获取过来元素对象的集合 以伪数组的形式存储
    var lis = document.getElementsByTagName('li');
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }
</script>

3.H5新增的方法

1.根据类名获取

document.getElementsByClassName('类名')根据类名返回元素对象集合

var a = document.getElementsByClassName('nav');

2.querySelector获取

querySelector('选择器')根据选择器返回第一个元素对象

选择器要加上符号

• 类选择器要加上.
• id选择器要加上#

var a = document.querySelector('#nav');
var a = document.querySelector('.nav');

3.querySelectorAll获取

querySelectorAll('选择器')根据选择器返回相应的所有元素对象

选择器要加上符号

• 类选择器要加上.
• id选择器要加上#

var a = document.querySelectorAll('#nav');
var a = document.querySelectorAll('.nav');

4.特殊元素获取

1.获取body元素

返回body对象

var a = document.body;

2.获取html元素

返回html元素对象

var a = document.documentElement;

事件基础

1.事件三要素

事件由三部分组成，事件源，事件类型，事件处理程序

1. 事件源：事件被触发的对象，比如一个按钮，一个图片
2. 事件类型：如何触发，如鼠标点击和键盘回车
3. 事件处理程序：如通过一个函数赋值的方式

2.执行事件的步骤

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

例子

<script>
    // 执行事件步骤
    // 点击div 控制台输出 我被选中了
    // 1. 获取事件源
    var div = document.querySelector('div');
    // 2.绑定事件 注册事件
    // div.onclick 
    // 3.添加事件处理程序 
    div.onclick = function() {
        console.log('我被选中了');
    }
</script>

3.常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发