前言
在当今的Web开发中,DOM(Document Object Model)编程扮演着至关重要的角色。DOM是HTML和XML文档的编程接口,它使得我们可以像操作对象一样来操作网页上的元素。无论是构建动态网页,还是实现用户交互,都离不开对DOM的深入理解和灵活运用。在本文中,我们将开启DOM编程的系列学习之旅,首先聚焦于节点概念、如何获取元素节点、节点属性以及样式等基础知识。通过本文的学习,你将能够掌握DOM编程的基本技能,为后续更复杂的操作打下坚实的基础。已经学过的大佬们可以收藏当笔记看。
DOM 中的节点
在 DOM 中,HTML 文档被表示为一个树形结构,这个树形结构中的每一个部分都是一个节点。节点可以有不同类型,包括:
- 文档节点:代表整个文档,通常是
Document
对象。 - 元素节点:HTML 标签,如
<p>
、<div>
等。 - 属性节点:HTML 标签的属性,如
<img src="example.jpg">
中的src
属性。 - 文本节点:元素节点之间的文本内容,如
<p>这是一段文本</p>
中的“这是一段文本”。 - 注释节点:HTML 注释,如
<!-- 这是一个注释 -->
。
DOM 节点示例代码
下面是一个简单的 HTML 文档,并配有 JavaScript 代码来演示如何访问 DOM 中的节点:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM 节点示例</title>
</head>
<body>
<div id="myDiv">
<p>Hello, <span>world!</span></p>
<!-- 这是一个注释 -->
</div>
<script>
// 获取文档节点(Document 对象)
var doc = document;
// 获取元素节点(通过 ID)
var myDiv = document.getElementById('myDiv');
// 获取元素节点中的文本节点(注意:直接获取不到,需要遍历子节点)
var childNodes = myDiv.childNodes;
for (var i = 0; i < childNodes.length; i++) {
if (childNodes[i].nodeType === Node.TEXT_NODE) {
console.log('文本节点内容:', childNodes[i].nodeValue.trim()); // 忽略前后空格
}
}
// 获取属性节点(通过元素节点的 attributes 属性)
var span = myDiv.querySelector('span');
var attributes = span.attributes;
for (var j = 0; j < attributes.length; j++) {
console.log('属性名:', attributes[j].name, '属性值:', attributes[j].value);
// 注意:实际上在 JavaScript 中我们很少直接操作属性节点,而是使用元素的属性名来访问和修改属性。
}
// 注释节点通常不被直接操作,但在遍历子节点时可能会遇到。
</script>
</body>
</html>
Location 对象
Location
对象包含了关于当前 URL 的信息,并且允许您解析 URL 以及重定向浏览器到新的页面。它不是 DOM 树的一部分,但它是 window
对象的一个属性,因此可以通过 window.location
或简写为 location
来访问。
Location 对象示例代码
// 获取当前页面的 URL
var currentUrl = window.location.href;
console.log('当前 URL:', currentUrl);
// 解析 URL 的各个部分
var protocol = window.location.protocol; // "http:" 或 "https:"
var hostname = window.location.hostname; // 域名,如 "example.com"
var port = window.location.port; // 端口号,默认为空字符串
var pathname = window.location.pathname; // 路径名,如 "/page.html"
var search = window.location.search; // 查询字符串,如 "?key=value"
var hash = window.location.hash; // URL 中的哈希部分,如 "#section"
// 重定向到新的页面
window.location.href = 'https://www.example.com'; // 这会导致浏览器跳转到新的 URL
如何获取元素节点
1. 通过id获取元素节点
在HTML中,每个元素都可以有一个唯一的id
属性。在JavaScript中,我们可以使用document.getElementById()
方法来获取具有特定id
的元素。
<div id="myDiv">Hello, world!</div>
<script>
var elementById = document.getElementById('myDiv');
console.log(elementById.innerHTML); // 输出 "Hello, world!"
</script>
2. 通过标签名称获取元素节点
要获取具有特定标签名称的所有元素,可以使用document.getElementsByTagName()
方法。
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<script>
var elementsByTagName = document.getElementsByTagName('p');
for (var i = 0; i < elementsByTagName.length; i++) {
console.log(elementsByTagName[i].innerHTML);
} // 分别输出 "Paragraph 1" 和 "Paragraph 2"
</script>
3. 通过类名获取元素节点
使用document.getElementsByClassName()
方法可以根据类名获取元素。
<div class="myClass">Div 1</div>
<div class="myClass">Div 2</div>
<script>
var elementsByClassName = document.getElementsByClassName('myClass');
for (var i = 0; i < elementsByClassName.length; i++) {
console.log(elementsByClassName[i].innerHTML);
} // 分别输出 "Div 1" 和 "Div 2"
</script>
4. 通过表单元素的name获取元素节点
在表单中,元素通常具有name
属性。然而,直接使用name
属性来获取元素并不像id
、tagName
或className
那样直接。但你可以使用document.getElementsByName()
方法(注意:此方法在表单外的元素上可能不起作用)。
<form>
<input type="text" name="username">
</form>
<script>
var inputElement = document.getElementsByName('username')[0]; // 注意可能返回多个元素,所以使用索引
console.log(inputElement.value); // 输出输入框的值(如果已输入)
</script>
5. 为什么会获取不到?
- 拼写错误:确保你使用的id、类名、标签名或name与HTML中的实际值完全匹配。
- DOM未完全加载:如果你的JavaScript代码在DOM完全加载之前运行(例如,在
<head>
标签中),你可能无法获取到某些元素。你可以将JavaScript代码放在<body>
标签的底部,或者使用DOMContentLoaded
事件来确保DOM已加载。 - 选择器错误:如果你使用的是更复杂的选择器(如CSS选择器),你可能需要使用
document.querySelector()
或document.querySelectorAll()
方法。
6. 获取属性节点
属性节点可以通过元素的getAttribute()
方法获取。
<img id="myImage" src="example.jpg" alt="My Image">
<script>
var imageElement = document.getElementById('myImage');
var srcAttribute = imageElement.getAttribute('src');
console.log(srcAttribute); // 输出 "example.jpg"
</script>
7. 获取内容节点
元素的内容可以通过innerHTML
(包括HTML标签)或textContent
(仅文本内容)属性获取。
<div id="myContent">This is some <b>bold</b> text.</div>
<script>
var contentElement = document.getElementById('myContent');
var innerHTMLContent = contentElement.innerHTML; // 包含HTML标签
var textContent = contentElement.textContent; // 仅文本内容
console.log(innerHTMLContent); // 输出 "This is some <b>bold</b> text."
console.log(textContent); // 输出 "This is some bold text."
</script>
节点属性
1. 节点名称 (NodeName)
节点的名称通常是大写的标签名(对于元素节点)或特定的字符串(对于其他类型的节点)。
<div id="myDiv">Hello, world!</div>
<script>
var element = document.getElementById('myDiv');
console.log(element.nodeName); // 输出 "DIV"
</script>
2. 节点值 (NodeValue)
节点值通常用于文本节点和属性节点。对于元素节点,它通常是null
或undefined
。
<a href="https://example.com">Example Link</a>
<script>
// 文本节点的值
var textNode = document.querySelector('a').firstChild;
console.log(textNode.nodeValue); // 输出 "Example Link"
// 属性节点的值
var attrNode = document.querySelector('a').attributes.getNamedItem('href');
console.log(attrNode.nodeValue); // 输出 "https://example.com"
// 元素节点的值(通常是null或undefined)
var element = document.querySelector('a');
console.log(element.nodeValue); // 输出 null 或 undefined
</script>
注意:在上面的例子中,firstChild
可能会获取到空白文本节点(如果存在),所以你可能需要使用firstChild.nextSibling
或其他方法来获取实际的文本节点。
3. 节点类型 (NodeType)
节点类型是一个数字常量,表示节点的类型(例如,元素节点、文本节点、属性节点等)。
<div id="myDiv">Hello, <span>world!</span></div>
<script>
var divElement = document.getElementById('myDiv');
var spanElement = document.querySelector('span');
var textNode = spanElement.firstChild;
console.log(divElement.nodeType); // 输出 1,表示元素节点
console.log(textNode.nodeType); // 输出 3,表示文本节点
</script>
1
代表元素节点2
代表属性节点(在DOM API中不常用,因为属性是通过其他方式访问的)3
代表文本节点
4. 元素的文本内容 (TextContent)
textContent
属性用于获取或设置元素及其后代的文本内容。
<div id="myDiv">Hello, <span>world!</span></div>
<script>
var element = document.getElementById('myDiv');
console.log(element.textContent); // 输出 "Hello, world!"
</script>
5. 元素上的属性 (Attributes)
元素节点上的属性可以通过 attributes
集合来访问。但更常见的是使用 getAttribute()
、setAttribute()
和 removeAttribute()
方法来操作属性。
<img id="myImage" src="example.jpg" alt="My Image">
<script>
var imageElement = document.getElementById('myImage');
// 获取属性
var srcAttribute = imageElement.getAttribute('src');
console.log(srcAttribute); // 输出 "example.jpg"
// 设置属性
imageElement.setAttribute('title', 'Click me!');
// 移除属性
imageElement.removeAttribute('alt');
</script>
注意:虽然 attributes
集合提供了对元素属性的访问,但直接使用 getAttribute()
、setAttribute()
和 removeAttribute()
方法更为常见和方便。
样式
1. 隐藏和显示元素
在JavaScript中,你可以通过修改元素的style.display
属性来隐藏或显示一个元素。
隐藏元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hide and Show Elements</title>
</head>
<body>
<div id="myDiv">Hello, I'm a div!</div>
<button onclick="hideDiv()">Hide Div</button>
<button onclick="showDiv()">Show Div</button>
<script>
function hideDiv() {
var div = document.getElementById('myDiv');
div.style.display = 'none'; // 将display属性设置为'none'来隐藏元素
}
function showDiv() {
var div = document.getElementById('myDiv');
div.style.display = 'block'; // 将display属性设置为'block'来显示元素(假设元素是块级元素)
// 如果元素是内联元素,可以使用'inline'或其他合适的值
}
</script>
</body>
</html>
显示元素
在上面的例子中,showDiv
函数将元素的display
属性设置为'block'
,从而显示该元素。注意,如果元素是内联元素(如<span>
),则应该使用'inline'
或其他合适的值。
2. 改变背景色
你可以通过修改元素的style.backgroundColor
属性来改变元素的背景色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Background Color</title>
</head>
<body>
<div id="myDiv" style="width: 200px; height: 200px;">Click the button to change color</div>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
var div = document.getElementById('myDiv');
div.style.backgroundColor = 'blue'; // 将背景色设置为'blue'
// 你可以将'blue'替换为任何有效的CSS颜色值,如'#ff0000'(红色)、'rgb(0, 255, 0)'(绿色)等
}
</script>
</body>
</html>
在上面的例子中,changeColor
函数将元素的背景色更改为蓝色。你可以将'blue'
替换为任何有效的CSS颜色值。
这些示例展示了如何使用JavaScript来动态地修改HTML元素的样式。在实际应用中,你还可以使用更复杂的CSS属性和值来创建更丰富的视觉效果和交互体验。
结语
通过本文的学习,我们对DOM编程的节点概念、获取元素节点的方法、节点属性以及样式操作有了初步的了解。这些基础知识是后续深入学习DOM编程的基石,也是我们实现动态网页和用户交互的必备技能。当然,DOM编程的世界远不止于此,还有许多高级特性和技术等待我们去探索和实践。希望本文能够为你打开DOM编程的大门,激发你对Web开发的兴趣和热情。在未来的学习和实践中,不断挑战自我,探索未知,让我们一起在Web开发的道路上不断前行。
respect!
标签:JavaScript,DOM,元素,var,document,节点,属性 From: https://blog.csdn.net/2303_80856850/article/details/139481678