DOM学习---获取节点绑定事件
这里写自定义目录标题
- DOM
-
- 1.1 什么是DOM
- 1.2 DOM树
- 1.3获取节点
-
- 1.3.1 根据ID获取
- 1.3.2 根据标签名获取元素
- 1.3.3 H5新增获取元素的方式
- 样式和类
-
-
- 1.1元素样式
- 1.2类名操作
-
- 事件机制
-
-
- 1.1 事件概述
- 1.2事件3要素
- 1.3 常见的事件
-
- 1.3.1 鼠标事件
- 1.3.2 表单（form)元素事件
- 1.3.3 键盘事件
- 1.3.4 Document事件
- 1.4 删除事件 ---- 赋值 null
-
DOM
1.1 什么是DOM
文档对象模型（Document Object Model 简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或xhtml）的标准编程接口
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式
1.2 DOM树
DOM树又称文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前页面。
- 文档： 一个页面就是一个文档，DOM中使用 document 表示。
- 节点：网页中的所有内容，在文档中都是节点（标签、属性、注释等），使用node表示
- 标签节点：网页中的所有标签，通常称为元素节点，又简称为”元素“，使用element表示
1.3获取节点
我们想要操作页面上的某个部分元素，需要先获取到该部分对应的元素，在对其进行操作
1.3.1 根据ID获取
语法： document.getElementById(id)
作用： 根据 id 获取元素对象
参数： id的值，注意：区分大小写
返回值： 元素对象 或 nul
代码案例
<body>
<div id="time">四岁爱上了她</div>
<script>
//获取 time 元素
var timers = document.getElementById('time');
console.log(timers);
console.log(typeof timers);
</script>
</body>
1.3.2 根据标签名获取元素
语法：document.getElementsByTagName('标签名’） 或者 element.getElementsByTagName('标签名')
注意： element 是写 标签名（div等等）或者 你自己写的 class名 或者 ID名，不要傻乎乎的把 element 写上去了
参数： 标签名
返回值： 元素对象集合（这是个伪数组，）
代码演示
<body>
<ul>
<li>四岁爱上了她1</li>
<li>四岁爱上了她2</li>
<li>四岁爱上了她3</li>
<li>四岁爱上了她4</li>
<li>四岁爱上了她5</li>
</ul>
<ul id="nav">
<li>云青1</li>
<li>云青1</li>
<li>云青1</li>
<li>云青1</li>
</ul>
<script>
//获取 li 元素
//这个使用 document.getElementByTagName(参数)
var lis = document.getElementByTagName('li');
//把 li 打印出
console.log(lis);
//打印 lis 第一个元素
console.log(lis[i]);
//想要依次把元素对象打印出可以采取遍历的方式
for(var i=0; i < lis.length;i++){
console.log(lis[i]);
}
//这个使用 element.getElementByTagName(参数)
//先通过 ID 获取 ul 的元素
var nav = document.getElementById('nav');
//在获取 li 元素
var nacLi = nav.getElementByTagName('li')
//打印 nacLi 元素
console.log(nacLi);
</script>
</body>
1.3.3 H5新增获取元素的方式
1.document.getElementsByClassName('类名') //根据类名返回元素集合， 这个 不需要添加符号
2.document.querySelector('选择器') //根据指定选择器返回第一个元素对象
3.document.querySelectorAll('选中器') //根据指定的选择器返回所有元素对象
注意： document.querySelectou / querySelectorAll 后面的参数是需要带符号的
由于随着浏览器的更新，我们获取元素的方法基本使用 document.querySelectou / querySelectorAll 这两种方法，根据ID什么的很少使用了
代码演示
<body>
<div class="box”>盒子1</div>
<div class="box”>盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
//1. getElementByClassName 根据类名获取元素集合 这个不需要加符号
var boxs = document.getElementByClassName('box')
console.log(boxs);
//2. querySelector 根据指定选择器返回第一个元素对象 切记 里面的选择器需要加符号 .box #nav 标签不需要加符号，比如 div li 之类的
var firstbox = document.querySelector('.box');
console.log(firstbox);
var nav = document.querySelector('#nav');
console.log(nav);
// 参数是标签的不需要 跟写css样式一样，标签不需要加符号
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);
</script>
</body>
样式和类
我们可以通过JS修改元素的大小、颜色、位置等样式。
常用样式
1.element.style 行内样式操作
2.element.className 类名样式操作
3.element.classList 类名样式操作
1.1元素样式
- elem.style 属性是一个对象，它对应于 “style” 特性中所写的内容
- elem.style.width = “100px” 的效果等价于我们在 style 里面写的 width : 100px.
代码演示
<body>
<script>
// 无效！
document.body.style.margin = 20;
alert(document.body.style.margin); // ''（空字符串，赋值被忽略了）
// 现在添加了 CSS 单位（px）— 生效了
document.body.style.margin = '20px';
alert(document.body.style.margin); // 20px
</script>
</body>
<body>
<div class="box">
淘宝二维码
<img src="../自己练习/img/tao.png" alt="">
<i class='guannBi'>X</i>
</div>
<script>
//要求：点击❌号，二维码关闭
var box = document.querySelector('.box');
var guanBi = document.querySelector('.guannBi');
guanBi.onclick = function(){
box.style.display = 'none';
}
</script>
</body>
1.2类名操作
- className
- classList
就是在 css 文件里写好 类名的样式，然后添加在 js 文件里
代码演示
className
<style>
.sisui{
background-color: pink;
}
</style>
<body>
<div class="first">文本</div>
<script>
// 1. 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用
var test = document.querySelector('div');
test.onclick = function() {
// this.style.backgroundColor = 'purple';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';
// 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
// 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
// this.className = 'change';
this.className = 'sisui';
}
</script>
</body>
classList
classList 的方法：
- elem.classList . add / remove(class) —— 添加 / 移除 类名
- elem.classList . toggle(class) —— 类名存如果 存在 就 删除它， 如果 不存在 就 添加它
- elem.classList .contains(class) ——检查给定的类，返回 true / false
<style>
.text {
color: green;
font-size: 24px;
}
.danger {
color: red;
}
</style>
</head>
<body>
<!-- 通过类名来控制样式 -->
<p class="text">四岁爱上了她</p>
<!-- 学习 js 如何 添加 删除 类名 -->
<script>
var pEl = document.querySelector("p");
// 追加类名
pEl.classList.add("danger");
// 删除类名
pEl.classList.remove("text");
// 检查是否含有某个类名
console.log(pEl.classList.contains("text")); // false
console.log(pEl.classList.contains("danger")); // true
</script>
</body>
事件机制
1.1 事件概述
javaScript 使我们有能力创建动态页面，而事件是可以被侦测到的行为。
触发----响应 的一种行为
1.2事件3要素
- 事件源 ：谁 触发事件
- 事件类型：是以什么方式触发事件
- 事件处理程序：事件触发后要执行的代码（函数形式）事件处理函数
<body>
<div>123</div>
<script>
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1. 获取事件源
var div = document.querySelector('div');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
</script>
</body>
1.3 常见的事件
1.3.1 鼠标事件
- onclick ——当鼠标点击一个元素时触发
- onmouseover——鼠标经过触发
- onmouseout——鼠标离开时触发
- onmousedown——鼠标按下触发
- onmouseup——鼠标释放按下的按钮时触发
- onmousemove——鼠标移动时触发
1.3.2 表单（form)元素事件
- onchange——当访问者改变域的内容时。
- onfocus——当访问者聚焦于一个元素时，例如聚焦于一个
1.3.3 键盘事件
- onkeydowm—— 键盘某个按键 按下 的时候触发
- onkeyup—— 键盘某个按键 松开 的时候触发
1.3.4 Document事件
- onload —— 当 HTML 页面加载完成时触发。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script>
window.onload = function () {
// 页面加载完成时 执行
console.log(2);
};
</script>
</head>
<body>
<div class="box"></div>
<input type="text" />
<script>
console.log(1);
// 点击事件 onclick
// 鼠标事件
// onmouseover onmouseout
// onmousedown onmouseup
// onmousemove
var box = document.querySelector(".box");
// box.onmouseover = function () {
// console.log("鼠标over事件触发");
// };
// box.onmouseout = function () {
// console.log("鼠标out事件触发");
// };
box.onmousedown = function () {
console.log("鼠标按下");
};
box.onmouseup = function () {
console.log("鼠标松开");
};
box.onmousemove = function () {
console.log("鼠标移动");
};
// 表单事件
var input = document.querySelector("input");
input.onfocus = function () {
console.log("输入框获得焦点了");
};
input.onchange = function () {
console.log("用户改变输入内容了");
};
// 键盘事件
// onkeyup onkeydown
// 文档事件
// onload 页面加载完成时触发
</script>
</body>
</html>
1.4 删除事件 ---- 赋值 null
elem.onclick = null
这样就解绑了点击事件