Questions tagged [dom]

The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

34 questions with no upvoted or accepted answers
Filter by
Sorted by
Tagged with
4
votes
0answers
77 views

Enables markup to instantiate objects, call methods, and generate HTML

I created this package PXP. PXP enables markup to instantiate objects, call methods, and generate HTML. It works similar to a server-side templating engine, but rather than enforcing braces it ...
4
votes
0answers
407 views

Recursive function to compare XML files using MSXML DOM

I have put together this function which compares two XMLs. On debugging, I found out that there are lot of useless loops which might cause performance problems for me if the files to compare are very ...
3
votes
0answers
39 views

Displaying sections from pre-checked options

First off, not the greatest with jQuery but know enough to get by. I have a custom script for our WordPress site that ties in with a main plugin we use. I have a JSFiddle that gives the gist of what ...
3
votes
0answers
47 views

Function to flip cards in a memory game

I've developed a small memory game, the game contains a function to flip cards for every turn. I'm looping thru the array containing the images every time to pick one card. I'm sure there's away to ...
3
votes
0answers
104 views

Copy-to-clipboard function from a React.js component

I have a React component with a copyToClipboard method, which all works fine, but feels extremely verbose and quite hacky (namely, having to create a new select ...
3
votes
0answers
64 views

Javascript Call To Action Modal

I created a simple modal that when a user scrolls down a blog post, a modal pops up. If the user wants to sign up for newsletter, then a form pops up. The only external library I used was body-scroll-...
3
votes
0answers
2k views

Converting HTML input characters to asterisks after a given time

I tried for fun implementing a function that converts HTML input characters to asterisks after a given time. What do you think about my approach and how would you do it? ...
3
votes
0answers
61 views

Remove pre-loader animations when all assets on page become available

This code starts when the page loads and when all assets become available, it removes pre-loader animation and page becomes visible. I know some functions has code repetition, but it can await ...
3
votes
0answers
45 views

Simple gallery with scroll

I just created a simple gallery with scroll. Everything works fine but I'm not sure how should I optimize this code: ...
2
votes
0answers
43 views

Hashtable Visualizer in TypeScript

Implementation is based on the MVC design pattern, with callbacks to allow model and view to communicate with controller. Concerns: It's not ideal to have async code inside the model, i.e the model ...
2
votes
0answers
79 views

Wait for an element to exist in DOM before clicking it

Here is the problem: some script is injecting some HTML5 elements (actually a button with the #thebutton ID) to the current DOM. But this is a third party script ...
2
votes
0answers
445 views

Angular 8: Scroll spy implementation for a timeline Contents

I have made a timeline component that can have multiple milestone/major/minor as sub components nested within timeline container component. I have also added a side navigation for that lists all ...
2
votes
0answers
81 views

Vanilla Javascript code to sort nested tables

I have written a code to sort a main table containing tables in each of its rows. Here I am trying to sort the table by first sorting the rows in each of the main rows and then sorting the table from ...
2
votes
0answers
2k views

Event Calendar in JS, CSS, and HTML

I repeated a lot of code here and I'm trying to use more ES6 but I'm not sure where I should have used it in my code. I'd appreciate any input on where I could improve. GitHub ...
2
votes
0answers
31 views

Moving a div to a different parent, which also moves, using matchMedia

I'm very new to JavaScript so I thought I'd ask for someone to have a quick look over this to make sure it isn't brittle, buggy, or completely unnecessary. It may be all three. I also thought it might ...
2
votes
0answers
37 views

Remove General sibling on Keyup

I am creating a search filter using jQuery and implementing Array.prototype.filter(). What I have done is that I call the ...
2
votes
0answers
39 views

Simple, pixel independent, CSS Grid resizing with no third party libraries

I wanted to see if I could implement codepen-like or jsfiddle-like window resizing by using simple boxes and CSS grid without any third party libraries. Live version can be found here: https://...
2
votes
0answers
674 views

Check / uncheck multiple checkboxes on clicking a link in native JavaScript

I am trying to get to grips with native JavaScript and wean myself off jQuery, so as an exercise, I wrote the following to check or uncheck checkboxes depending on which link is clicked. Could this ...
2
votes
0answers
37 views

Function to grab all windows and nested windows on a page

I wrote the following function which takes in a window and returns all nested windows on a webpage (I can get all the windows by calling the function with window.top). Is there a more elegant/...
2
votes
0answers
277 views

handle drag and drop operations

I've come up with the following code to handle drag and drop operation. It's composed of a constructor function that returns an objects with methods to attach to event handlers. Notes about this ...
1
vote
0answers
762 views

Escaping invalid XML characters (e.g. for the Java DOM API)

I want to save and load an arbitrary Java String in a Text node in a XML file using the Java DOM API. The ...
1
vote
0answers
20 views

Creating a reusable plugin (Dialog/Notifier as example)

I started working on a notification system that is pluggable into any project. I have not made any "plugin" type javascript libraries, usually just functions very specific to the project at hand. That ...
1
vote
0answers
34 views

Dragging and dropping a spot using TypeScript

Currently my code is based around mouse events so that it is easier to test but I will be swapping these to touch events once I have had the code reviewed. The idea of the UX is that you need to ...
1
vote
0answers
62 views

Retrieve data from big xml files

I have written a code to retrieve data from xml file. It works but it is really slow. I takes about a minute. This is ok for 1 or some more xml files. But If you have to do it for 1000 it's not a good ...
1
vote
0answers
292 views

Find delegated click handler for any DOM Node in the event path

I've got this method in a class that searches the graph of DOM nodes above an element for a click handler attached with Blaze or ...
1
vote
0answers
21 views

Apply a custom property on every descendent of an element

I chose this approach to keep the code short, as I can't think of purely iterative approach without conditionally testing or storing the index of a node for moving horizontally. If I wanted re-...
1
vote
0answers
64 views

Library to mimic canvas using divs

I was recently developing some canvas library and (mimicking canvas using div). The requirement was to develop something without using any third-party library. The sample app had a asset library and ...
1
vote
0answers
260 views

Emulating the React.js createElement function

I am trying to create a helper function for myself, and this helper should do the following: Create an element Add properties to the element Set values to the element (this is the concern of my ...
1
vote
0answers
532 views

Angular resize directive

I have created this directive in Angular. The idea is to calculate width of height and height of specific element via style function attached to ng-style on the same element. The directive uses ...
1
vote
0answers
48 views

Appending a group name to each committee member

I wrote this script to get text, if it equals, append the name of the group to a person's information. I know using .each() is gpu intensive and this feels like a ...
1
vote
0answers
912 views

Cleaning up a custom checkbox implemented using the shadow DOM

I'm porting Google's "paper elements" checkbox out of Polymer. This implementation doesn't use two-way data-binding. Instead, it relies on a few event handlers. Everything works, but it feels pretty ...
1
vote
0answers
120 views

DOMDocument grouping nodes, with clone, nodeClone, importNode, fragment… What the better way?

A "DOMNodeList grouper" (groupList() function below) is a function that envelopes a set of nodes into a tag. Example: INPUT ...
0
votes
0answers
42 views

Rock Paper Scissors Game in JavaScript

My latest project is a Rock Paper Scissors Game that I made in The Odin Project course. It's a web version, made with HTML, CSS and JS. I would appreciate to read your opninions, especially with ...
0
votes
0answers
18 views

Is it possible to optimise jQuery tag:contains() selector?

I am trying to extract all the elements from a webpage which contains given set of words. E.g. Given I have an array of random words ...