所以我已经做了很长一段时间了,我得到的最好的方法是将图像包装在一个链接中,并在图像标签后面有一个跨度:
<a href="">
<img src="">
<span></span>
</a>
但我想要的是:
<a href="">
<span></span>
<img src="">
</a>
我尝试了的各种变量和位置
$img->parentNode->appendChild($dom->createElement('span'), $img);
以及在我的代码中的各种地方使用insertBefore(),我完全没有想法,因为我对phpDOM的东西还很陌生。我的来源:
foreach($dom->getElementsByTagName('img') as $img)
{
$fancyHref = $dom->createElement('a');
$clone = $fancyHref->cloneNode();
$img->parentNode->replaceChild($clone, $img);
$clone->appendChild($img);
$img->parentNode->appendChild($dom->createElement('span'));
};
更新:为了明确我的目标:我在html中有一个img标记。在它通过php-dom之后,我希望img标签包装在一个a标签中,在image标签之前有一个span标签:
之前
<img src="" />
之后
<a href="">
<span class=""></span>
<img src="" />
</a>
我目前的代码(没有跨度)
foreach($dom->getElementsByTagName('img') as $img)
{
$src = $img->getAttribute('src');
$filename = substr(strrchr($src , '/') ,1);
$filename = preg_replace('/^[.]*/', '', $filename);
$filename = explode('.', $filename);
$filename = $filename[0];
if($this->imagesTitles[$this->currentLanguage][$filename] !== '')
{
$img->setAttribute('title', $this->imagesTitles[$this->currentLanguage][$filename]);
$img->setAttribute('alt', $this->imagesTitles[$this->currentLanguage][$filename]);
}
else
{
$img->removeAttribute('title');
$img->removeAttribute('alt');
}
$classes = explode(' ', $img->getAttribute('class'));
if(!in_array('no-enlarge', $classes))
{
$fancyHref = $dom->createElement('a');
$span = $dom->createElement('span');
$span->setAttribute('class', 'magnifier');
$fancyHref->setAttribute('class', 'enlarge');
$fancyHref->setAttribute('rel', 'enlarge');
$fancyHref->setAttribute('href', $img->getAttribute('src'));
if($img->getAttribute('title') !== '')
{
$fancyHref->setAttribute('title', $img->getAttribute('title'));
$fancyHref->setAttribute('alt', $img->getAttribute('title'));
}
$clone = $fancyHref->cloneNode();
$img->parentNode->replaceChild($clone, $img);
$clone->appendChild($img);
$img->parentNode->insertBefore($span, $img);
}
$img->setAttribute('class', trim(str_replace('no-enlarge', '', $img->getAttribute('class'))));
if($img->getAttribute('class') === '')
{
$img->removeAttribute('class');
}
}
您可以使用DOMNode->insertBefore()
方法(docs)。其形式为$parentNode->insertBefore( $nodeToBeInserted, $nodeToInsertBefore )
。你的代码是:
$img->parentNode->insertBefore( $dom->createElement('span'), $img );
DOMNode->appendChild()
(docs)只有1个参数(插入的节点),并且该节点将始终插入在最后一个子节点之后。
编辑:
我现在已经测试了我的代码,如果您在测试用例中用我的行替换$img->parentNode->appendChild($dom->createElement('span'));
,它最终会得到正确的格式。然而,您正在以一种非常令人困惑的方式操纵元素。除此之外,如果我测试你更新的代码,我要么得到你想要的格式,要么根本没有span元素。。。
要替换的元素是图像,因为这是文档中唯一的原始元素。因此,您应该克隆该元素。虽然您当前的代码消除了层次结构错误,但您正在复制所有更改的代码,而不仅仅是冲突的元素,这是在浪费内存和时间。当您复制冲突元素时,这很容易。您可以按照希望元素出现的顺序将它们附加到a中。附加图像时,请改为附加克隆。请勿操作$img
。如果需要操作映像,则必须操作克隆。然后,您只需将$img
替换为您操作的元素(在您的案例中为$fancyHref
)。
$html = '<img src="">';
$dom = new DOMDocument();
$dom->loadHTML($html);
foreach($dom->getElementsByTagName('img') as $img) {
$fancyHref = $dom->createElement('a');
$clone = $img->cloneNode();
$span = $dom->createElement( 'span' );
#... do whatever you need to do to this span, the clone and the a element ...
#... when you are done, you can simply append all elements you have been manipulating ...
$fancyHref->appendChild( $span );
$fancyHref->appendChild( $clone );
$img->parentNode->replaceChild( $fancyHref, $img );
};
echo $dom->saveHTML();
Ummm。我知道这可能不是一个答案,但你不是已经有了吗我的意思是。。我试过你的代码:
$dom = new DOMDocument;
$dom->loadHTMLFile("data.html");
foreach($dom->getElementsByTagName('img') as $img){
$src = $img->getAttribute('src');
$filename = substr(strrchr($src , '/') ,1);
$filename = preg_replace('/^[.]*/', '', $filename);
$filename = explode('.', $filename);
$filename = $filename[0];
$classes = explode(' ', $img->getAttribute('class'));
if(!in_array('no-enlarge', $classes))
{
$fancyHref = $dom->createElement('a');
$span = $dom->createElement('span');
$span->setAttribute('class', 'magnifier');
$fancyHref->setAttribute('class', 'enlarge');
$fancyHref->setAttribute('rel', 'enlarge');
$fancyHref->setAttribute('href', $img->getAttribute('src'));
if($img->getAttribute('title') !== '')
{
$fancyHref->setAttribute('title', $img->getAttribute('title'));
$fancyHref->setAttribute('alt', $img->getAttribute('title'));
}
$clone = $fancyHref->cloneNode();
$img->parentNode->replaceChild($clone, $img);
$clone->appendChild($img);
$img->parentNode->insertBefore($span, $img);
}
$img->setAttribute('class', trim(str_replace('no-enlarge', '', $img->getAttribute('class'))));
if($img->getAttribute('class') === ''){
$img->removeAttribute('class');
}
}
echo "<pre>" . htmlentities($dom->saveHTML()) . "</pre>";
将此(data.html)作为源数据:
<!doctype html>
<html>
<head>
</head>
<body>
<img src="http://lorempixel.com/g/400/200/" alt="alts" title="tits">
</body>
</html>
结果是:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a class="enlarge" rel="enlarge" href="http://lorempixel.com/g/400/200/" title="tits" alt="tits">
<span class="magnifier">
</span>
<img src="http://lorempixel.com/g/400/200/" alt="alts" title="tits"></a>
</body>
</html>
所以。。这不是你想要的吗D