JavaScript之DOM模型

最新推荐文章于 2024-07-30 22:36:34 发布
最新推荐文章于 2024-07-30 22:36:34 发布
阅读量280 收藏 1
点赞数 1
分类专栏： 前端技术 文章标签： javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cavewang/article/details/120160508
版权

JavaScript之DOM模型

DOM模型

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

DOM:Document Object Model,文档对象模型。

当网页被加载时，浏览器会创建页面的文档对象模型。

HTML DOM 模型被构造为对象的树：
在这里插入图片描述
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

document对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象是 HTML 文档的根节点。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

document对象常用方法

查找HTML元素常用方法

方法描述
document.getElementById()返回对拥有指定id的第一个对象的引用
document.getElementsByClassName()返回文档中所有指定类名的元素集合，作为NodeList对象
document.getElementsByTagName()返回带有指定标签名的对象集合
document.getElementsByName()返回带有指定名称的对象集合

示例：

	<script>
		function myLoad() {
			//页面加载完毕之后再去获取页面上的元素，否则获取不到
			//根据ID 获取元素，只能获取到唯一元素（如果有重名的ID元素，获取到的是第一个元素）
			var div = document.getElementById("myDiv");
			console.log(div);
			//根据指定的类样式的名称获取元素，返回集合
			var list = document.getElementsByClassName("demo");
			console.log("根据类样式的名称获取到的元素的集合长度是：" + list.length);
			for(var i = 0; i < list.length; i++) {
				console.log(list[i]);
			}
			//根据指定HTML标签名称获取元素，返回集合
			var list2 = document.getElementsByTagName("li");
			console.log("根据标签的名称获取到的元素的集合长度是：" + list2.length);
			for(var i = 0; i < list2.length; i++) {
				console.log(list2[i]);
			}
			//根据指定HTML元素的name属性获取元素，返回集合
			var list3 = document.getElementsByName("myli");
			console.log("根据标签的名称属性获取到的元素的集合长度是：" + list3.length);
			for(var i = 0; i < list3.length; i++) {
				console.log(list3[i]);
			}
		}
	</script>

	<body onload="myLoad()">
		<p class="demo"></p>
		<div id="myDiv" class="demo">
			div
		</div>
		<ul class="demo">
			<li>li11111111111</li>
			<li name="myli">li11111111111</li>
			<li>li11111111111</li>
			<li name="myli">li11111111111</li>
		</ul>
	</body>

输出结果如下：
在这里插入图片描述

修改HTML内容和属性

  • 修改内容
    修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
    修改 HTML 元素的内容的语法：
    document.getElementById(id).innerHTML=新的 HTML。

PS： 绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

  • 修改 HTML 属性
    修改 HTML 元素属性的语法：
    方式1：document.getElementById(id).attribute=新属性值
    方式2：document.getElementById(id).setAttribute(属性名，属性值);
<body>
		<h1 style="color: green;" id="myh1" class="bf">hello world</h1>
		<script>
			var h1 = document.getElementById("myh1");
			console.log(h1.getAttribute("class"));
			h1.setAttribute("class", "bg"); //设置属性
			console.log(h1.getAttribute("class"));
			console.log(h1.getAttribute("style"));
		</script>
</body>

在这里插入图片描述

修改HTML元素的CSS

修改 HTML 元素css的语法：

document.getElementById(id).style.property=新样式

document.getElementById("myli").style.color="blue";
document.getElementById("myli").style.fontFamily="微软雅黑";
document.getElementById("myli").style.fontSize="24px";

HTML DOM元素（节点）

创建新的HTML元素

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

	<button type="button" onclick="createNewP()">动态添加一个元素--appendChild</button>
	<button type="button" onclick="createNewP2()">动态添加一个元素--insertBefore</button>
	<div id="div1">
		<p id="p1">这是段落1</p>
		<p id="p2">这是段落2</p>
	</div>
	<script>
		function createNewP() {
			var newElementP = document.createElement("p"); //创建一个新的段落元素
			var text = document.createTextNode("这是我新创建的段落"); //新创建的文本节点
			//将文本的节点添加到新创建的元素中
			newElementP.appendChild(text);
			//获取一个页面已经存在的元素
			var div = document.getElementById("div1");
			//添加新创建的元素p到已经存在的元素div中
			div.appendChild(newElementP);
		}

		function createNewP2() {
			var newElementP = document.createElement("p"); //创建一个新的段落元素
			var text = document.createTextNode("这是我新创建的段落p2"); //新创建的文本节点
			//将文本的节点添加到新创建的元素中
			newElementP.appendChild(text);
			//获取一个页面已经存在的元素
			var div = document.getElementById("div1");
			var p1 = document.getElementById("p1");
			//添加新创建的元素p到已经存在的元素div中,指定插入到段落P1前面
			div.insertBefore(newElementP, p1);
		}
	</script>

未点击添加元素时
在这里插入图片描述
通过appendChild添加
在这里插入图片描述
通过insertBefore添加
在这里插入图片描述

替换HTML元素-replaceChild()

		<div id="div1">
			<p id="p1">这是一个段落。</p>
			<p id="p2">这是另外一个段落。</p>
		</div>
		<button type="button" onclick="changeElemnt()">替换p1</button>
		<script>
			function changeElemnt() {
				var newElementP = document.createElement("p"); //创建一个新的段落元素
				var text = document.createTextNode("这是我新创建的段落p"); //新创建的文本节点
				//将文本的节点添加到新创建的元素中
				newElementP.appendChild(text);
				//获取要被替换的元素p1及其父元素div
				var div = document.getElementById("div1");
				var p1 = document.getElementById("p1");
				//将div中的元素p1替换为新创建的元素
				div.replaceChild(newElementP, p1);
			}
		</script>

初始时：
在这里插入图片描述
点击替换后：
在这里插入图片描述

删除元素-removeChild()

<div id="div1">
			<p id="p1">这是一个段落。</p>
			<p id="p2">这是另外一个段落。</p>
		</div>
		<button type="button" onclick="deleteElement()">删除p1-方式1</button>
		<button type="button" onclick="deleteElement()">删除p1-方式2</button>
		<script>
			function deleteElement() {
				var div = document.getElementById("div1");
				var p1 = document.getElementById("p1");
				//从父元素div中删除子元素p1
				div.removeChild(p1);
			}

			function deleteElement2() {
				var p1 = document.getElementById("p1");
				//p1.parentNode：作用就是获取要删除元素p1的父元素div
				p1.parentNode.removeChild(p1);
			}
		</script>

初始化：
在这里插入图片描述
点击删除后：
在这里插入图片描述

