[对象] 节点 js 输出 - Javascript

Javascript 是一种用于编写网页交互性代码的脚本语言，拥有丰富的内置对象，其中包括 节点对象。节点对象表示 HTML 文档中的元素、文本或属性节点，开发者可以使用节点对象来操作和修改网页的内容和结构。

本文将介绍如何使用 Javascript 输出节点对象的一些常用方法，并提供示例代码。请注意，以下代码是基于 Markdown 格式编写的。

获取节点对象

要操作节点对象，首先需要获取对应的节点。Javascript 提供了多种获取节点对象的方法：

通过 ID 获取节点对象

使用 getElementById 方法可以通过节点的 id 属性获取节点对象。示例代码如下所示：

// HTML
// <div id="myDiv">Hello World!</div>

// Javascript
var myDiv = document.getElementById('myDiv');
console.log(myDiv);  // 输出 <div id="myDiv">Hello World!</div>

通过标签名获取节点对象

使用 getElementsByTagName 方法可以通过标签名获取一组节点对象。示例代码如下所示：

// HTML
// <p>First Paragraph</p>
// <p>Second Paragraph</p>

// Javascript
var paragraphs = document.getElementsByTagName('p');
console.log(paragraphs);  // 输出 [ <p>First Paragraph</p>, <p>Second Paragraph</p> ]

通过类名获取节点对象

使用 getElementsByClassName 方法可以通过类名获取一组节点对象。示例代码如下所示：

// HTML
// <div class="myClass">First Div</div>
// <div class="myClass">Second Div</div>

// Javascript
var elements = document.getElementsByClassName('myClass');
console.log(elements);  // 输出 [ <div class="myClass">First Div</div>, <div class="myClass">Second Div</div> ]

通过选择器获取节点对象

使用 querySelector 或 querySelectorAll 方法可以通过 CSS 选择器获取节点对象。示例代码如下所示：

// HTML
// <div class="container">
//   <p>First Paragraph</p>
//   <p>Second Paragraph</p>
// </div>

// Javascript
var firstParagraph = document.querySelector('.container p');
console.log(firstParagraph);  // 输出 <p>First Paragraph</p>

var allParagraphs = document.querySelectorAll('.container p');
console.log(allParagraphs);  // 输出 [ <p>First Paragraph</p>, <p>Second Paragraph</p> ]

操作节点对象

获取到节点对象后，可以使用它们提供的属性和方法来操作和修改网页的内容和结构。

获取或修改节点的文本内容

使用 textContent 属性可以获取或修改一个节点的文本内容。示例代码如下所示：

// HTML
// <div id="myDiv">Hello World!</div>

// Javascript
var myDiv = document.getElementById('myDiv');
console.log(myDiv.textContent);  // 输出 "Hello World!"

myDiv.textContent = "New Content";
console.log(myDiv.textContent);  // 输出 "New Content"

获取或修改节点的 HTML 内容

使用 innerHTML 属性可以获取或修改一个节点的 HTML 内容。示例代码如下所示：

// HTML
// <div id="myDiv"><p>Hello World!</p></div>

// Javascript
var myDiv = document.getElementById('myDiv');
console.log(myDiv.innerHTML);  // 输出 "<p>Hello World!</p>"

myDiv.innerHTML = "<p>New Content</p>";
console.log(myDiv.innerHTML);  // 输出 "<p>New Content</p>"

添加或删除节点

使用 appendChild 方法可以向一个节点对象的子节点列表末尾添加新节点。示例代码如下所示：

// HTML
// <div id="myDiv">Hello World!</div>

// Javascript
var newParagraph = document.createElement('p');
newParagraph.textContent = "New Paragraph";

var myDiv = document.getElementById('myDiv');
myDiv.appendChild(newParagraph);
console.log(myDiv.innerHTML);
// 输出:
// <div id="myDiv">Hello World!<p>New Paragraph</p></div>

使用 removeChild 方法可以从父节点中删除一个指定的子节点。示例代码如下所示：

// HTML
// <div id="myDiv">
//   <p>First Paragraph</p>
//   <p>Second Paragraph</p>
// </div>

// Javascript
var myDiv = document.getElementById('myDiv');
var firstParagraph = myDiv.getElementsByTagName('p')[0];
myDiv.removeChild(firstParagraph);
console.log(myDiv.innerHTML);
// 输出:
// <div id="myDiv"><p>Second Paragraph</p></div>

以上是一些常用的节点对象的输出和操作方法。掌握这些技巧，可以更好地使用 Javascript 来操作和修改网页的内容和结构，实现丰富的交互效果。祝你编程愉快！