如何使用javascript和dom技术

如何使用javascript和dom技术获取p和span的值使用div的孩子？这是代码如何使用javascript和dom技术

<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>

来源

2014-03-06 user2307767

你考虑使用库如jQuery？然后你可以做例如''（'div＃test p'）。html（）' –

使用

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

或者

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

来源

2014-03-06 17:33:14 vusan

我想使用getElementById和childs（firstChild ..） – user2307767

但是'span'和'p'没有属性'id'。你只会用'firstChild'方法得到第一个元素。另一种方法是使用'childNodes'方法。 – vusan

如果添加一个id p标签，你可以很容易地做到这一点。

修改HTML代码：

<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;

来源

2014-03-06 17:35:39

...除了'p'（和'span'）元素没有'value'属性......我想你会想用'.innerHTML' –

使用节点，而不是innerHTML的。使用节点可以区分文本和元素。

// 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;

使用节点和innerHTML的区别在于，如果您愿意，您可以获得文本。使用此方法，您可以绕过元素中包含的任何HTML并获取原始文本。

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)

查看更多关于Node和Node.nodeType。

来源

2014-03-06 17:42:26

此代码将得到每段和跨度div中值，分别存储：

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);

输出：

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

来源

2014-03-06 17:57:15

如何使用javascript和dom技术

回答

相关问题