【JavaWeb04】 精通DOM基础:构建动态网页交互的核心技能手册

在这里插入图片描述



🙋‍♂️ 作者:@whisperrr.🙋‍♂️

👀 专栏:JavaWeb👀

💥 标题:【JavaWeb04】 精通DOM基础:构建动态网页交互的核心技能手册💥

❣️ 寄语:比较是偷走幸福的小偷❣️

"DOM"通常指的是文档对象模型(Document Object Model),它是一个跨平台和语言独立的接口,允许程序和脚本动态地访问和更新文档的内容、结构和样式。在网页浏览器中,DOM通常用来指代HTML或XML文档的对象模型。就是把文档中的标签,属性,文本,转换成为对象来管理,我们主要聊一聊html dom

🌍一. DOM的作用

  1. 改变文档内容:可以添加、删除、修改或重排文档中的任何内容。
  2. 改变文档样式:可以动态地改变文档元素的样式属性。
  3. 响应事件:可以为文档中的元素定义事件处理程序,如鼠标点击或键盘按键。
  4. 节点操作:可以对文档树中的节点进行遍历和操作。
    在JavaScript中,DOM是一个非常重要的概念,因为几乎所有的JavaScript网页编程都涉及到与DOM的交互。以下是一些基本的DOM操作示例:
  • 获取元素:document.getElementById(id)
  • 创建元素:document.createElement(tagName)
  • 插入元素:parentElement.appendChild(childElement)
  • 删除元素:parentElement.removeChild(childElement)
  • 修改属性:element.setAttribute(attribute, value)
  • 修改内容:element.innerHTML = '新内容'
    如果您有关于DOM的具体问题或需要进一步的帮助,请详细说明。

🌍二. HTML DOM (文档对象模型)

  1. 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
  2. HTML DOM 树 对象[属性,方法/函数]
    在这里插入图片描述

🌍三. document 对象

❄️1. doucment 说明

  1. document 它管理了所有的 HTML 文档内容
  2. document 它是一种树结构的文档。
  3. 有层级关系 在 dom 中把所有的标签 都 对象化 (得到这个 html 标签的<—>对象–>
    操作)
  4. 通过 document 可以访问所有的标签对象

在Web开发中,document 是一个全局对象,它代表了整个HTML文档。这个对象是文档对象模型(DOM)的一个实现,它允许开发者通过JavaScript与网页进行交互。以下是document对象的一些常见用途和属性:

❄️2. 常见的document属性:

  • document.documentElement: 返回文档的根元素,通常是<html>元素。
  • document.body: 返回文档的<body>元素。
  • document.head: 返回文档的<head>元素。
  • document.title: 获取或设置文档的标题。
  • document.URL: 获取当前文档的URL。
  • document.domain: 获取当前文档的域名。
  • document.referrer: 获取链接到当前页面的那个页面的URL。

❄️3. 常见的document方法:

  • document.getElementById(id): 通过ID获取元素。
  • document.getElementsByClassName(className): 通过类名获取元素列表。
  • document.getElementsByTagName(tagName): 通过标签名获取元素列表。
  • document.querySelector(selector): 通过CSS选择器获取第一个匹配的元素。
  • document.querySelectorAll(selector): 通过CSS选择器获取所有匹配的元素列表。
  • document.createElement(tagName): 创建一个新的HTML元素。
  • document.createTextNode(text): 创建一个新的文本节点。
  • document.write(text): 向文档写入文本或HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementById 的使用</title>
<!-- 1. 先得到 h1 的 dom 对象, 通过 id 获取
2. 对 h1 对应的 dom 对象操作即可
-->
<script type="text/javascript">
window.onload = function () {
//1. 获取 myHeader 的 dom 对象
var myHeader = document.getElementById("myHeader");
//2. 给 myHeader 绑定 onclick 的事件
myHeader.onclick = function () {
alert("动态绑定 内容是= " + myHeader.innerText);
}
}
//理解了基本原理,其它的问题就是 API 层级
</script>
</head>
<body>
<!-- 静态绑定一个点击事件 -->
<h1 id="myHeader"><div>csdn</div></h1>
<p>Click on the header to alert its value</p>
</body>
</html>

document对象是JavaScript与网页交互的核心,几乎所有的DOM操作都是以它为起点。理解document对象及其方法对于前端开发者来说至关重要。

🌍四. HTML DOM 节点

❄️1. 基本介绍

在 HTML DOM (文档对象模型)中,每个部分都是节点:

  1. 文档本身是文档节点
  2. 所有 HTML 元素是元素节点
  3. 所有 HTML 属性是属性节点
  4. HTML 元素内的文本是文本节点
  5. 注释是注释节点

节点属性和方法一览

HTML DOM Element 对象文档地址: https://www.w3school.com.cn/jsref/dom_obj_all.asp
HTML DOM Document 对象文档地址: https://www.w3school.com.cn/jsref/dom_obj_document.asp

❄️2. 主要节点类型:

在HTML DOM(文档对象模型)中,节点(Node)是构成网页的基本单元。以下是HTML DOM中常见的节点类型:

  1. 元素节点(Element Node)
    • 代表HTML文档中的元素,例如<div>, <p>, <a>等。
    • 可以包含其他元素节点、文本节点、注释节点等。
  2. 文本节点(Text Node)
    • 包含纯文本内容,例如元素节点内部的文字。
    • 由元素节点包含,不能包含其他节点。
  3. 属性节点(Attribute Node)
    • 代表HTML元素的属性,例如hrefsrcclass等。
    • 在现代的DOM操作中,属性节点通常通过元素节点的属性来访问,而不是直接作为独立的节点。
  4. 注释节点(Comment Node)
    • 包含注释内容,例如<!-- 这是一个注释 -->
    • 不显示在页面上,但对开发者有帮助。
  5. 文档节点(Document Node)
    • 代表整个HTML文档,是DOM的根节点。
    • 通过document对象在JavaScript中访问。

❄️3. 节点属性和方法:

每个节点都有以下属性和方法,用于操作节点和节点之间的关系:

  • nodeType:返回节点的类型(例如,元素节点为1,属性节点为2,文本节点为3等)。
  • nodeName:返回节点的名称(对于元素节点,返回的是标签名)。
  • nodeValue:对于文本节点,返回文本内容;对于属性节点,返回属性值;对于元素节点,该值为null
  • parentNode:返回节点的父节点。
  • childNodes:返回节点的子节点列表。
  • firstChild:返回节点的第一个子节点。
  • lastChild:返回节点的最后一个子节点。
  • previousSibling:返回节点的前一个兄弟节点。
  • nextSibling:返回节点的后一个兄弟节点。
  • appendChild(node):将一个节点添加到指定节点的子节点列表的末尾。
  • insertBefore(newNode, referenceNode):在指定节点前插入一个新节点。
  • replaceChild(newNode, oldNode):替换一个子节点。
  • removeChild(node):移除一个子节点。
    以下是一个简单的示例,展示了如何访问和操作DOM节点:
// 获取一个元素节点
var divElement = document.getElementById('myDiv');
// 获取该元素的所有子节点
var childNodes = divElement.childNodes;
// 获取第一个子节点
var firstChild = divElement.firstChild;
// 检查第一个子节点是否是文本节点
if (firstChild.nodeType === Node.TEXT_NODE) {
    console.log('第一个子节点是文本节点,内容为:' + firstChild.nodeValue);
}
// 创建一个新的元素节点并添加到div中
var newElement = document.createElement('p');
newElement.textContent = '这是一个新的段落';
divElement.appendChild(newElement);
评论 43
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值