CODEWITHSUNDEEP
javascriptdom
user2307767
user2307767

Reputation: 11

how to use javascript and dom technology

how to use javascript and dom technology to get the values of p and span using div childs ?? this is the code

<html>
<head>
<script>
function afficherTexts(){
var div = document.getElementById("test");
}
</script>
</head>
<body>
<div id="test">
    <p>2002</p>
    <span>Mon texte</span>
    </div>
    <input type=submit value="afficher p"  onClick="afficherTexts()"/>
</body>
</html>

Upvotes: 1

Views: 66

Answers (4)

Tharindu Kumara
Tharindu Kumara

Reputation: 4458

if you add an id to the p tag you can do this easily.

Modify the HTML code:

<div id="test">
    <p id='para'>2002</p>
    <span>Mon texte</span>
    </div>
    <input type=submit value="afficher p"  onClick="afficherTexts()"/>

JavaScript

var value = document.getElementById('para').innerHTML;

Upvotes: 2

Brian S
Brian S

Reputation: 5056

This code will get the values of every paragraph and span in the div, stored separately:

var testDiv = document.getElementById('test');
var output = {};console.log(testDiv.childNodes);
for (var idx in testDiv.childNodes) {
    var child = testDiv.childNodes[idx];
    switch (child.nodeName) {
        case 'P':
            // fallthrough
        case 'SPAN':
            if (output[child.nodeName]) {
                output[child.nodeName].push(child.innerHTML);
            } else {
                output[child.nodeName] = [child.innerHTML];
            }
            break;
        default:
            // empty
            break;
    }
}

console.log(output);

Output:

v Object {P: Array[1], SPAN: Array[1]}
  v P: Array[1]
      0: "2002"
      length: 1
    > __proto__: Array[0]
  v SPAN: Array[1]
      0: "Mon texte"
      length: 1
    > __proto__: Array[0]
  > __proto__: Object

Upvotes: 0

vusan
vusan

Reputation: 5331

Use

div.getElementsByTagName('tagName')[0].innerHTML;

Or

   var nodes=div.childNodes;
   var pHtml = nodes[0].innerHTML;
   var spanHtml = nodes[1].innerHTML;

Upvotes: 1

Dissident Rage
Dissident Rage

Reputation: 2716

Using nodes as opposed to innerHTML. With nodes you can distinguish between text and elements.

// reference to first div
var div = document.getElementsByTagName('div')[0];

// reference to first p in first div
var p = div.getElementsByTagName('p')[0];

// get p text using nodes
var pText = p.childNodes[0].nodeValue;

// reference to first span in first div
var span = div.getElementsByTagName('span')[0];

// get span text
var spanText = span.childNodes[0].nodeValue;

The difference between using nodes and innerHTML is you can get just text if you so wish. Using this method you can bypass any HTML contained in a element and get raw text.

HTML

<p>
    2002
    <span>2003</span>
    2004
</p>

Javascript

var pText = "";

for(var i=0,l=p.childNodes.length;i<l;i++) {
    var node = p.childNodes[i];
    // if node is a text node
    if(node.nodeType===3)
        { pText += node.nodeValue.trim(); }
}

// 20022004
window.alert(pText)

See more on Node and Node.nodeType.

Upvotes: 0

Related Questions