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>
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;
p (and span) elements don't have value properties... I think you'll want to use .innerHTMLUse
div.getElementsByTagName('tagName')[0].innerHTML;
Or
var nodes=div.childNodes;
var pHtml = nodes[0].innerHTML;
var spanHtml = nodes[1].innerHTML;
id for span and p. And you would only get first element with firstChild method. Another way you can do is by using childNodes method.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.
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
$('div#test p').html()