JS 获取元素填充 - Javascript

在Web开发中，常常需要通过Javascript获取网页中的元素以进行填充。在本篇文章中，将介绍如何使用Javascript获取元素并进行填充的方法。

使用getElementById获取元素

通过document.getElementById()方法可以获取指定id的元素。其中getElementById为方法名，需要传入一个字符串参数为目标元素对应的id值。例如，假设网页中有一个具有以下HTML代码的div元素：

<div id="exampleDiv"></div>

可以通过以下Javascript代码获取该元素并进行填充：

const exampleDiv = document.getElementById('exampleDiv');
exampleDiv.textContent = 'hello world';

以上代码中，exampleDiv是获取到的DOM元素，textContent为DOM元素的一个属性，可以用来设置该元素的文本内容。这里将exampleDiv元素的文本内容设为了hello world。

使用querySelector获取元素

除了通过元素的id来获取元素，也可以使用CSS选择器语法来选择元素。document.querySelector()方法可以通过CSS选择器获取一个元素。例如，假设网页中有以下HTML代码：

<div class="exampleClass"></div>

可以通过以下Javascript代码获取该元素并进行填充：

const exampleDiv = document.querySelector('.exampleClass');
exampleDiv.textContent = 'hello world';

以上代码中，类名为exampleClass的div元素被获取到并填充了文本内容。

使用innerHTML进行HTML填充

以上两种方法均用于获取DOM元素，获取到元素后可以通过修改该元素的textContent属性来填充文本内容。但如果需要填充HTML代码，可以使用元素的innerHTML属性。例如，假设网页中有以下HTML代码：

<div id="exampleDiv"></div>

可以通过以下Javascript代码填充该元素：

const exampleDiv = document.getElementById('exampleDiv');
exampleDiv.innerHTML = '<a href="#">click here</a>';

以上代码中，exampleDiv元素被填充了一个超链接元素。需要注意的是，innerHTML属性并不安全，可能存在XSS攻击的风险。

总结

本篇文章介绍了三种常见的Javascript获取元素并进行填充的方法：使用getElementById方法、使用querySelector方法和使用innerHTML属性。开发者可以根据实际需求选择合适的方法进行元素填充。