DOM基础获取元素+事件基础+操作元素

一.DOM简介

 

DOM，全称“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准。

        在实际开发中，我们有时候需要实现鼠标移到某个元素上面时就改变颜色，或者动态添加元素或者删除元素等。其实这些效果就是通过DOM提供的方法来实现的。

        简单来说，DOM里面有很多方法，我们通过它提供的方法来操作一个页面中的某个元素，例如改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。

---

二.DOM树

 

        每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作

---

三.获取元素

（1）getElementById()

document.getElementById("id名")

• 返回的是一个元素对象

---

（2）getElementsByTagName()

document. getElementsByTagName("标签名")

• 返回的是 获取过来元素对象的集合 以伪数组的形式存储的
• getElementsByTagName()方法中“elements”是一个复数，写的时候别漏掉了“s”

---

H5新增的获取元素方式

（3）getElementsByClassName()

document. getElementsByClassName("类名")

• 根据类名返回元素对象集合 

（4）querySelector()和querySelectorAll()

document.querySelector("选择器");
document.querySelectorAll("选择器");

• querySelector()是根据指定选择器返回第一个元素对象
• querySelectorAll()是根据选择器返回所有的元素对象集合

（5）getElementsByName()

document.getElementsByName("name名")

• getElementsByName()获取的也是一个类数组，如果想要准确得到某一个元素，可以使用数组下标形式来获取。
• getElementsByName()只用于表单元素，一般只用于单选按钮和复选框。

（6）document.title        document.body        document.documentElement

• 返回title        body        html元素对象

---

三.事件基础

1.事件三要素

• 事件源: 事件被触发的对象        按钮
• 事件类型:如何触发 什么事件 比如鼠标点击(onclick) 鼠标经过 键盘按下
• 事件处理程序:通过一个函数赋值的方式完成

2.执行事件的步骤

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

3.常见的鼠标事件

---

四.操作元素

1.改变元素内容

• element.innerText 不识别html标签 非标准 去除空格和换行
• element.innerHTML 能识别html标签 W3C标准 保留空格和换行

这两个属性是可读写的 可以获取元素里面的内容

2.修改元素属性

• 图片src
• 链接href

3.表单元素的属性操作

• value表单里面的值
• disabled禁用
• type表单类型(可以用于显示隐藏密码明文) 

4.修改样式属性

• element.style        行内样式操作(行内样式权重比较高)
• element.className 类名样式操作

---

鼠标经过事件 onmouseover

鼠标离开事件 onmouseout

5.自定义属性操作

获取属性值:

• element.属性        获取内置属性
• element.getAttribute('属性');    获取自定义属性

程序员自己添加的属性我们称为自定义属性

设置属性值:

• element.属性='值'        设置内置属性
• element.setAttribute('属性' , '值');       设置自定义属性

移除属性:

• removeAtrribute('属性')

6.H5自定义属性

获取: