I am working on a CRM system where I can only write javascript in onloadfunc. My intenton is get data-filename from newly added li tag to the DOM and send notifications. Please note that my targetNode is inside an IFRAME. I have many other upload fields besides this upload field. My code is working with no Iframe but it is not working in this situation.
var targetNode = document.getElementById('filelist_cf_1267610');
var config = {childList: true, subtree: true };
var ActiveDraftsCallback = function(mutationsList, observer) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log('A child node has been added or removed.');
}
}
}
};
var observer = new MutationObserver(ActiveDraftsCallback);
observer.observe(targetNode, config);
<iframe name="win_lst" id="win_lst" src="fp_list.jsp?fieldid=1267609&codedid=QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~&uptype=0" frameborder="0">
<html lang="en">
<head>
<body style="background:#FFFFFF">
<div id="uploaded-filelist" class="uploaded-filelist">
<form action="fp_list.jsp" method="POST">
<input type="hidden" name="ss_formtoken" id="ss_formtoken" value="60B19CD9C086ED81DC1FC23B65D6E9942F94BEEEA96F60CAA533B8705E6D013A">
<input type="hidden" name="fieldid" value="1267609">
<input type="hidden" name="codedid" value="QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~">
<input type="hidden" name="uptype" value="0">
<input type="hidden" name="isanno" value="0">
<input type="hidden" name="delefile" id="delefile" value="">
<div id="updatedresult" style="display:none">
<div id="cf_1267609" style="display:inline-block"><button type="button" class="Button" name="iconbutton" aria-label="Upload" title="" onclick="x_uploadfolder(1267609,'QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~','File Manager')" data-original-title="Upload"><i class="fa fa-upload" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" class="Button" name="iconbutton" title="" aria-label="Merge Files" onclick="x_mergefile(1267609,-1,'QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~')" data-original-title="Merge Files"><i class="fa fa-clone" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,null,'Delete File(s)','Are you sure you want to delete the following file(s)?')" class="btn btn-default faButton DisabledButton" id="delete_1267609" name="delete_1267609" data-original-title="Delete Selected Files" aria-label="Delete Selected Files" disabled=""><i class="fa fa-trash" style="cursor:pointer" data-original-title="" title=""></i></button></div>
<i class="fa fa-history fa-lg text-help Pointer" onclick="openinmwin('/s_cusfieldhistory.jsp?ismwin=1&appid=102946&objectid=1127956&fieldid=1267609');" id="his_1267609" title="" aria-label="History" data-original-title="History"></i>
<div class="toggleButtonGroup"><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle active" id="gridviewbtn_1267609" name="gridviewbtn_1267609" data-original-title="Grid View" disabled=""><i class="fa fa-th-large" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle" id="listviewbtn_1267609" name="listviewbtn_1267609" data-original-title="List View"><i class="fa fa-list" style="cursor:pointer" data-original-title="" title=""></i></button></div>
<div class="ssUploadedFileList" data-orderby="date|desc">
<ul id="filelist_cf_1267609" class="">
<li class="ssUploadedFileList-listViewHeader"><span> </span><span data-sorttype="filename"><span>File Name</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="size"><span>Size</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="date"><span>Date</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span> </span></li>
<li data-filename="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" data-size="824" data-date="1540390632018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-0" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf"><span> </span><label for="uploadedFileSet1267609-0" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267609_1" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_1"><a href="/files/spool/404048/1127956/80_1267609_1127956/Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf?fs=1" title="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" target="_blank">Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf</a></span><span>824 KB - 2018-10-24 10:17am</span></span><span id="renamespan_1127956_1267609_1" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_1" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>824 KB - 2018-10-24 10:17am</span></span><span class="ssUploadedFileList-size">824 KB</span><span class="ssUploadedFileList-date">2018-10-24 10:17am</span>
<div id="options_1127956_1267609_1" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul>
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267609_1" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,1)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,1,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li>
<li data-filename="111mergefile_180904.pdf" data-size="283" data-date="1536094080018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-1" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="111mergefile_180904.pdf"><span> </span><label for="uploadedFileSet1267609-1" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267609_2" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_2"><a href="/files/spool/404048/1127956/80_1267609_1127956/111mergefile_180904.pdf?fs=1" title="111mergefile_180904.pdf" target="_blank">111mergefile_180904.pdf</a></span><span>283 KB - 2018-09-04 4:47pm</span></span><span id="renamespan_1127956_1267609_2" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_2" value="111mergefile_180904.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>283 KB - 2018-09-04 4:47pm</span></span><span class="ssUploadedFileList-size">283 KB</span><span class="ssUploadedFileList-date">2018-09-04 4:47pm</span>
<div id="options_1127956_1267609_2" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul>
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'111mergefile_180904.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267609_2" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,2)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,2,'111mergefile_180904.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li>
</ul>
<div class="ssUploadedFileList-footer"><span class="total">Total Files: 2</span></div>
</div>
</div>
<div id="updatedpdfresult" style="display:none"></div>
<div id="cf_1267609_container">
<div id="cf_1267609" style="display:inline-block"><button type="button" onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,null,'Delete File(s)','Are you sure you want to delete the following file(s)?')" class="btn btn-default faButton DisabledButton" id="delete_1267609" name="delete_1267609" data-original-title="Delete Selected Files" aria-label="Delete Selected Files" disabled=""><i class="fa fa-trash" style="cursor:pointer" data-original-title="" title=""></i></button></div>
<div class="toggleButtonGroup"><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle active" id="gridviewbtn_1267609" name="gridviewbtn_1267609" data-original-title="Grid View" disabled=""><i class="fa fa-th-large" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle" id="listviewbtn_1267609" name="listviewbtn_1267609" data-original-title="List View"><i class="fa fa-list" style="cursor:pointer" data-original-title="" title=""></i></button></div>
<div class="ssUploadedFileList" data-orderby="date|desc">
<ul id="filelist_cf_1267609" class="">
<li class="ssUploadedFileList-listViewHeader"><span> </span><span data-sorttype="filename"><span>File Name</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="size"><span>Size</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="date" class="descending"><span>Date</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span> </span></li>
<li data-filename="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" data-size="824" data-date="1540390632018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-0" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf"><span> </span><label for="uploadedFileSet1267609-0" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267609_1" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_1"><a href="/files/spool/404048/1127956/80_1267609_1127956/Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf?fs=1" title="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" target="_blank">Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf</a></span><span>824 KB - 2018-10-24 10:17am</span></span><span id="renamespan_1127956_1267609_1" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_1" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>824 KB - 2018-10-24 10:17am</span></span><span class="ssUploadedFileList-size">824 KB</span><span class="ssUploadedFileList-date">2018-10-24 10:17am</span>
<div id="options_1127956_1267609_1" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul>
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267609_1" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,1)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,1,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li>
<li data-filename="111mergefile_180904.pdf" data-size="283" data-date="1536094080018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-1" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="111mergefile_180904.pdf"><span> </span><label for="uploadedFileSet1267609-1" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267609_2" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_2"><a href="/files/spool/404048/1127956/80_1267609_1127956/111mergefile_180904.pdf?fs=1" title="111mergefile_180904.pdf" target="_blank">111mergefile_180904.pdf</a></span><span>283 KB - 2018-09-04 4:47pm</span></span><span id="renamespan_1127956_1267609_2" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_2" value="111mergefile_180904.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>283 KB - 2018-09-04 4:47pm</span></span><span class="ssUploadedFileList-size">283 KB</span><span class="ssUploadedFileList-date">2018-09-04 4:47pm</span>
<div id="options_1127956_1267609_2" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul>
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'111mergefile_180904.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267609_2" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,2)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,2,'111mergefile_180904.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li> </ul>
</div>
</div>
</form>
</div>
</body></html>
</iframe>Since you just watch the childList you don't need to filter mutations by type, because they are all going to be of type childList.
So just forEach through mutations and console.log the every first addedNodes
var targetNode = document.getElementById('filelist_cf_1267610');
var config = {
childList: true,
subtree: true
};
var ActiveDraftsCallback = function(mutations, observer) {
mutations.forEach(({
addedNodes
}) => {
const li = addedNodes[0];
if (li && li.nodeName == 'LI') {
console.log(li.getAttribute("data-filename"));
}
});
};
var observer = new MutationObserver(ActiveDraftsCallback);
observer.observe(targetNode, config);
// imitate adding a li in 2secs
const li = document.createElement("li");
li.setAttribute("data-filename", "test");
setTimeout(() => {document.getElementById("filelist_cf_1267610").appendChild(li)}, 2000);<ul id="filelist_cf_1267610" class="listView">
<li class="ssUploadedFileList-listViewHeader"><span> </span><span data-sorttype="filename"><span>File Name</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="size"><span>Size</span>
<i
class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="date" class="descending"><span>Date</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title=""
title=""></i></span><span> </span></li>
<li data-filename="asif.pdf" data-size="74" data-date="1544642199018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267610" id="uploadedFileSet1267610-0" data-fieldid="1267610" data-fileicon="fa fa-file-pdf-o" value="asif.pdf"><span> </span><label for="uploadedFileSet1267610-0" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267610_1" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267610_1"><a href="/files/spool/404048/1127956/80_1267610_1127956/asif.pdf?fs=1" title="asif.pdf" target="_blank">asif.pdf</a></span><span>74 KB - 2018-12-12 2:16pm</span></span>
<span
id="renamespan_1127956_1267610_1" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267610_1" value="asif.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>74 KB - 2018-12-12 2:16pm</span></span><span class="ssUploadedFileList-size">74 KB</span><span class="ssUploadedFileList-date">2018-12-12 2:16pm</span>
<div id="options_1127956_1267610_1" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul style="display: none;">
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267610,1127956,80,'asif.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267610_1" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267610,1127956,1)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267610,1127956,80,1,'asif.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li>
</ul>