HTML Javascript get textNode by id tagname anything? - Stack Overflow

admin管理员组

文章数量:1333692

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?

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?

• javascript
• html
• textnode

Share Improve this question Follow asked Apr 16, 2015 at 21:50 Mike PMike P 41911 gold badge77 silver badges1616 bronze badges 4

• 1 A textnode has no identifier, only elements do, so you select the element, then the textnode. – adeneo Commented Apr 16, 2015 at 21:52
• And myDiv is never added to the DOM in your code ? – adeneo Commented Apr 16, 2015 at 21:54
• and descriptionText does not have property value, maybe innerText? – Iłya Bursov Commented Apr 16, 2015 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 ment 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 Commented Apr 16, 2015 at 22:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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 es 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.

本文标签： HTML Javascript get textNode by id tagname anythingStack Overflow