Javascript zum auslesen von PHP-seiten

[MagierJack]

Könntest du mir einen Vorschlag machen? CSS, ich weiß, was es ist, aber nicht, wie mann es bedient!

 

[struppi]

Nicht CSS, sondern mit einem CSS Selektor. entweder verwendest du ein Selektor Skript - wie das schon erwähnte Sizzle oder du beschränkst dich auf wenige Browser und kannst z.b. das verwenden: https://developer.mozilla.org/En/DOM/Locating_DOM_elements_using_selectors

EDIT: In deinem Fall sähe das so aus:
var el = document.querySelector(".job_motivation .bar_perc");

 

[MagierJack]

Aber das geht nur in Firefox?

 

[struppi]

Nein, in allen, die diese Befehle schon kennen, aber das schrieb ich ja bereits und hab dir auch eine alternative genannt

 

[MagierJack]

Wie muss ich das jetzt machen?

        <script type="text/javascript">

window.onload = function()



{
    var divs   = document.querySelector(".job_motivation .bar_perc");
        i    = 0;

    for (i = 0; i < divs.length; i++) {
        if  (divs[i].className == "bar_perc") {
            alert(divs[i].firstChild.nodeValue);
            break;
                                              }
                                      }
}


        </script>

So ertwa?

 

[struppi]

Ja, so in etwa.

 

[struppi]

Nachtrag, aber du hast die von mir verlinkte Seite gelesen?

 

[MagierJack]

Ja, aber nicht so verstanden! wenn man grade erst seit der 7. Klasse Englisch hat, kann man das einfach nicht! Ich habe nämlich in der 3. Klasse Französisch genommen. Und das Script oben geht nicht!

 

[struppi]

"geht nicht" - heißt die Fehlerkonsole ist leer und alle deine Bemühungen es zum "gehen" zu kriegen sind gescheitert und du magst uns aber auch nicht erzählen, was du probiert hast.

 

[MagierJack]

Ich verstehe einfach das mit dem var el = document.querySelector(".job_motivation .bar_perc"); nicht. Kannst du mir Villeicht mal das Script schreiben? So lerne ich es besser!

 

[struppi]

<div class="job_motivation"><span class="bar_perc">das hier</span></div>
<script>
var el = document.querySelector(".job_motivation .bar_perc"); 
alert(el);
</script>

 

[MagierJack]

Der geht nicht! Er soll hier drauf zugreifen:

<table class="bars">
    <tbody><tr class="job_value">
        <td><img src="images/job/dollar.png" alt=""> </td>

        <td><div class="bar">
    <div class="bar_fill" style="width: 38px;"></div>
    <div class="bar_perc">25%</div>
</div></td>
    </tr>
    <tr class="job_exp">
        <td><img src="images/job/experience.png" alt=""> </td>
        <td><div class="bar">

    <div class="bar_fill" style="width: 11px;"></div>
    <div class="bar_perc">7%</div>
</div></td>
    </tr>
    <tr class="job_luck">
        <td><img src="images/job/luck.png" alt=""> </td>
        <td><div class="bar">
    <div class="bar_fill" style="width: 12px;"></div>

    <div class="bar_perc">8%</div>
</div></td>
    </tr>
    <tr class="job_danger">
        <td><img src="images/job/danger.png" alt=""> </td>
        <td><div class="bar">
    <div class="bar_fill" style="width: 6px;"></div>
    <div class="bar_perc">4%</div>

</div></td>
    </tr>
    <tr class="job_motivation">
        <td><img src="images/job/motivation.png" alt=""> </td>
        <td><div class="bar">
    <div class="bar_fill" style="width: 150px;"></div>
    <div class="bar_perc">[COLOR=Red]100%[/COLOR]</div>
</div>

