一个容易弄错的.textContent和text()问题
最近在写一些前端页面，遇到需要通过点击事件获取被点击对象的文本内容，正确代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Target</title>
</head>
<body>
<div id="tom">
TOmCat
</div>
</body>
<script>
$(document).ready(function() {
$('#tom').click(function(e) {
var strContent = $(e.currentTarget).text(); // 这里要用.text()获取文本内容
alert(strContent); // output: TOmCat
});
});
</script>
</html>
我一顿搜索（soso），发现还有人说可以用textContent熟悉来获取，我试了一下，直接alert出来是undefined ，可见只能用.text()来获取被点击对象的文本内容。
然后 .textContent属性一般用于某个具体的对象，举例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Target</title>
</head>
<body>
<div id="tom">
TOmCat
<div class="tabs">
<div class="tab-item">
Item1
</div>
<div class="tab-item">
Item2
</div>
<div class="tab-item">
Item3
</div>
</div>
</div>
</body>
<script>
$(document).ready(function() {
var objectTabItems = $('#tom .tabs div.tab-item');
var num = objectTabItems.length;
for(var i = 0; i < num; i++) {
let strContent = objectTabItems[i].textContent;
alert("this click is:" + strContent);
}
});
</script>
</html>
可以看出来.textContent是在取到某个具体元素对象的时候使用。
