Javascript DOM,accesing the textnode of the
element using nextsibling property

Question

<body>
    <div id="li-container">
        <ul>
            <li class="hot">item1</li>
            <li id="secLi" class="cool">item2</li>
            <li class="cool">item3</li>
            <li class="cool">item4</li>
        </ul>
    </div>

<script language="javascript" type="text/javascript">
var secLi = document.getElementById("secLi");
var sib = secLi.nextSibling;
document.write(sib);

//OR //OR  //OR //OR  //OR //OR  //OR //OR  

var secLi = document.getElementById("secLi");
var sib = secLi.nextSibling;
document.write((sib).textContent);

</script>
</body>

I want to get the textnode of the third list(li) item using nextSibling property and write in the document.I know I can use "li.textContent" to access it but I want it this way.

No,I am not looking for "nextElementSibling",I want to acess the "textNode" of "secondli" using "nextSibling" property and that is because if I want to get to the "third li",I must use "nextSibling.nextSibling"twice to get to the "third li".(1)First "nextSibling" is for the "text-node" of the "2nd li" and (2)Second "nextSibling" is for the "3rd li".So I am not able to get the text-node of "2nd li" using "next-sibling" once.

I used text-fixer.com to remove other white-spaces and line breaks even then it dosent work.

What do you see wrong in second way..you want to get `item3` to be written in document.right? — Rakesh_Kumar, Apr 04 '15 at 16:45

bvaughn · Accepted Answer · 2015-04-04T16:51:07.190

3

Are you perhaps looking for nextElementSibling?

var secLi = document.getElementById('secLi');
secLi.nextSibling; // Is a text node.
secLi.nextElementSibling; // Is the <li> you're looking for, so..
secLi.nextElementSibling.textContent; // Gives you "item3"

Update

To better understand why you want nextElementSibling instead of nextSibling look at what the parent <ul> says its childNodes are:

secLi.parentElement.childNodes;
// [#text, <li>, #text, <li>, #text, <li>, #text, <li>, #text]

You don't want the nextSibling because it's just the empty text between list items. You want the next element (list item).

See https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling

edited Apr 04 '15 at 16:51

answered Apr 04 '15 at 16:44

bvaughn

13,300
45
46

what is the difference between "nextSibling" and "nextElementSibling" – am guru prasath Apr 04 '15 at 16:46
@amguruprasath The difference between `nextSibling`property and `nextElementSibling`, is that nextSibling returns the next sibling node as an element node, a text node or a comment node, while nextElementSibling returns the next sibling node as an element node (ignores text and comment nodes). Src: http://www.w3schools.com/jsref/prop_node_nextsibling.asp – Rakesh_Kumar Apr 04 '15 at 16:49
Taken straight from the Mozilla docs: "nextElementSibling read-only property returns the **element** immediately following the specified one in its parent's children list." "nextSibling read-only property returns the **node** immediately following the specified one in its parent's childNodes list". So in this case, you want the **element** (`
`) because the next **node** is actually a text node.

bvaughn

Apr 04 '15 at 16:49

`nextSibling` selects the _next_ sibling node. An `elementNode`, `commentNode` or a `textNode`. `nextElementSibling` selects the next `elementNode` sibling that has `nodeType` of `1`. In your code `nextSibling` selects a `textNode`, this `textNode` contains line break and other hidden characters that you have used for formatting your markup. If you remove the hidden characters then `nextSibling` selects the same node. – Ram Apr 04 '15 at 16:49

No I am not looking for nextElementSibling,I want to acess the textNode of second list using nextSibling property and that is because if I want to get to the third list item I must use (nextSibling.nextSibling) to siblings thats text node of second list and its reaching the third list item.So I want to get the textNode – am guru prasath Apr 04 '15 at 16:50

No. You're still confused. I'll update my response for (hopefully) greater clarity. – bvaughn Apr 04 '15 at 16:51

@Vohuman I just used text-fixer.com to remove other white-spaces and line breaks even then it dosent work.I have updated my question. – am guru prasath Apr 04 '15 at 16:57

@amguruprasath I believe there are still some hidden characters there, it should be like `

item2

item3

`. You don't have do remove the hidden characters. Just use `nextElementSibling` property or iterate through the `nextSibling`s and filter the first next sibling that has `nodeType` of `1`. – Ram Apr 04 '15 at 17:01

score 0 · Answer 2 · answered Apr 04 '15 at 17:48

0

the textnode of the li element is a child of 2nd li element. So the code would be var sib = secLi.firstChild.textContent; document.write(sib);

@brianvaughn

answered Apr 04 '15 at 17:48

am guru prasath

345
1
7
28

Javascript DOM,accesing the textnode of the element using nextsibling property

2 Answers2

Javascript DOM,accesing the textnode of the
element using nextsibling property