纯Javascript可以获取所有span元素，但可以通过定义的类进行特定的编辑

Pure Javascript to get all span elements but make editable specificly by the defined class

本文关键字：定义 可以通过 编辑 Javascript 获取 元素 span      更新时间：2023-09-26

我只需要纯javascript的帮助，下面的代码就可以像我的文章标题中提到的那样工作。

jsfiddle：演示

完整来源粘贴在下面：

<!DOCTYPE html>
<script>
function init_events(){
if (!document.getElementsByTagName){ return; }

在这里获取所有跨度

var divReports = document.getElementById('reports');
divReports.innerHTML = '<ol><b>Reports:</b>';
var allSpans = document.getElementsByTagName('span');
// Not getting or alerting values
var allCanEditSpans = function(){
if(allSpans.className == 'canEdit'){
alert("canEdit!");
}
};
// Not getting or alerting values
var allCant_EditSpans = function(){
if(allSpans.className == 'cant_Edit'){
alert("cant_Edit!");
}
};

添加事件

if (document.addEventListener) { // For all browsers minus IE
divReports.innerHTML += '<li>Total '+ allSpans.length + ' spans detected.</li>';
divReports.innerHTML += '<li>Total '+ allCanEditSpans.length + ' Editable spans detected.</li>';
divReports.innerHTML += '<li>Total '+ allCant_EditSpans.length + ' Not Editable spans detected.</li>';
divReports.innerHTML += '</ol>';
divReports.innerHTML += '<ol><b>Actice Span:</b>';
for (var i=0; i<allSpans.length; i++){
var activeSpan = allSpans[i];
divReports.innerHTML += '<li>Active Span ID: ' + activeSpan.id + ''nSpan Text: ' + activeSpan.innerHTML +'</li>';
if (activeSpan.className == 'canEdit') {
activeSpan.addEventListener('mouseover', function (e) {
activeSpan.style.cursor = 'pointer';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = '1px solid red';
divReports.innerHTML += '<li>On Mouse Active Span: '+activeSpan.id +'</li>'; // Debug - Why it always takes the last span
});
activeSpan.addEventListener('mouseout', function (e) {
activeSpan.style.cursor = 'auto';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = 'none';
});
activeSpan.addEventListener('click', function (e) {
activeSpan.style.cursor = 'auto';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = '1px dotted yellow';
activeSpan.innerHTML = '<input type="text" name="txtInput">'; // Add text box
activeSpan.innerHTML += '<input type="button" name="butSave" value="Save">';    // Add Save button
activeSpan.innerHTML += '<input type="button" name="butCancel" value="Cancel">'; // Add Cancell butto
});
}
divReports.innerHTML += '</ol>';
}
}else {  // For the always BUGGY or Lonely IE!
divReports.innerHTML += '<li>Total '+ allSpans.length + ' spans detected.</li>';
divReports.innerHTML += '<li>Total '+ allCanEditSpans.length + ' Editable spans detected.</li>';
divReports.innerHTML += '<li>Total '+ allCant_EditSpans.length + ' Not Editable spans detected.</li>';
divReports.innerHTML += '</ol>';
divReports.innerHTML += '<ol><b>Actice Span:</b>';
for (var i=0; i<allSpans.length; i++){
var activeSpan = allSpans[i];
divReports.innerHTML += '<li>Active Span ID: ' + activeSpan.id + ''nSpan Text: ' + activeSpan.innerHTML +'</li>';

检查它们是否属于canEdit类

if (activeSpan.className == 'canEdit') {
activeSpan.attachEvent('onmouseover', function (e) {
activeSpan.style.cursor = 'pointer';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = '1px solid red';
divReports.innerHTML += '<li>On Mouse Active Span: '+activeSpan.id +'</li>'; // Debug - Why it always takes the last span
});
activeSpan.attachEvent('onmouseout', function (e) {
activeSpan.style.cursor = 'auto';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = 'none';
});
activeSpan.attachEvent('onclick', function (e) {
activeSpan.style.cursor = 'auto';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = '1px dotted yellow';
activeSpan.innerHTML = '<input type="text" name="txtInput">'; // Add text box
activeSpan.innerHTML += '<input type="button" name="butSave" value="Save">';    // Add Save button
activeSpan.innerHTML += '<input type="button" name="butCancel" value="Cancel">'; // Add Cancell butto
});
}
}
divReports.innerHTML += '</ol>';
}

// DEBUG TEST -> START
var spans = document.getElementsByTagName("span");
for (var i = 0; i < spans.length; i++) {
if (spans[i].className == 'canEdit') {
spans[i].style.backgroundColor = '#999dee';
}
if (spans[i].className == 'cant_Edit') {
spans[i].style.backgroundColor = '#555dee';
}
}
// DEUG TEST <- END
}

</script>
<span id="span_1" class="canEdit">I am editable!</span>
<br>
<span id="span_2" class="cant_Edit">I am not editable!</span>
<br>
<span id="span_3" class="canEdit">I am editable!</span>
<br>
<hr>
<p>Not span</p>
<table border="1">
<tr>
<td><span id="span_td1" class="cant_Edit">I am not editable!</span></td>
<td><span id="span_td2" class="canEdit">I am editable!</span></td>
<td><span id="span_td3" class="cant_Edit">I am not editable!</span></td>
<td>Not span</td>
</tr>
</table>
<hr>
<div id="reports">
</div>
<script>
init_events();
</script>

//未获取或警告值

var allCanEditSpans = function(){
  if(allSpans.className == 'canEdit') {
...
var allSpans = document.getElementsByTagName('span'); //allSpans is an HTMLCollection

getElementsByTagName的结果是HTMLCollection，它不具有className属性。

var allCanEditSpans = function(){
    var count = 0;
    for(var i = 0; i < allSpans.length; i ++) {
        if(allSpans[i].className === 'canEdit') {
            count ++;
        }
    }
    return count;
}();

并像这样使用：

divReports.innerHTML += '<li>Total '+ allCanEditSpans + ' Editable spans detected.</li>';

对于较新的浏览器，您可以使用Array.prototype.filter，如：

var allCant_EditSpans = function() {
    return Array.prototype.filter.call(allSpans, function(span) {
        return span.className === 'cant_Edit';
    }).length;
}();

使用新的Selectors API：

var allCanEditSpans = document.querySelectorAll('span.canEdit').length;

更新的jsFiddle演示

EDIT：对于事件侦听器部分，您需要创建一个闭包

if (activeSpan.className == 'canEdit') {
    (function(aSpan) {
        aSpan.addEventListener('mouseover', function (e) {
        aSpan.style.cursor = 'pointer';
        aSpan.title = 'Click to Edit.';
        aSpan.style.border = '1px solid red';
        divReports.innerHTML += '<li>On Mouse Active Span: '+aSpan.id +'</li>'; // Debug - Why it always takes the last span
    })(activeSpan);
}

jsFiddle演示

相关文章：