4

If I manually write those following lines in an HTML file:

<div>
<input type="button" value="Button 1">
<input type="button" value="Button 2">
</div>

A text node will be created for each new line.

I wanted to understand the useCapture argument of addEventListener method. I choosed to access DOM elements using childNodes property of my div element but I will have to ignore textNodes between elements. This isn't really practical:

document.getElementsByTagName("div")[0].addEventListener("click", function(){alert(1);}, true);

document.getElementsByTagName("div")[0].childNodes[1].addEventListener("click", function(){alert(2);}, false);

document.getElementsByTagName("div")[0].childNodes[3].addEventListener("click", function(){alert(3);}, false);

Here you see that I have to ignore childNodes[0] and childNodes[2] in order to select my 2 input tags.

Is there a way to bypass textNodes creation without writing all HTML code just on one line and without using Javascript createElement?

Is it possible to write HTML code without creating textNodes when going to new line?

baptx
  • 3,428
  • 6
  • 33
  • 42
  • Is it possible in `javascript` to write two lines of code inside an `if` without `{ }` ? No, this is how the language was designed and works. same thing here. – gdoron Apr 28 '12 at 19:10
  • @gdoron in Javascript, C, C++, C#, {} is always needed when we have more than two lines of code – baptx Apr 28 '12 at 21:54
  • htI know... I meant to say, this is the HTML syntax rules just like javascript, HTML has it's rules, and new line creates a textNode... :) – gdoron Apr 28 '12 at 21:58

3 Answers3

1

Is it possible to write HTML code without creating textNodes when going to new line?

Nope.

Unless you parse the HTML file before sending it to the client, which I guess that solution isn't what you're after...

gdoron
  • 147,333
  • 58
  • 291
  • 367
1

Sorry. Only possibility is generate HTML code using programming language such as PHP, RUBY and add something like this.

<input type="button" value="Button 1"><%-
%><input type="button" value="Button 2">

But I guess it's not answer you want hear.

Eraden
  • 2,818
  • 1
  • 19
  • 17
  • I've tried parsing some lines with PHP following this link: http://docs.php.net/manual/en/domdocument.loadhtml.php If textNodes are removed using <%- %> it with serialize everything to one line of code by the way. So I think we can't get an output human-readable directly in page source (except Firebug or any DOM inspector) without having textNodes after page request. – baptx Apr 28 '12 at 20:57
  • My example is for Ruby on Rails in schema file.html.erb – Eraden Apr 29 '12 at 06:41
1

Firstly, don't repeat yourself ! You're repeating the same DOM query over and over.

Try this:

var div = document.getElementsByTagName("div")[0];
div.addEventListener("click", function(){alert(1);}, true);

var buttons = div.getElementsByTagName("button");  
buttons[0].addEventListener("click", function(){alert(2);}, false);
buttons[1].addEventListener("click", function(){alert(2);}, false);

calling getElementsByTagName to get the buttons trivially skips the text nodes - problem solved!

Alnitak
  • 334,560
  • 70
  • 407
  • 495
  • Ok, it's just 3 lines of example but it's maybe better to put in a variable. I didn't want to directly access buttons because I had other buttons before and using childNodes is nice to access div's buttons – baptx Apr 28 '12 at 19:20
  • @baptx `childNodes` is clearly _not_ nice, for exactly the reason you've found. If you're only interested in elements, _ask the DOM to give you those elements!_ – Alnitak Apr 28 '12 at 19:39
  • You're right, it could be nice but due to this textNodes it's not :/ – baptx Apr 28 '12 at 19:53
  • 1
    @baptx yup, but the text nodes can't be avoided unless you strip the newlines from the content before it's sent to the browser. – Alnitak Apr 28 '12 at 19:55
  • It has to be send as one line of code by the server to avoid textNodes, if I understand correctly. – baptx Apr 28 '12 at 21:04
  • Thanks, I will use childNodes for dynamically created elements only – baptx Apr 28 '12 at 21:40