如何使用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技術

回答

相關問題