Chrome扩展如何获取JS动态生成的网页元素？
网页上的很多元素都是通过js动态生成（点击某个button后生成一些例如textArea的元素），如何在这些动态元素生成后，通过Chrome扩展中content.js来获...
网页上的很多元素都是通过js动态生成（点击某个button后生成一些例如textArea的元素），如何在这些动态元素生成后，通过Chrome扩展中content.js来获取这些元素。如果我在元素生成之前用id、className等方式获取得到的都是Null。
展开
展开全部
如果想去给这些并不是由你控制动态生成出来的元素绑定事件应该是不可能的。
但是可以给顶层的document绑定事件来判断点击的是哪个元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='container'></div>
<button id='btn'>生成html</button>
<script>
window.addEventListener('DOMContentLoaded', function() {
var btn = document.querySelector('#btn')
var container = document.querySelector('#container')
// 点击btn动态生成数据
btn.addEventListener('click', function() {
container.innerHTML = ''
container.innerHTML += '<ul class="list"><li>2j13j13ji13kj2kjk2</li><li>sadascc</li><li>sabbbb</li><li>3241241</li></ul>'
container.innerHTML += '<p>时间戳： ' + (new Date).getTime() + '</p>'
})
/*
document 绑定click事件,
document是顶层的html，通过绑定顶层的html去判断动态生成的节点是否存在，如果存在就执行
*/
document.addEventListener('click', function(e) {
var target = e.target // click指向的节点
var nodeName = target.nodeName.toLocaleLowerCase() // click指向的节点tag
if ( nodeName === 'li' ) {
// 如果存在就执行，这里生成的是li tag，所以这里成立，显示了li.textContent的内容
alert(target.textContent)
}
})
})
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