CavenWang
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Javascript之BOM与DOM讲解
02-09
JavaScript是Web开发中不可或缺的一部分，主要由三个组成部分构成：ECMAScript、DOM（文档对象模型）和BOM（浏览器对象模型）。这三个部分协同工作，使开发者能够创建动态、交互式的网页。 1. ECMAScript： ...
javaScript中DOM模型使用详解+XMLHttpRequest异步请求使用
05-27
总结起来，JavaScript的DOM模型和XMLHttpRequest异步请求是构建交互式Web应用的核心技术。DOM提供了对HTML文档结构的编程访问，允许开发者动态地更新页面内容和样式；而XMLHttpRequest则使得数据可以在后台获取和...
JavaScript之DOM
qq_43751200的博客
06-05 1755
DOM
JavaScript学习之DOM模型概念
林林一928的博客
04-21 757
DOM是浏览器提供一套专门用来操作网页内容的功能。JavaScript分为: 1. ECMAScripts(javaScripts语言基础)2.Web APIs: 2.1 DOM(页面文档对象类型)2.2 BOM(浏览器对象模型)。节点（node）：DOM 的最小组成单位。 一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。Node.nodeType属性
前端基础学习——JavaScript之BOM模型与DOM模型
weixin_53919192的博客
07-06 915
本文为大家带来了前端基础学习——JavaScript之BOM模型与DOM模型，希望对你有帮助~~
Javascript——DOM模型解析
arvin_top的博客
04-13 417
DOM中model部分    •文档结构理解为一个倒树模型 •文档中每一个内容都是树中的一个节点（内容包括：元素、内容、属性、注释） DOM中节点遍历     •父节点（单数）：parentNode •子节点（复数）：childNodes、firstChild、lastChild •兄弟节点：nextSibling（下一个节点）、previousSibling(上一个节点) 文档
JavaScript:DOM模型
LiLi的博客
01-11 1152
DOM概述 DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JavaScript 对象，从而可以用脚本进行各种操作（比如对元素增删内容） 浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口 DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但
【JavaScript】DOM模型
weixin_43726152的博客
02-14 1118
DOM document Object Model 文档对象模型：把文档中的标签，属性，文本，转换成对象来管理。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
Javascript之dom
weixin_51767056的博客
09-03 1055
文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。element . 属性例如：div . idelement . getAttribute('属性') //自己定义的
JavascriptDOM 文档对象模型
n17742637334的博客
04-29 690
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），简称DOM。DOM模型被结构化为对象树，又称DOM树。树的每个节点代表文档中的一个元素、属性、文本等。JavaScript DOM是用来操作HTML文档的一种编程接口，通过它可以实现对文档的各种操作和交互。Javascript 获取HTML元素1、使用() 方法，通过元素的 id 属性来获取元素。代码如下：2、使用() 方法，通过元素的 class 属性来获取元素。
JavaScript DOM 对象详解
xycxycooo的博客
07-16 808
在 JavaScript 编程中，DOM（Document Object Model）是指文档对象模型，它提供了一组用于与 HTML 文档进行交互的对象。DOM 是一种跨平台的、独立于语言的接口，它将 HTML 或 XML 文档表示为一个树形结构，其中每个节点都是一个对象，代表文档的一部分（如元素、属性、文本等）。通过 DOM，开发者可以添加、删除、修改和查询文档中的元素和内容。通过本文的详细讲解，相信你已经对 JavaScript 中的 DOM 对象有了全面的了解。方法可以通过元素的标签名获取元素集合。
javascript DOM 操作.doc
01-15
javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型（Document Object Model，DOM），以便于动态地更改网页的内容和结构。下面是javascript DOM 操作的相关知识点： IE 中的操作 IE 中是以...
JavaScript学习笔记之DOM操作实例分析
10-17
JavaScript DOM操作是Web开发中的核心技能之一，它允许开发者通过编程方式访问和修改HTML或XML文档的结构、样式和内容。DOM（Document Object Model）是一个树状结构，将网页内容组织成一系列相互关联的节点。 一、...
JavaScript & DOM Enlightenment
11-30
JavaScript和DOM Enlightenment是关于Web开发中的核心技术的深入学习资源，主要涵盖了JavaScript编程语言以及文档对象模型（Document Object Model）的应用。这两个概念对于任何希望成为前端开发者的人来说都是至关...
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 268
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 862
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 203
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
【Vue3】自定义组件
最新发布
又言又语
07-30 423
本文介绍 Vue3 中如何自定义组件。页面组件：用于构建独立页面，通常存放在src/pages或src/views目录下。功能组件：将页面中一些独立的功能封装成独立组件，譬如：分页组件、日期时间组件等。功能组件通常存放在目录下。本文主要说明如何自定义功能组件。
JavaScript与DOM模型：Web设计实战教程（第2版）
1. **DOM基础知识**：介绍了DOM模型的基本概念，包括节点类型、节点关系、以及获取和创建节点的方法。 2. **JavaScript与DOM的集成**：讲解如何在JavaScript中引用DOM元素，理解并使用如getElementById、...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值