2023-5-9（第五天）

DOM

**全称：**Document Object Model（文档对象模型）

概念

​ DOM将HTML看作一个倒挂的树状结构，树根不是HTML标签，而是document对象

**作用：**可以通过树根对象找到任何一个DOM元素/节点/对象，DOM会将页面上的每个元素、属性、文本、注释等等都视为一个DOM元素/结点/对象

查找元素

通过HTML特点查找

1. 通过ID名查找元素

   var elem=document.getElementById("id名")
   

   特殊：

   • 返回值：找到了则返回当前找到的DOM元素，没找到则返回null
   • 如果出现了多个相同id，则返回第一个
   • id可以不用查找，可以直接通过id名来使用，但是不建议使用id

2. 通过标签名查找元素

   var elem=document.getElementsByTagName("标签名")
   

   特殊：

   • 返回值：找到则返回一个类数组DOM集合，没找到则返回空集合
   • JS只能操作DOM元素，不能直接操作DOM集合
   • 不一定要从document开始查找，也可从父元素开始查找（但是要先找到父元素）

3. 通过class名查找元素

   var elem=document.getElementsByClassName("class名")
   

通过元素之间的关系进行查找

**前提：**要先找到一个元素才可以使用关系网

//父元素
elem.parentNode;  单个元素

//子元素
elem.children;   集合

//第一个儿子
elem.firstElementChild

//最后一个儿子
elem.lastElementChild

//前一个兄弟
elem.previousElementSibling

//后一个兄弟
elem.nextElementSibling

操作元素

操作内容

1. 获取/设置开始标签到结束标签之间的内容（能识别标签）

   //获取内容
   elem.innerHTML;
   
   //设置内容
   elem.innerHTML="新内容"
   

2. 获取/设置开始标签到结束标签之间的纯文本（不能识别标签）

   //获取内容
   elem.innerText;
   
   //设置内容
   elem.innerText="新内容"
   

3. 获取/设置input的内容

   //获取内容
   input.value;
   
   //设置内容
   input.value='新内容'
   

操作属性

//获取属性值
elem.getAttribute("属性名")
//设置属性值
elem.setAttribute("属性名","属性值")

简化版

//获取属性值
elem.属性名
//设置属性值
elem.属性名="属性值"

缺陷：
	1、class必须写成className
	2、只能操作标准属性，不能操作自定义属性

操作样式

//获取样式
elem.style.css属性名;

//设置样式
elem.style.css属性名="属性值";

特点：
	1、css属性有横线的地方要去掉横线，变为小驼峰命名法
	2、只能操作内联样式

绑定事件

elem.on事件名=function(){操作}

关键字this：只能在事件中使用

• 如果单个元素绑定事件，则this指的就是该元素
• 如果多个元素绑定事件，则this指的是当前触发事件的元素