JS实现改变HTML上文字颜色和内容的方法

要实现改变HTML上文字颜色和内容，需要掌握以下知识：

1. 从HTML DOM中获取元素：使用document对象下的方法，如getElementById等，获取需要改变的元素节点。

2. 更改元素样式：使用style对象下的属性，如color，backgroundColor等，改变元素样式。

3. 更改元素内容：使用innerHTML属性，将元素内容替换为新的内容。

下面通过两个示例，详细讲解JS实现改变HTML上文字颜色和内容的方法。

示例1：点击按钮改变文字颜色

首先，在HTML中添加一个按钮和一个文字元素：

<button onclick="changeColor()">改变颜色</button>
<p id="myPara">这是要改变颜色的文字。</p>

接着，在JS代码中，定义一个函数changeColor，获取要改变颜色的元素，然后改变样式。

function changeColor() {
  var myPara = document.getElementById("myPara");
  myPara.style.color = "red";
}

这个函数中，首先使用getElementById方法从document中获取id为"myPara"的元素节点，然后使用style属性，将元素文字颜色改为red。

示例2：点击按钮改变文字内容

同样地，在HTML中，添加一个按钮和一个文字元素：

<button onclick="changeContent()">改变内容</button>
<p id="myPara">这是要改变内容的文字。</p>

接着，在JS代码中，定义一个函数changeContent，获取要改变内容的元素，然后使用innerHTML属性替换元素内容。

function changeContent() {
  var myPara = document.getElementById("myPara");
  myPara.innerHTML = "这是新的内容。";
}

这个函数中，同样使用getElementById方法从document中获取id为"myPara"的元素节点，然后使用innerHTML属性将元素内容替换为"这是新的内容。"

通过上述示例，我们可以看到JS实现改变HTML上文字颜色和内容的方法。简单来说，就是获取要操作的元素节点，然后使用相关属性改变元素样式和内容。