本文主要是介绍JavaScript第十讲：DOM编程（1）：节点概念，如何获取元素节点，节点属性，样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言
在当今的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编程（1）：节点概念，如何获取元素节点，节点属性，样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
