Children of The DOM in Javascript

View: 273    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: Javascript   Fields: Other

9 point/3 review File has been tested

Close node relationships in the DOM have always been problematic, because most interpretations of theDOM include whitespace text-nodes, which scripts don’t usually care about.

Introduction

Close node relationships in the DOM have always been problematic, because most interpretations of theDOM include whitespace text-nodes, which scripts don’t usually care about.

It’s right that they should be included, of course, because it’s not up to implementations to decide whether this or that node is important. Nevertheless, whitespace text-nodes are usually not important, they just get in the way, complicating what should be simple relationships like firstChild and nextSibling.

Here’s a simple markup example to demonstrate:

<ul>
  <li>list-item 1</li>
  <li>list-item 2</li>
  <li>list-item 3</li>
</ul>

So the firstChild of that <ul> element is not the first <li> element, it’s the whitespace (i.e. the line-break and tab) between the <ul> and <li> tags. Likewise, the nextSibling of that first list-item is not the second list-item, it’s the whitespace text-node in-between.

The Classic Solution

This is nothing new, and traditionally we’ve had three basic ways of dealing with it. The first is to use a collection-based reference like this:

var item = list.getElementsByTagName('li')[0];

The second approach is to iterate past the unwanted nodes, using a nodeType test to determine when we have the node we want:

var item = list.firstChild;
while(item.nodeType != 1)
{
  item = item.nextSibling;
}

The third and most brute-force solution is simply to remove the unwanted nodes altogether, using a recursive function like this (which also removes comment nodes):

function clean(element)
{
  for(var x = 0; x < element.childNodes.length; x ++)
  {
    var child = element.childNodes[x];
    if(child.nodeType == 8 
      || (child.nodeType == 3 && !/S/.test(child.nodeValue)))
    {
      element.removeChild(element.childNodes[x --]);
    }
    if(child.nodeType == 1)
    {
      clean(child);
    }
  }
}

The Element Traversal Solution

These solutions all work, but there is a much simpler and eaiser way of getting the elements references we want, using a suprisingly little-known set of references defined in DOM3 Element Traversal.

The Element Traversal specification defines four new references, which only relate to element nodes, effectively ignoring all other types:

firstElementChild

lastElementChild

nextElementSibling

previousElementSibling

So now we can get those list-item references in a much more straightforward way, and it doesn’t matter how many whitespace text-nodes (or anything else) are in-between:

var item = list.firstElementChild;
var item2 = item.nextElementSibling;

The specification also defines a childElementCount property, which is equivalent tochildNodes.length when all non-element nodes are disregarded.

The Real-World Solution?

So can we rely on these properties, will they work in the browsers we code for? The answer is “yes” for the most part. Older versions of IE are the usual story, but for IE9 or later, or any reasonably-recent version of any other major browser, we find that all these properties are supported, and have been for quite a while.

PPK’s DOM Compatibility tables give us the low-down, and show that we don’t need to worry at all about lack of browser support — unless we have to support IE8.

So I guess it’s one of those things, just like selector queries used to be — if older browsers are an issue, then libraries can provide the fallback, or you can continue to use the traditional solutions we’ve always relied on. But if you’re lucky enough not to have to think about those older browsers, then the Element Traversal properties will certainly make life easier.

I could also point out that earlier versions of IE have a different view of the DOM — unlike all other browsers, they don’t include whitespace text-nodes. So at a pinch, you could always do something like this:

function firstChild(element)
{
  //using pre-defined browser variable
  if(isie)
  {
    return element.firstChild;
  }
  return element.firstElementChild;
}

A browser test is appropriate for that, rather than simply testing whether firstElementChild is defined, because lack of support for that property doesn’t necessarily indicate an implementation where whitespace isn’t included. The difference is unique to IE, so it’s IE we’d have to test for.

The Common-Sense DOM

To me, these Element Traversal properties are something a breeze of common-sense in W3Cspecifications — ratifying in standards the practical view that most of have of the DOM. They’re certainly a lot more approachable than DOM2 Traversal ever was (anyone here using TreeWalker? No, I didn’t think so!). The underlying problem that DOM Traversal tried to solve, is that implementations can’t know which types of node a script will care about, yet it tried to solve this problem by continuing to treat all types of node as equal.

Children of The DOM in Javascript

Children of The DOM in Javascript Posted on 09-04-2016  Close node relationships in the DOM have always been problematic, because most interpretations of theDOM include whitespace text-nodes, which scripts don’t usually care about. 3/10 273

Comment:

To comment you must be logged in members.

Files with category

  • JUnit 5 State Of The Union using java

    View: 629    Download: 0   Comment: 0   Author: none  

    JUnit 5 State Of The Union using java

    Category: Javascript
    Fields: Other

    1.5/3 review
    JUnit 5 has been under development for about 14 months now and the prototype is almost a year old. Time to summarize what happened so far, where the project stands, and where it’s going.

  • Getting Started with Dropwizard using java

    View: 731    Download: 0   Comment: 0   Author: none  

    Getting Started with Dropwizard using java

    Category: Javascript
    Fields: Other

    1.5/3 review
    Dropwizard is a framework for building RESTful web services in Java. In this tutorial we’re going to have a look at how to get started with developing a Dropwizard application by building a new service from scratch.

  • Build Query NULL Value in MySql

    View: 336    Download: 0   Comment: 0   Author: none  

    Build Query NULL Value in MySql

    Category: Javascript
    Fields: Other

    2.5/2 review
    Misunderstanding NULL is common mistake beginners do while writing MySql query. While quering in MySql they compare column name with NULL. In MySql NULL is nothing or in simple word it isUnknown Value so if you use comparison operator for NULL values...

  • Manage Your JavaScript Application State with MobX

    View: 355    Download: 0   Comment: 0   Author: none  

    Manage Your JavaScript Application State with MobX

    Category: Javascript
    Fields: Other

    2.25/2 review
    This article was peer reviewed by Michel Weststrate and Aaron Boyer. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

  • Build Bringing Pages to Life with the Web Animations API

    View: 359    Download: 0   Comment: 0   Author: none  

    Build Bringing Pages to Life with the Web Animations API

    Category: Javascript
    Fields: Other

    3/3 review
    This article is by guest author Dudley Storey. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • How to Style Google Custom Search Manually

    View: 342    Download: 0   Comment: 0   Author: none  

    How to Style Google Custom Search Manually

    Category: Javascript
    Fields: Other

    0/0 review
    Website owners very often decide on using Google’s Custom Search Engine (GCSE) for searching through their content instead of using built-in and/or custom search functionality. The reason is simple – it’s much less work, and most often it does the...

  • Test React Components Using Jest

    View: 5113    Download: 0   Comment: 0   Author: none  

    Test React Components Using Jest

    Category: Javascript
    Fields: Other

    4.5/1 review
    This article is by guest author Jack Franklin. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • Programming Question Reverse String without using String function

    View: 818    Download: 0   Comment: 0   Author: none  

    Programming Question Reverse String without using String function

    Category: Javascript
    Fields: Other

    4.5/1 review
    Write a program to reverse string without using string function. You don’t have to use any in-built string library function. This problem can be solved by multiple approaches. Let’s check it.

 

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd