DOM学习---获取节点绑定事件

最新推荐文章于 2024-01-25 19:59:06 发布

曾不错吖

最新推荐文章于 2024-01-25 19:59:06 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/sisuiban/article/details/119857310

版权

这里写自定义目录标题

DOM
样式和类
- - 1.1元素样式
  - 1.2类名操作
事件机制

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
这样就解绑了点击事件

曾不错吖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM学习---获取节点绑定事件

这里写自定义目录标题DOM1.1 什么是DOM1.2 DOM树1.3获取元素1.3.1 根据ID获取1.3.2 根据标签名获取元素1.3.3 H5新增获取元素的方式合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入DOM1.1 什么是DOM
复制链接

扫一扫