文章目录
🙋♂️ 作者:@whisperrr.🙋♂️
👀 专栏:JavaWeb👀
💥 标题:【JavaWeb04】 精通DOM基础:构建动态网页交互的核心技能手册💥
❣️ 寄语:比较是偷走幸福的小偷❣️
"DOM"通常指的是文档对象模型(Document Object Model),它是一个跨平台和语言独立的接口,允许程序和脚本动态地访问和更新文档的内容、结构和样式。在网页浏览器中,DOM通常用来指代HTML或XML文档的对象模型。就是把文档中的标签,属性,文本,转换成为对象来管理,我们主要聊一聊html dom
🌍一. DOM的作用
- 改变文档内容:可以添加、删除、修改或重排文档中的任何内容。
- 改变文档样式:可以动态地改变文档元素的样式属性。
- 响应事件:可以为文档中的元素定义事件处理程序,如鼠标点击或键盘按键。
- 节点操作:可以对文档树中的节点进行遍历和操作。
在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 (文档对象模型)
- 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
- HTML DOM 树 对象[属性,方法/函数]
🌍三. document 对象
❄️1. doucment 说明
- document 它管理了所有的 HTML 文档内容
- document 它是一种树结构的文档。
- 有层级关系 在 dom 中把所有的标签 都 对象化 (得到这个 html 标签的<—>对象–>
操作) - 通过 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 (文档对象模型)中,每个部分都是节点:
- 文档本身是文档节点
- 所有 HTML 元素是元素节点
- 所有 HTML 属性是属性节点
- HTML 元素内的文本是文本节点
- 注释是注释节点
节点属性和方法一览
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中常见的节点类型:
- 元素节点(Element Node):
- 代表HTML文档中的元素,例如
<div>
,<p>
,<a>
等。 - 可以包含其他元素节点、文本节点、注释节点等。
- 代表HTML文档中的元素,例如
- 文本节点(Text Node):
- 包含纯文本内容,例如元素节点内部的文字。
- 由元素节点包含,不能包含其他节点。
- 属性节点(Attribute Node):
- 代表HTML元素的属性,例如
href
、src
、class
等。 - 在现代的DOM操作中,属性节点通常通过元素节点的属性来访问,而不是直接作为独立的节点。
- 代表HTML元素的属性,例如
- 注释节点(Comment Node):
- 包含注释内容,例如
<!-- 这是一个注释 -->
。 - 不显示在页面上,但对开发者有帮助。
- 包含注释内容,例如
- 文档节点(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);