DOM获取元素的方法、事件基础、操作元素

一、获取元素的方法

1.通过id获取

代码为document.getElementById('id名')

比如         

        
2022-2-10

        

2.通过标签名获取

代码：document.getElementsByTagName('标签名')

返回的是伪数组，查找的是所有该标签的元素

3.h5新增的属性，通过类名获得元素

代码：document.getElementsByClassName('类名')

返回的是由所有该类名的元素构成的伪数组，在使用时必须要指明是第几个元素

如

4.document.querySelector( )

也是H5新增的属性，返回的是第一个元素

5.document.querySelectorAll（ ）

返回的是集合，

支持后代选择器

使用时要写明具体的元素，就是 索引号

二、事件基础

1.事件的三要素

        事件源 （谁）

        事件类型 （什么事件）

        事件处理程序 （做啥）

2.事件的执行步骤

        获取事件源

        注册事件（绑定事件）

        添加事件处理程序（采取函数赋值形式）

比如

    冰墩墩
    

3.常见的鼠标点击事件

三、操作元素 

1.改变元素内容

有两种方式

（1）element.innerText

是从起始标签到结束标签的内容，会去掉html标签，不保留换行或空格

（2）element.innerHTML

起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

同时添加的html标签也可以执行

2.常见的元素属性操作

        innerText、innerHTML 改变元素内容

        src、href

         id、alt、title

3.表单元素的属性操作

属性有type、value、checked、selected、disabled

input框里面的内容修改用value

4.样式属性操作

有两种，

（1）element.style 是给添加行内元素，

如

    

    


    

//使用步骤就是先获得元素，再使用

（2）element.className 类名样式操作

先写好css类

就是给标签添加类名，需要注意的是element.className会覆盖原来的类名，需要先获取原来的类名再加上新的类名

如