4

Is there anyway to assign an id to a textNode and then retrieve that text node via that id? I've tried several different ways and keep getting errors saying cannot get property of null.

My code looks something like this...

 var myDiv = document.createdElement('div');
 myDiv.id = "textContainer";

 var textNode = document.createdTextNode("some text");
 textNode.id = "descriptionText";
 myDiv.appendChild(textNode);

Works fine to this point; it displays on the page. Later I try to modify that text node and that's where I'm getting the errors.

 var tempNode = document.getElementById(descriptionText);
 descriptionText.value = "new text";

And it's a no go. I've tried variates like naming by text node with tagName, data, etc., and I'm getting the same error. So, is it not possible to name and retrieve a text node? And the next best solution to create new text nodes and replace the old text node?

Mike P
  • 419
  • 1
  • 7
  • 16
  • 1
    A textnode has no identifier, only elements do, so you select the element, then the textnode. – adeneo Apr 16 '15 at 21:52
  • And `myDiv` is never added to the DOM in your code ? – adeneo Apr 16 '15 at 21:54
  • and `descriptionText` does not have property `value`, maybe `innerText`? – Iłya Bursov Apr 16 '15 at 21:54
  • Yes myDiv is added... I was just trying to keep the code to a minimum... descriptionText is the id of the text node. The text node's inner text is "some text", which was set with var textNode = document.createTextNode("some text"). The first comment makes sense. I do remember reading now that a text node is not an element. So that makes sense. But, with that said, could I just the text node with something like myDive.childNodes[0].value = "some text"? Or do I have to create a new text node and then replace it? – Mike P Apr 16 '15 at 22:00

1 Answers1

8

Text doesn't have a property for id, so when you write the node into the DOM, it's not accessible that way any more. What you create in the JavaScript (a Text object) does not directly correlate to a DOM element like HTMLElement.

In fact, it's not even considered a child of the parent, it's the textContent of the parent. Note that textContent comes from an element inheriting from a Node.

You can assign an "id" to the object when you create it because all objects are just objects, but when you put it into the DOM, all non-standard stuff disappears.

If you test your parent element for it's children:

myDiv.children.length;

You'll see that (if there are no other children) the text node you've added is "absorbed" into the parent as a property.

Here's a little jsfiddle demonstrating.

Side note: this is an over-simplification of how text is handled in the browser. I don't know if I'd call it a gross over-simplification, but it is one either way.

It should be noted that Text inherits from CharacterData which in turn inherits from Node. However, these are interfaces, which limit the scope of available methods / properties.

Additionally, Text nodes are always accessible in the DOM, but not via identifiers or tags. The MDN page for Node.normalize clearly demonstrates how these nodes are available via the childNodes read-only nodeList.

While it is useful to keep this stuff in your back pocket, it's probably not important to think about Text in the context of Nodes and normalization and CharacterData for day to day use.

rockerest
  • 10,412
  • 3
  • 37
  • 67