JS中的DOM对象

最新推荐文章于 2024-07-16 19:32:16 发布

昱晟168

最新推荐文章于 2024-07-16 19:32:16 发布

阅读量527

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_47267628/article/details/126860527

版权

前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

`DOM`

宿主对象：

DOM
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>

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>

5.文档加载顺序

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

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

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

<!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>

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>

注意是：

innerHTML用于是获取元素内部的HTML代码的，例如：<input/>自闭合标签，使用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>

昱晟168

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS中的DOM对象

DOM文档对象模型JS中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作WEB页面。文档表示的就是整个的HTML网页文档对象表示将网页中的每一个部分都转换为了一个对象使用模型来表示对象之间的关系，这样方便我们获取对象。
复制链接

扫一扫