Und das Script macht seine Sache leider nicht!
Kann mir einer das Script programieren?
Villeicht mit if?

        [COLOR=#800000]<script type=[COLOR=#0000FF]"text/javascript"[/COLOR]>[/COLOR]

window.onload = function()
{
    var divs = document.getElementsByTagName('div'),
        i    = 0;

    for (i = 0; i [COLOR=#000080]< divs.length; i++) {
        if (divs[i].className == 'bar_perc') {
            alert(divs[i].firstChild.nodeValue);
            break;
        }
    }
}

        </script>[/COLOR]

Bitte! ??? ich kann es nicht!

 

[struppi]

Der geht nicht!

Doch das geht!
Du hast mittlerweile die Fehlerkonsole gefunden?

und du kannst so gut englisch umn das zu verstehen?

querySelector
Returns the first matching Element node within the node's subtree. If no matching node is found, null is returned.
querySelectorAll
Returns a NodeList containing all matching Element nodes within the node's subtree, or an empty NodeList if no matches are found.

EDIT: ich sehe aber gerade dein Skript funktionert, du hast ja den querySelektor rausgeworfen.

 

[MagierJack]

Ach so!

querySelector
Gibt das erste passende Element-Knoten innerhalb des Knotens Teilbaum. Wenn kein passender Knoten gefunden, wird null zurückgegeben.
querySelectorAll
Liefert eine NodeList enthält alle passenden Element-Knoten innerhalb des Knotens Teilbaum oder eine leere NodeList, wenn keine Übereinstimmungen gefunden werden.

JA! Verstanden!

 

[MagierJack]

Es geht doch nicht :cry:
Irgendwie greift er nicht auf das richtige Element zu.
Er soll:

    </tr>
    <tr class="[COLOR=Blue]job_motivation[/COLOR]">
        <td><img src="images/job/motivation.png" alt=""> </td>
        <td><div class="bar">
    <div class="bar_fill" style="width: 150px;"></div>
    <div class="[COLOR=RoyalBlue]bar_perc[/COLOR]">[COLOR=Red]100%[/COLOR]</div>
</div>

in der <tr> auf die class job_motivation zugreifen und dann auf bar_perc: die 100%!

Das müßte dach gehen! Mit JavaScript!

 

[struppi]

tut es auch.

 

[MagierJack]

Ja, aber er gibt mir dann nur entweder bei querySelector null zurück und bei querySelectorAll nur etwas in den eckigen klammern ([]) Irgenwie geht es nicht! Hat jemand eine Ahnung?

 

[struppi]

Dann machst du etwas falsch.

EDIT: denn bei mir funktioniert der code einwandfrei:

<div class="job_motivation">
<div class="bar">
    <div class="bar_fill" style="width: 150px;"></div>
    <div class="bar_perc">100%</div>
</div>
</div>

<script type="text/javascript" >
var el = document.querySelector(".job_motivation .bar_perc"); 
alert(el);
</script>

D.h. es wird Zeit, dass du konkreter wirst. Wir können nicht hellsehen und Wissen nicht was du machst - ich kann versuchen zu raten, aber das kann ja nicht der Sinn eines Forums sein.

 

[MagierJack]

Wenn man ihn so einfügt:

<html>
...
<head>

<script type="text/javascript" >
var el = document.querySelector(".job_motivation .bar_perc"); 
alert(el);
</script>

</head>
<body>

<div class="job_motivation">
<div class="bar">
    <div class="bar_fill" style="width: 150px;"></div>
    <div class="bar_perc">100%</div>
</div>
</div>
[CODE]
    <tr class="job_motivation">
        <td><img src="images/job/motivation.png" alt=""> </td>
        <td><div class="bar">
    <div class="bar_fill" style="width: 150px;"></div>
    <div class="bar_perc">100%></div>
</div>
[/CODE]

</body>
</html>

Das in dem Code blöck steht da eigentlich! Und es ist eine tr, nicht eine div mit der job_motivation.
Und was meinst du mit kronkreter werden? ich veruche es doch! aber ich verstehe das einfache noch nicht mit JS. Liste mal deine Fragen hier auf, und ich beantworte sie! Mir scheint es, wir reden aneinander vorebei.

MFG, MagierJack

 

[crash]

querySelector(All) ist doch etwas zu neu, um das zu benutzen, oder? Was spricht denn gegen getElementsByClassName?

[email protected] - javascript-q.git/blob - snippets/getElementsByClassName.js