初学JavaScript，一个取文本节点值的问题

页面:
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <p>This is a <i>very good</i> book</p>
  </body>
</html>如何用javascript获取p节点下的所有文本？假定我取到的body节点为bodyElement
very good可以这样取到
var text = bodyElement.getElememtsByTagName("i")[0].nodeValue可是"This is a"和"book"该如何得到？

解决方案 »

  1.   


    <html> 
      <head> 
        <title>test </title> 
      </head> 
      <body> 
        <p>This is a <i>very good </i> book </p> 
      </body> 
    </html><script language="JavaScript" defer>
    var p = document.getElementsByTagName("p")[0];
    alert(p.childNodes[0].nodeValue)
    alert(p.childNodes[2].nodeValue)
    </script>
      

  2.   


    <html> 
      <head> 
        <title>test </title> 
      </head> 
      <body> 
          <p>This is a <i>very good </i> book </p> 
      </body> 
    </html>
    <script type="text/javascript">
     //<![CDATA[
      var p = document.getElementsByTagName("p")[0];
    document.write(p.innerText);
     //]]>
    </script>
    ps:测试过，可以那到文本内容
      

  3.   


    <html> 
      <head> 
        <title>test </title> 
      </head> 
      <body> 
          <p>This is a <i>very good </i> book </p> 
      </body> 
    </html>
    <script type="text/javascript">
     //<![CDATA[
      var p = document.getElementsByTagName("p")[0];
    document.write(p.innerText);
     //]]>
    </script>
    ps:本来想把p.innerText高亮，不好意思
      

  4.   

    完整的适合各浏览器的innerText属性的示例(封装innerText)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head> 
        <title>Ajax_WebService</title> 
        <script type="text/javascript">
            //
        // patch of innerText for firefox
        //
        (function (bool) {
            function setInnerText(o, s) {
                while (o.childNodes.length != 0) {
                    o.removeChild(o.childNodes[0]);
                }            o.appendChild(document.createTextNode(s));
            }        function getInnerText(o) {
                var sRet = "";            for (var i = 0; i < o.childNodes.length; i ++) {
                    if (o.childNodes[i].childNodes.length != 0) {
                        sRet += getInnerText(o.childNodes[i]);
                    }                if (o.childNodes[i].nodeValue) {
                        if (o.currentStyle.display == "block") {
                            sRet += o.childNodes[i].nodeValue + "\n";
                        } else {
                            sRet += o.childNodes[i].nodeValue;
                        }
                    }
                }            return sRet;
            }        if (bool) {
                HTMLElement.prototype.__defineGetter__("currentStyle", function () {
                    return this.ownerDocument.defaultView.getComputedStyle(this, null);
                });            HTMLElement.prototype.__defineGetter__("innerText", function () {
                    return getInnerText(this);
                })            HTMLElement.prototype.__defineSetter__("innerText", function(s) {
                    setInnerText(this, s);
                })
            }
        })( /Firefox/.test(window.navigator.userAgent) );
        
        
        function SubmitMethod(){
                var result = document.getElementById('lblResult');
                if(result.innerText == "")
                    result.innerText = "This is a simple innerText Test!";
                else
                    result.innerText = "";
            }
            
        </script>
    </head> 
    <body> 
    <form id="Coord" action=""> 
        <div> 
            <input type="button" id="btn" value="Change Text" onclick="SubmitMethod();" /> 
            <label id="lblResult"></label> 
        </div> 
      </form> 
    </body> 
    </html>