JavaScript第十讲：DOM编程（1）：节点概念，如何获取元素节点，节点属性，样式

本文主要是介绍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）：节点概念，如何获取元素节点，节点属性，样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

JavaScript第十讲：DOM编程（1）：节点概念，如何获取元素节点，节点属性，样式

前言

DOM 中的节点

DOM 节点示例代码

Location 对象

Location 对象示例代码

如何获取元素节点

1. 通过id获取元素节点

2. 通过标签名称获取元素节点

3. 通过类名获取元素节点

4. 通过表单元素的name获取元素节点

5. 为什么会获取不到?

6. 获取属性节点

7. 获取内容节点

节点属性

1. 节点名称 (NodeName)

2. 节点值 (NodeValue)

3. 节点类型 (NodeType)

4. 元素的文本内容 (TextContent)

5. 元素上的属性 (Attributes)

样式

1. 隐藏和显示元素

隐藏元素

显示元素

2. 改变背景色

结语

相关文章

Java 正则表达式URL 匹配与源码全解析

Java使用ANTLR4对Lua脚本语法校验详解

Java字符串操作技巧之语法、示例与应用场景分析

Java Optional的使用技巧与最佳实践

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

基于Java实现回调监听工具类

使用Java将DOCX文档解析为Markdown文档的代码实现

Java字符串处理全解析(String、StringBuilder与StringBuffer)

springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法

Spring Boot循环依赖原理、解决方案与最佳实践(全解析)