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

标签：JavaScript DOM 元素 var document 节点属性

前言

在当今的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