JavaScript || Check If An Element Comes Before Or After Another Element In Dom Tree Using Vanilla JavaScript

August 28, 2020 admin No comments

The following is a module with functions that demonstrates a simple way how to check if an element comes before or after another element in the Dom tree using JavaScript.

1. Check If Before / After

The example below demonstrates how to check if an element is before or after another element.





		
		
			1. Check Before / After
			
XHTML
			
			<!-- // Check before / after. -->

<div class="container">
    <p>some irrelevant text 1</p>
    <p>some irrelevant text 2</p>
    <p class="first">I'm first</p>
    <div>
        <p class="second">I'm second</p>
        <p>some irrelevant text outside 1</p>
        <p>some irrelevant text outside 2</p>
    </div>
</div>    

<script>
(() => { 
    let first = document.querySelector('.first');
    let second = document.querySelector('.second');
    
    console.log(Utils.isBefore(first, second));
    console.log(Utils.isAfter(first, second));   
})();
</script>

<!--
// expected output:
/*
    true
    false
*/
-->
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
				
						<!-- // Check before / after. -->
 
<div class="container">
    <p>some irrelevant text 1</p>
    <p>some irrelevant text 2</p>
    <p class="first">I'm first</p>
    <div>
        <p class="second">I'm second</p>
        <p>some irrelevant text outside 1</p>
        <p>some irrelevant text outside 2</p>
    </div>
</div>    
 
<script>
(() => { 
    let first = document.querySelector('.first');
    let second = document.querySelector('.second');
    
    console.log(Utils.isBefore(first, second));
    console.log(Utils.isAfter(first, second));   
})();
</script>
 
<!--
// expected output:
/*
    true
    false
*/
-->

2. Refined Search

The example below demonstrates how to check if an element is before or after another element by refining the search by a specific container.





		
		
			2. Refined Search
			
XHTML
			
			<!-- // Refined Search. -->

<div class="container">
    <p>some irrelevant text 1</p>
    <p>some irrelevant text 2</p>
    <p class="first">I'm first</p>
    <div>
        <p class="second">I'm second</p>
        <p>some irrelevant text outside 1</p>
        <p>some irrelevant text outside 2</p>
    </div>
</div>    

<script>
(() => { 
    let first = document.querySelector('.first');
    let second = document.querySelector('.second');
    let container = document.querySelector('.container');
   
    console.log(Utils.isBefore(first, second, container));
    console.log(Utils.isAfter(first, second, container)); 
})();
</script>

<!-- 
// expected output:
/*
    true
    false
*/
-->
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
				
						<!-- // Refined Search. -->
 
<div class="container">
    <p>some irrelevant text 1</p>
    <p>some irrelevant text 2</p>
    <p class="first">I'm first</p>
    <div>
        <p class="second">I'm second</p>
        <p>some irrelevant text outside 1</p>
        <p>some irrelevant text outside 2</p>
    </div>
</div>    
 
<script>
(() => { 
    let first = document.querySelector('.first');
    let second = document.querySelector('.second');
    let container = document.querySelector('.container');
   
    console.log(Utils.isBefore(first, second, container));
    console.log(Utils.isAfter(first, second, container)); 
})();
</script>
 
<!-- 
// expected output:
/*
    true
    false
*/
-->

3. Utils Namespace

The following is the Utils.js Namespace. Include this in your project to start using!





		
		
			Utils.js Namespace
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Aug 28, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions    
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';   
 
    // Property to hold public variables and functions
    let exposed = namespace;
    
    /**
    * FUNCTION: isBefore
    * USE: Determines if 'elementX' comes before 'elementY' in the DOM tree.
    * @param elementX: The first Javascript element to compare.
    * @param elementY: The second Javascript element to compare.
    * @param container: Optional. The container to limit the search.    
    * @return: True if 'elementX' comes before 'elementY', false otherwise.
    */    
    exposed.isBefore = (elementX, elementY, container = null) => {
        container = container || (elementX.parentNode === elementY.parentNode ? elementX.parentNode : null) || document;        
        let items = container.querySelectorAll('*');
        let result = false;
        for (const item of items) {
            if (item === elementX) {
                result = true;
                break;
            } else if (item === elementY) {
                result = false;
                break;
            }            
        }
        return result;
    }
    
    /**
    * FUNCTION: isAfter
    * USE: Determines if 'elementX' comes after 'elementY' in the DOM tree.
    * @param elementX: The first Javascript element to compare.
    * @param elementY: The second Javascript element to compare.
    * @param container: Optional. The container to limit the search.    
    * @return: True if 'elementX' comes after 'elementY', false otherwise.
    */      
    exposed.isAfter = (elementX, elementY, container = null) => {
        return !exposed.isBefore(elementX, elementY, container);
    }    

    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Aug 28, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions    
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';   
 
    // Property to hold public variables and functions
    let exposed = namespace;
    
    /**
    * FUNCTION: isBefore
    * USE: Determines if 'elementX' comes before 'elementY' in the DOM tree.
    * @param elementX: The first Javascript element to compare.
    * @param elementY: The second Javascript element to compare.
    * @param container: Optional. The container to limit the search.    
    * @return: True if 'elementX' comes before 'elementY', false otherwise.
    */    
    exposed.isBefore = (elementX, elementY, container = null) => {
        container = container || (elementX.parentNode === elementY.parentNode ? elementX.parentNode : null) || document;        
        let items = container.querySelectorAll('*');
        let result = false;
        for (const item of items) {
            if (item === elementX) {
                result = true;
                break;
            } else if (item === elementY) {
                result = false;
                break;
            }            
        }
        return result;
    }
    
    /**
    * FUNCTION: isAfter
    * USE: Determines if 'elementX' comes after 'elementY' in the DOM tree.
    * @param elementX: The first Javascript element to compare.
    * @param elementY: The second Javascript element to compare.
    * @param container: Optional. The container to limit the search.    
    * @return: True if 'elementX' comes after 'elementY', false otherwise.
    */      
    exposed.isAfter = (elementX, elementY, container = null) => {
        return !exposed.isBefore(elementX, elementY, container);
    }    
 
    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Was this article helpful?

👍 YesNo

Posted in: JavaScript, Vanilla JavaScript Tags: javascript

JavaScript || Check If An Element Comes Before Or After Another Element In Dom Tree Using Vanilla JavaScript

Related

Leave a ReplyCancel reply

Search

Compile Your Code Now

Translate Page

Popular Pages

Recent

Archives

Categories