Question

我需要解析一个字符串。该字符串是来自广告服务器的回调，这是格式

<div style="background-color: yellow">
<div>
<div style="left: 10px; width: 100%; height: 0px; position: relative; padding-bottom: 80%;"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/5DkrwfY2jw4" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe></div>
</div>
</div>

只有当样式的背景颜色为黄色时，才需要删除父div。当然我不能使用jquery。

我尝试使用

转换HTML片段中的字符串

var div = document.createElement('div');
div.innerHTML = a.response.html;
var elements = div.childNodes;

但我找不到检查属性是否存在的方法，如果为true，则删除保留子节点的父节点。

Answer 1

div本身不应该是一个问题，因此如果原始背景颜色为黄色，您可以将背景设置为透明：

var s = `<div style="background-color: yellow">
<div>
<div style="left: 10px; width: 100%; height: 0px; position: relative; padding-bottom: 80%;"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/5DkrwfY2jw4" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe></div>
</div>
</div>` 
var div = document.createElement('div');
div.innerHTML = s; // replace with response...
if (div.childNodes[0].style.backgroundColor == 'yellow') div.childNodes[0].style.backgroundColor = 'transparent'
document.body.appendChild(div);

Here's a fiddle

Answer 2

您可以遍历childNodes并检查div是否具有特定样式。

＆＃13;

function checkandAppend(nodes) {

  
  for(node in nodes){
     if (nodes.hasOwnProperty(node))
     if(nodes[node].getAttribute("style") == 'background-color: yellow')
     {
 
        if(nodes[node].childNodes[0].nodeType == 3) // some browser interpret line break as first child 
        document.querySelector("body").appendChild(nodes[node].childNodes[1]);
        else
        document.querySelector("body").appendChild(nodes[node].childNodes[0]);
     }
     else
     {
       document.querySelector("body").appendChild(nodes[node]);
     }
  }
 
}


var div = document.createElement('div');
div.innerHTML = '<div style="background-color: yellow"> <div> <div style="left: 10px; width: 100%; height: 0px; position: relative; padding-bottom: 80%;"> <iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/5DkrwfY2jw4" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe> </div> </div> </div>'

checkandAppend(div.childNodes);

＆＃13;

Answer 3

由于样式是内联设置的，因此您只需读取div的样式属性即可。创建一个div，插入HTML，然后检查第一个div。我想你想在文档中插入它，所以如果第一个div设置为黄色，则在文档中插入其第一个div子节点（即树中的第二个）。否则，插入第一个div。

这种方法并不健全，但如果没有关于如何选择div的更多信息，或者一旦选择了该怎么做，那么你可以做的就更多了。

我已经用一些文字替换了iFrame，但我认为它与答案无关。

＆＃13;

var response = '<div style="background-color: yellow"><div><div style="left: 10px; width: 100%; height: 0px; position: relative; padding-bottom: 80%;">iframe</div></div></div>';

var div = document.createElement('div');
div.innerHTML = response;
var divs = div.getElementsByTagName('div');

if (divs[0].style.backgroundColor == 'yellow') {
  document.body.appendChild(divs[1]);
} else {
  document.body.appendChild(divs[0]);
}

＆＃13;

您可以将 if..else 替换为：

document.body.appendChild(divs[+(divs[0].style.backgroundColor == 'yellow')]);

但这可能有点混淆。

从字符串开始删除javascript中的父节点

3 个答案: