javascript - trick to getText and setText -

joe.bq.wang

浏览: 399688 次
性别:
来自: 上海

最近访客更多访客>>

musicull

hillsoul

virtual_garden

mengke111

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript - trick to getText and setText

博客分类：

javascript

javascript

it is not as simple as you think to settext or get text to some element in javascript, by simply reading the textContent or write to the text content.

Below show the code on the impl of getText and setText, along with its imple comments.

/**************************************
*@Name: textcontent.js
*@Summary
*  This example will shows you some technique to manipulate the text inside the 
*
* 
* set text to some element, we have to consider the situation when the element has child elements (including the text child elements) 
* 
* and get text, we have to go through the text to find one . 
*
***************************************/


/**
* @Function: setText
* @Summary: setText
* @Comment: You will need to remove the original child element so that you will have a clean elemnet to insert text to
*
* NOTE: this code shows example, and is not supposed to be useful without context.
*/
function setText(elem, text) {
  while (elem.firstChild) {
    elem.removeChild(elem.firstChild);
  }

  // inject the escaped text node; 
  // NOTE: please do not insert the text just as simply as you think 
  elem.appendChild(document.createTextNode(text));

}

/**
* @Function: getText
* @Summary: getText
* @Comment: you will need to iterate through the elem's children.
*
* NOTE: this code shows example, and is not supposed to be useful without context.
*/
function getText(elem) {
  var text = "";

  for (var i = 0, l = elem.childNodes.length; i < l; i++) {

    var cur = elem.childNodes[i];
    // A text node has a nodeType === 3
    if (cur.nodeType === 3)
      text += cur.nodeValue;
    // If it's an element we need to recurse further
    else if (cur.nodeType === 1)
      text += getText(cur);
  }
  return text;
}

and below is the test code that shows you how to use the function .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- textcontent.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../unit.js"></script>
    <script type="text/javascript" src="textcontent.js"></script>
    <script type="text/javascript">
      window.onload = function () {
        test("test get text", function () {
          var b = document.getElementById("test");
          var text = getText(b);
          assert(text === "Hello, I'm a ninja!", "Examine the text contents of an element.");
          assert(b.childNodes.length === 2, "An element and a text node exist.");
        });

        test("test set text", function () {
          var b = document.getElementById("test");
          setText(b, "Some new text");
          var text = b.textContent || b.innerText;
          assert(text === "Some new text", "Set a new text value.");
          assert(b.childNodes.length === 1, "Only one text nodes exists now.");
        });
      };
    </script>
    <style type="text/css">
      #results li.pass { color:Green }
      #results li.fail { color:red}
    </style>
</head>
<body>
<div id="test"><b>Hello</b>, I'm a ninja!</div>
<div id="test2"></div>
<ul id="results" />

</body>
</html>

分享到：

javascript expando and attributes | javascript - trick/guideline to remove D ...

2012-08-14 07:40
浏览 1143
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript - trick to getText and setText

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript - trick to getText and setText

评论

发表评论

相关推荐

javascript - trick to cross browser DOM ready event

javascript - trick to simulate mouseenter and mouseleave

javascript - trick to simulate the change event

javascript - trick to simulate bubbling submit event

javascript - trick to implement bubbling submit event

javascript - trick to detect bubbling supportability

javascript - trigger event and custom events

javascript - trick to handlers management

javascript - trick to centralized store

javascript - trick to fix the event object

javascript - tricks to deal with colors

javascript - trick to manipulate the opacity

javascript - trick to test visibility of an element

javascript - trick to get and set height and width

javascript - trick to set/get attributes that expects px values

javascript - trick to get and set CSS style

javascript - trick to normalize href for IE

javascript - trick IE form and its expando attribute

javascript expando and attributes

javascript - trick/guideline to remove DOM element

最近访客更多访客>>