Parsing HTML to return CSS rules from ids and classes attributes with PHP

Question

I hate to have to write down a lot of CSS rules and then enter my styles in it, so I'd like to develop a tiny php script that would parse the HTML I'd pass to it and then return empty CSS rules.

I decided to use PHP's DomDocument.

The question is: How could I loop through the whole structure? (I saw that for example DomDocument only has getElementByTag or getElementById and no getFirstElement for example)

I only want to get the ids and the classes in a given block of HTML code, I'd pass things like:

<div id="testId">
    <div class="testClass">
        <span class="message error">hello world</span>
    </div>
</div>

I only want to know how could I loop through every node?

Thanks!

That would be a lot of selectors. There are multiple ways to describe most elements (which overlap in different ways). It is really unlikely that a tool that spits out a bunch of possible selectors is going to output enough of what you want or not too much of what you don't want to be useful. — Quentin
– Quentin, Commented Oct 20, 2010 at 13:43
XML tools (such as PHP's DOM) are applicable only if you can count on the document being well-formed. Generally speaking HTML and XML are incompatible for this sort of parsing. — nnevala
– nnevala, Commented Oct 20, 2010 at 14:55
David is right. If you want all possible selectors, it would be a massive number. Maybe what you want is just selectors for things that have classes or ids? Could you give sample input and output for what you want? — Nathan Long
– Nathan Long, Commented Oct 20, 2010 at 14:57
@Nathan: As the title of the question says: it's only about ids and classes I don't want nothing more. :/ — Tommy B.
– Tommy B., Commented Oct 20, 2010 at 15:02
@Josh: Instead of saying useless crap please suggest something else. I wanted to make it in ruby but for server setup restrictions (where I work) I couldn't use it... — Tommy B.
– Tommy B., Commented Oct 20, 2010 at 15:12

Josh Stodola · Accepted Answer · 2010-10-20 15:18:51Z

3

You can pass an asterisk (*) to getElementsByTagName to get all tags and then loop through them...

<?php

 $nodes = $xml->getElementsByTagName("*");
 $css = "";

 for ($i = 0; $i < $nodes->length; $i ++)
 {
    $node = $nodes->item($i);    
    if ($node->hasAttribute("class")) {
      $css = $css . "." . $node->getAttribute("class") . " { }\n";
    } elseif ($node->hasAttribute("id")) {
      $css = $css . "#" . $node->getAttribute("id") . " { }\n";
    }
 }

 echo $css;

?>

edited Oct 20, 2010 at 15:18

answered Oct 20, 2010 at 15:08

Josh Stodola

82.8k48 gold badges187 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tommy B. Over a year ago

First: thanks a lot! That is exactly what I was looking for! So far it is not working with the HTML example I gave in the question, but I guess I should wrap a HTML header around it so it would be XML compatible..

Josh Stodola Over a year ago

@Tom I updated the answer, it should be a complete solution now

Josh Stodola Over a year ago

@Tom And this is untested, and I don't know PHP!

Hubert Perron · Accepted Answer · 2010-10-20 15:32:17Z

2

The SimpleXML extension for PHP may help you. It work perfectly to navigate through HTML tree.

http://www.php.net/manual/en/simplexml.examples-basic.php

answered Oct 20, 2010 at 15:32

Hubert Perron

3,0225 gold badges36 silver badges28 bronze badges

1 Comment

Tommy B. Over a year ago

OMG! I'd never though it'd be that simple! I mean: all I did was new SimpleXMLElement($source) and it returned me a complete array with everything I needed! "We have a SITUATION!" Thx for this!

Collectives™ on Stack Overflow

Parsing HTML to return CSS rules from ids and classes attributes with PHP

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related