document.getElementById(id):根据id获取元素
document.getElementsByTagName(tagname):根据标签名获取元素集合
document.getElementsByClassName(classname):根据类名获取元素集合
document.querySelector(selector):根据CSS选择器获取第一个匹配的元素
document.querySelectorAll(selector):根据CSS选择器获取所有匹配的元素集合
这些方法都可以获取动态添加的元素,不需要特别处理。
使用事件委托(Event Delegation)的方式
事件委托是一种常用的技术,可以处理动态添加的元素。事件委托是将事件处理程序添加到父元素上,而不是添加到每个子元素上。当事件触发时,事件会冒泡到父元素,从而触发事件处理程序。
例如,如果您需要在动态添加的按钮上添加点击事件,您可以将事件处理程序添加到它们的父元素上,如下所示:
const parentElement = document.getElementById('parent-element');
parentElement.addEventListener('click', function(event) {
if (event.target.classList.contains('dynamic-button')) {
这段代码将在父元素上添加一个点击事件处理程序,当点击任何子元素时,会冒泡到父元素并触发处理程序。然后,代码会检查被点击的元素是否是动态添加的按钮,如果是,则处理点击事件。
以上是两种使用原生 JavaScript 获取动态添加的元素的方法,希望能对您有所帮助。