1.获取元素

在JavaScript中，获取HTML元素通常使用document对象的 getQuerySelector 和 getQuerySelectorAll 方法。

1.1 getQuerySelector

getQuerySelector用于获取单个元素，返回匹配指定选择器的第一个后代元素。通过该方法，可以获取任何指定的HTML元素。

//获取id为myDiv的元素
let myDiv = document.querySelector('#myDiv');

1.2 getQuerySelectorAll

getQuerySelectorAll用于获取一组元素，返回匹配指定选择器的所有后代元素。我们可以通过类似CSS选择器的语法，获取指定的元素。

//获取class为box的所有元素
let allBox = document.querySelectorAll('.box');

2. 修改元素内容

获取元素之后，接下来就是对元素进行修改。常见的元素修改操作包括：修改元素的文本内容，修改元素的HTML内容，添加/移除元素属性，等等。

2.1 修改文本内容

通过修改textContent或innerHTML属性，可以修改元素的文本内容。

textContent：设置或返回指定元素的纯文本内容，包括所有子元素的文本内容，但不包括HTML标记。

innerHTML：设置或返回指定元素的HTML内容，包括所有子元素。

//获取id为myDiv的元素
let myDiv = document.querySelector('#myDiv');
//修改文本内容
myDiv.textContent = 'Hello World!';
//修改HTML内容
myDiv.innerHTML = '
Hello World!
';

2.2 添加/移除元素属性

通过修改元素的属性，可以为元素添加/移除指定的属性。

setAttribute(name, value): 为元素设置属性值，如果属性不存在，则创建它。

removeAttribute(name)：从元素中移除指定的属性。

//获取id为myDiv的元素
let myDiv = document.querySelector('#myDiv');
//为元素设置属性
myDiv.setAttribute('class', 'box');
//从元素中移除属性
myDiv.removeAttribute('class');

2.3 修改元素CSS

通过修改元素的style属性，可以修改元素的CSS样式。

//获取id为myDiv的元素
let myDiv = document.querySelector('#myDiv');
//修改元素的CSS样式
myDiv.style.backgroundColor = 'red';

3. 总结

JavaScript操作HTML元素内容需要使用document对象提供的相关方法进行。首先需要通过getQuerySelector或getQuerySelectorAll方法获取元素，然后再通过修改文本/HTML内容、添加/移除元素属性、修改元素CSS等方法，对元素进行修改。