cbs_mutationObserver_DOM.zip
0.01MB
| (function(){ | |
| const div=document.createElement("div"); | |
| div.setAttribute('id','transcript'); | |
| div.setAttribute('width',"100%"); | |
| div.setAttribute('height','200px'); | |
| div.setAttribute('style',"position:absolute;width:100%;background:skyblue;z-index:9999;text-align:center;font-size:38px;"); | |
| if(document.querySelector('#transcript')){document.querySelector('#transcript').remove();} | |
| document.body.insertBefore(div,document.body.firstElementChild); | |
| var observer=new MutationObserver(function(mutations){ | |
| //to do; | |
| console.log(mutations); | |
| mutations.forEach(function(mutation){ | |
| //if(mutation.type=='characterData'){console.log(mutation.target)}; | |
| if(mutation.type=='childList'){console.log(mutation.target.innerHTML); | |
| div.innerHTML =mutation.target.innerHTML; | |
| } | |
| }) | |
| }); | |
| var target=document.querySelector("#caption-window-1"); | |
| var options={ | |
| childList:true, | |
| subtree:true | |
| } | |
| observer.observe(target,options); | |
| })() |
| (function(){ | |
| const div=document.createElement("div"); | |
| div.setAttribute('id','transcript'); | |
| div.setAttribute('width',"100%"); | |
| div.setAttribute('height','200px'); | |
| div.setAttribute('style',"position:absolute;width:100%;background:skyblue;z-index:9999;text-align:center;font-size:38px;"); | |
| if(document.querySelector('#transcript')){document.querySelector('#transcript').remove();} | |
| document.body.insertBefore(div,document.body.firstElementChild); | |
| var observer=new MutationObserver(function(mutations){ | |
| //to do; | |
| console.log(mutations); | |
| mutations.forEach(function(mutation){ | |
| //if(mutation.type=='characterData'){console.log(mutation.target)}; | |
| if(mutation.type=='childList'){console.log(mutation.target.innerHTML); | |
| div.innerHTML =mutation.target.innerHTML; | |
| } | |
| }) | |
| }); | |
| var target=document.querySelector("#caption-window-1"); | |
| var options={ | |
| childList:true, | |
| subtree:true | |
| } | |
| observer.observe(target,options); | |
| })() |
var div=document.createElement("div");
div.setAttribute('id','transcript');
div.setAttribute('width','800px');
div.setAttribute('height','800px');
div.setAttribute('style',"position:absolute;background:yellow;z-index:5;");
document.body.insertBefore(div,document.body.firstElementChild);
var observer=new MutationObserver(function(mutations){
//to do;
console.log(mutations);
mutations.forEach(function(mutation){
//if(mutation.type=='characterData'){console.log(mutation.target)};
if(mutation.type=='childList'){console.log(mutation.target.textContent);
div.innerHTML +=mutation.target.textContent;
}
})
});
var target=document.querySelector('#cc_uvpjs-container-1622615066213');
var options={
attributes:true,
childList:true,
characterData:true,
subtree:true
}
observer.observe(target,options);
| <body> | |
| <ul id="fruits" class="fruits"><li class="peach">Peaches</li><li class="apple">apples</li><li class="banana" contentEditable>banana peels</li></ul> | |
| <div id="result">Result</div> | |
| </body> | |
| <script> | |
| var result=document.querySelector('#result'); | |
| var div=document.createElement("div"); | |
| div.setAttribute('id','transcript'); | |
| div.setAttribute('width',"100%"); | |
| div.setAttribute('height','200px'); | |
| div.setAttribute('style',"position:absolute;background:skyblue;z-index:5;text-align:center;font-size:30px;"); | |
| if(document.querySelector('#transcript')){document.querySelector('#transcript').remove();} | |
| document.body.insertBefore(div,document.body.firstElementChild); | |
| var observer=new MutationObserver(function(mutations){ | |
| //to do; | |
| console.log(mutations); | |
| mutations.forEach(function(mutation){ | |
| if(mutation.type=='characterData'){console.log(mutation.oldValue,' => ',mutation.target); | |
| result.innerHTML +="<br>"+mutation.oldValue +' => '+mutation.target.nodeValue; | |
| }; | |
| if(mutation.type=='childList'){console.log(mutation.target.innerHTML); | |
| div.innerHTML =mutation.target.innerHTML; | |
| } | |
| }) | |
| }); | |
| var target=document.querySelector("#fruits"); | |
| var options={ | |
| childList:true, | |
| characterData:true, | |
| characterDataOldValue:true, | |
| subtree:true | |
| } | |
| observer.observe(target,options); | |
| </script> |
반응형
'html5' 카테고리의 다른 글
| caption path (0) | 2025.02.02 |
|---|---|
| abc cbs news xml => html and script tag (0) | 2025.01.26 |
| abc news, cbs news caption xml ; <br> html tag trouble shooter (0) | 2025.01.26 |
| clock angle problems (0) | 2024.12.27 |
| tetrahedral boat (1) | 2024.12.20 |
