使用PHP编辑和操作DOM元素的类和数据属性

Question

I have some HTML snippets retrieved through PHP/JSON such as:

<div>
  <p>Some Text</p>
  <img src="example.jpg" />
  <img src="example2.jpg" />
  <img src="example3.jpg" />
</div>

I am loading it with DOMDocument() and xpath and would like to be able to manipulate it so I can add lazy loading to the images like so:

<div>
  <p>Some Text</p>
  <img class="lazy" src="blank.gif" data-src="example.jpg" />
  <img class="lazy" src="blank.gif" data-src="example2.jpg" />
  <img class="lazy" src="blank.gif" data-src="example3.jpg" />
</div>

Which entails:

1. Add class .lazy
2. Add data-src attribute from original src attribute
3. Modify src attribute to blank.gif

I am trying the following but it isn't working:

foreach ($xpath->query("//img") as $node) {
  $node->setAttribute( "class", $node->getAttribute("class")." lazy");
  $node->setAttribute( "data-src", $node->getAttribute("src"));
  $node->setAttribute( "src", "./inc/image/blank.gif");
}

but it isn't working.

Answer 1

Are you sure? The following works for me.

<?php

$html = <<<EOQ
<div>
  <p>Some Text</p>
  <img src="example.jpg" />
  <img src="example2.jpg" />
  <img src="example3.jpg" />
</div>
EOQ;

$dom = new DOMDocument();
$dom->loadHTML($html);

$xpath = new DOMXPath($dom);

foreach ($xpath->query('//img') as $node) {
    $node->setAttribute('class', $node->getAttribute('class') . ' lazy');
    $node->setAttribute( "data-src", $node->getAttribute("src"));
    $node->setAttribute( "src", "./inc/image/blank.gif");
}

echo $dom->saveHTML();