• JS中的DOM对象

    DOM

    宿主对象：

    1. DOM
    2. BOM

    1.DOM概述

    DOM全称是：Document Object Model文档对象模型

    JS中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作WEB页面。

    文档：

    • 文档表示的就是整个的HTML网页文档

    对象：

    • 对象表示将网页中的每一个部分都转换为了一个对象

    模型：

    • 使用模型来表示对象之间的关系，这样方便我们获取对象

    在这里插入图片描述

    2.节点

    节点：Node构成HTML文档最基本的单元。

    常用节点分为四类：

    • **文档节点：**整个HTML文档
    • 元素节点：HTML文档中的HTML标签
    • **属性节点：**元素的属性
    • 文本节点：HTML标签中的文本内容

    在这里插入图片描述

    节点属性：

    在这里插入图片描述

    3.文档节点Document

    • 文档节点Document，代表的是整个HTML文档，网页中的所有节点都它的子节点
    • Document对象作为window对象的属性存在的，我们不用获取可以直接使用
    • 通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象
    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>DOM快速入门</title>
</head>
<body>
<button id="but">我是按钮</button>

<script type="text/javascript">
    // 使用`JS`获取按钮
    // 使用document文档对象中的`getElementById()`方法
    var but = document.getElementById("but");

    // 使用属性修改文本
    but.innerHTML = "I'm button";
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    4.事件

    **事件：**就是用户和浏览器之间的交互行为，比如：点击按钮，鼠标移动，关闭窗口等。

    鼠标事件：

    在这里插入图片描述

    键盘事件：

    在这里插入图片描述

    表单事件：

    在这里插入图片描述

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
</head>
<body>
<button id="but">我是一个按钮</button>

<script type="text/javascript">
  // 使用文档对象获取`button`
  var but = document.getElementById("but");

  alert(but);

  but.onclick = function () {
      alert("为属性绑定单击事件");
  };
  
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    5.文档加载顺序

    浏览器在加载一个页面时，是按照自上向下顺序加载的，读取到一行就运行一行，如果将script标签写到页面上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象

    onload事件会在整个页面加载完成后才触发，所以如果我们需要将代码写在页面上边时，可以为window绑定一个onlaod事件来解决该问题

    			/*
			 * onload事件会在整个页面加载完成之后才触发
			 * 为window绑定一个onload事件
			 * 		该事件对应的响应函数将会在页面加载完成之后执行，
			 * 		这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
			 * 	
			 */

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文档加载顺序</title>
  <script type="text/javascript">
    // 文档加载顺序是自上向下加载的
    /**
     * 如果需要获取下面的元素时，需要为`window`对象绑定一个onload事件
     * 来解决该问题
     */
    window.onclick = function () {
      // 获取按钮对象
      var but = document.getElementById("but");

      // 为按钮绑定单击事件
      but.onclick = function () {
        alert("点我干啥!");
      }
    };
  </script>
</head>
<body>
<button id="but">我是一个按钮</button>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    6.获取元素节点

    通过document对象调用

    1.getElementById()

    • 通过id属性获取一个元素节点对象

    2.getElementsByTagName()

    • 通过标签名获取一组元素节点对象

    3.getRlementsByName()

    • 通过name属性获取一组元素节点对象
    		<script type="text/javascript">
		
			window.onload = function(){
				
				//为id为btn01的按钮绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//查找#bj节点
					var bj = document.getElementById("bj");
					//打印bj
					//innerHTML 通过这个属性可以获取到元素内部的html代码
					alert(bj.innerHTML);
				};
				
				
				//为id为btn02的按钮绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//查找所有li节点
					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
					//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
					//即使查询到的元素只有一个，也会封装到数组中返回
					var lis = document.getElementsByTagName("li");
					
					//打印lis
					//alert(lis.length);
					
					//变量lis
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
				};
				
				
				//为id为btn03的按钮绑定一个单击响应函数
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					//查找name=gender的所有节点
					var inputs = document.getElementsByName("gender");
					
					//alert(inputs.length);
					
					for(var i=0 ; i<inputs.length ; i++){
						/*
						 * innerHTML用于获取元素内部的HTML代码的
						 * 	对于自结束标签，这个属性没有意义
						 */
						//alert(inputs[i].innerHTML);
						/*
						 * 如果需要读取元素节点属性，
						 * 	直接使用 元素.属性名
						 * 		例子：元素.id 元素.name 元素.value
						 * 		注意：class属性不能采用这种方式，
						 * 			读取class属性时需要使用 元素.className
						 */
						alert(inputs[i].className);
					}
				};
				
				
				
				//查找#city下所有li节点
				//返回#city的所有子节点
				//返回#phone的第一个子节点
				//返回#bj的父节点
				//返回#android的前一个兄弟节点
				//读取#username的value属性值
				//设置#username的value属性值
				//返回#bj的文本值
				
			};
			
		
		</script>



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76

    注意是：

    innerHTML用于是获取元素内部的HTML代码的，例如：自闭合标签，使用innerHTML没有任何意义

    如果需要读取元素节点中的属性，直接使用元素.属性名

    ​ 例如：元素.id 元素.value

    ​ 注意是：class属性不能采用这种方式，如果需要读取class属性需要使用 元素.className

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#outer{
				width: 500px;
				margin: 50px auto;
				padding: 10px;
				background-color: greenyellow;
				/*设置文本居中*/
				text-align: center;
			}
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 点击按钮切换图片
				 */
				
				//获取两个按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				
				/*
				 * 要切换图片就是要修改img标签的src属性
				 */
				
				//获取img标签
				var img = document.getElementsByTagName("img")[0];
				
				//创建一个数组，用来保存图片的路径
				var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];
				
				//创建一个变量，来保存当前正在显示的图片的索引
				var index = 0;
				
				//获取id为info的p元素
				var info = document.getElementById("info");
				//设置提示文字
				info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
				
				
				//分别为两个按钮绑定单击响应函数
				prev.onclick = function(){
					
					/*
					 * 切换到上一张，索引自减
					 */
					index--;
					
					//判断index是否小于0
					if(index < 0){
						index = imgArr.length - 1;
					}
					
					img.src = imgArr[index];
					
					//当点击按钮以后，重新设置信息
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
				};
				
				next.onclick = function(){
					
					/*
					 * 切换到下一张是index自增
					 */
					index++;
					
					if(index > imgArr.length - 1){
						index = 0;
					}
					
					//切换图片就是修改img的src属性
					//要修改一个元素的属性 元素.属性 = 属性值
					img.src = imgArr[index];
					
					//当点击按钮以后，重新设置信息
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
					
				};
				
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="outer">
			
			<p id="info"></p>
			
			<img src="img/1.jpg" alt="冰棍" />
			
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
			
		</div>
	</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
  • 相关阅读:
    Centos 7 用户密码忘记解决办法
    进行日常记账后，怎样导出表格
    千梦网创：创业一定要学会打造自己的榜样圈
    R语言参数检验多重比较
    【面试题】前端面试真题 年前端面试
    linux(CentOS安装,创建新的虚拟机)
    【网络协议】聊聊ICMP与ping是如何测试网络联通性
    【leetcode】三维形体的表面积 c++
    问题排查---应用程序不在接收新请求
    法语初级学习笔记-02-动词变位
  • 原文地址：https://blog.csdn.net/weixin_47267628/article/details/126860527