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.

Filter by
Sorted by
Tagged with
3
votes
1answer
96 views

Updating an element's class based on the background color

I'm trying to build a generic thing that will update a fixed menu button's color to either 'black' or 'white' depending on which contrasts better with the background color. I've got it working, but I ...
2
votes
1answer
800 views

Instantaneous validation of form field length

Since I have a function which can be done in few ways as usual, I was wondering which way is the best to achieve the form validation where I have only one input field, and I am showing a warning on ...
7
votes
2answers
6k views

Nesting elements with appendChild

I want to make a nav that look like this: ...
5
votes
1answer
23k views

Jasmine unit tests for a function to set attributes on an HTML element

I'm new to unit testing so maybe I have this all wrong, but it seems kind of useless. I want to reduce bugs and integrate some tests with a build process however I'm not seeing the benefit at the ...
2
votes
1answer
31 views

Click handlers that display the status of a submission

It's been years since I've touched javascript and the strange scoping trips me up each time. Please could you point me into the right direction of how to both tidy this up and prevent the duplication?...
9
votes
2answers
2k views

Determine closest ancestor that has a certain HTML class

When writing JavaScript code for my own projects, this functionality is the singlemost used algorithm that does not already exist: Finding an ancestor element that has a certain HTML class. Algorithm:...
5
votes
2answers
3k views

Making thousands of DOM elements draggable with JavaScript

This is a very simple implementation of dragging elements in html/js. I'm working on a web application that could have thousands of draggable elements on screen at any given time. Currently, this ...
2
votes
1answer
154 views

jQuery plugin to toggle truncated text

I have from a recommendation on my other question here: My other review post Developed a truncate plugin, and was wondering if you guys could help me improve it or see where I have gone wrong. ...
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
1answer
74 views

JavaScript Menu Builder

I'm building this menu builder with JS. So far I have a simple version 1 implementation that does what I want but it needs improving. Couple of things that I'd like to improve: Prevent unwanted input ...
3
votes
1answer
98 views

Sometimes-sticky HTML element

I am working on a sticky element that on certain point when the user scrolls down it turns into a relative element so it's not a sticky element anymore, only when the user scrolls to the top and ...
9
votes
2answers
1k views

JavaScript Tic-Tac-Toe web app

I am teaching myself JavaScript and made a little Tic-Tac-Toe web app. I'm not asking anyone to read through it all, but to just tell me what I need or should not do in the future. ...
2
votes
1answer
62 views

JS micro-view library

I created a JS view micro-library not too long ago it's named contours. Its primary purpose is element creation. It has some similarities to ReactJS. It lacks many features that React has like server ...
6
votes
1answer
108 views

Accessing a REST WebService and updating local HTML objects with Modular JS

I have this code I am doing to make my code modular js: ...
3
votes
2answers
78 views

Information about a nightclub in semantic HTML

Could anybody have a look at my HTML code and tell if it's build upon the correct semantic way using the right tags, and not using unnecessary divs? I'm still not sure if there any divs in my code ...
4
votes
2answers
2k views

Retrieve index of HTML element within parent

I have a function I've been using for years that retrieves the index of an HTML element within its parent element, or, if a second argument is passed to it, the index of an HTML element within the ...
3
votes
3answers
683 views

Opening links in a new tab or window

I've got a lot of links (150+) in an href (here I can only post 2) and I want them to be opened in a new tab or window. I've got this piece of code that works, but ...
4
votes
1answer
44 views

Everything you might want to know about an element

I am working with a lot of DOM manipulation and need to know several values of an element to determine its position within the DOM and I have written the following to help scrape several of the bits ...
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
1answer
130 views

JavaScript function for to create HTML-elements

I have written this function for creating complete HTML-elements including arbitrary attributes and inner HTML. I want to keep and reuse it. Therefore I have tried to document the usage well. I ...
5
votes
2answers
287 views

Displaying dependent options when a selection is made in a dropdown

I was wondering if someone could please point me in the right direction with this bit of JavaScript I have been working on. I have made this form that currently has onblur JavaScript validation and ...
1
vote
1answer
165 views

Building DOM tree from XML, checking/updating player's average score

This is the first time I'm parsing an XML file. So I will be grateful for any suggestions on how my code may be improved. Or if you could suggest another approach to solving this problem. One other ...
2
votes
1answer
397 views

Loop through array while creating one div.row and appending three div.col-lg-4

As a newbie to Javascript (or coding for that matter), I'm sure I overdid this, but I couldn't get anything else to work. Here's what I'm doing: allData in ...
0
votes
1answer
62 views

Rearranging DOM elements using inconsistent criteria

Before you read ahead: ES6 may not be used. Consider a web-page showing a report of some data that is structured as follows: ...
1
vote
1answer
70 views

Table structure modifier

I have written a JS code to modify the structure of the table by parsing the webpage for particular table class and store the rows of the tables in an array. And use the array for the constructing a ...
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 ...
3
votes
1answer
274 views

Using a MutationObserver to reformat numbers in the user's locale

I mostly just want to make sure I've understood the specs correctly with this code, but here goes: ...
3
votes
3answers
160 views

Get table/rows from database then insert into JavaScript

I'd rather not use this long code. I want to retrieve table/rows from database and insert into JavaScript to create a table in HTML. This is what it looks like so far and I'd like to keep the design ...
2
votes
1answer
457 views

Client Side JavaScript [aka Greasemonkey] Key Event Handler

Description The code captures keypress events that do not occur in a text field and dispatches on the properties of a $command object in the application execution ...
0
votes
1answer
47 views

Classifying top and bottom navigation links

The current code I have runs fine, but I'm curious about some other approaches to making this more DRY. ...
0
votes
1answer
81 views

Wait for a “3rd party” element to be appended to the DOM

Let's say we're writing a user script which interacts with a 3rd party site we don't control. We want to open a menu, so we trigger a click on the button and then wait 10ms before accessing the menu (...
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 ...
3
votes
1answer
471 views

Adding a class to a root element

I have written some ES2015 JavaScript that adds a class to a root element when one of it's immediate children is focused. Here is the markup for the code to be run on: ...
-1
votes
1answer
117 views

Using templates and function overloads to set DOM attributes [closed]

I'm making a library to build and manage a website. I want to control what gets to be inserted. For example I don't want to be able to insert ...
4
votes
3answers
26k views

C++ Tree Class implementation

I am trying to implement a class for the Node of a Tree in C++ in order to represent an HTML structure. It is not complete by a shot, but i'd still like an opinion. TreeNode.h : ...
5
votes
1answer
2k views

Colour-matching game

This is a game about matching the right colour. In the first level you start with 3 cubes that each have a different colour. After 2 seconds the colours of the cubes disappear and the cubes become ...
9
votes
1answer
525 views

Animate and play sounds in Simon Says 'the Angular way'

I am a newbie coder and I'm trying to learn good coding habits. I'm making a Simon Says game challenge from Free Code Camp in Angular JS. Codepen I have an array that keeps random integers between ...
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/...
1
vote
2answers
190 views

Tasks organizer app

I've created my first complete JS app, which lets you add tasks and control how much time you spend on them. I posted this to get some ideas how to improve readability, efficiency and the speed of my ...
0
votes
1answer
74 views

Replacing DOM elements that have no attributes

The institution I work for uses an application that has an awful software bug causing useless <code>span</code> tags to appear next to "misspelled" ...
2
votes
1answer
81 views

Sort Facebook Messenger contacts by idle time

I wrote a UserScript that auto-sorts contacts by offline time using the MutationObserver API. I tried to make it as DRY as I could think, and I also tried to make my code as straight-forward as ...
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: ...
3
votes
1answer
233 views

Google Maps geocoding lookup function

In an effort to keep all of the Google Maps Javascript API in it's own little world, I have created a googleMaps object that will contain all of the functions that directly make google maps webservice ...
11
votes
1answer
832 views

Card-fighting game

I am currently building my first game/app in javascript. It is a very simple script that has about 130~ lines of code. I feel like what I did so far is not optimized, can anyone please help me ...
1
vote
1answer
118 views

Generating HTML code dynamically with jQuery

I am doing a college project and I would like to write my jQuery code following best practices. The project involves using the jQuery .getJSON method to retrieve ...
2
votes
2answers
59 views

Tag dependence approach

I need to add class is_active to all div's when I click on <div id="all-tags"> and remove class if I click again. Only ...
6
votes
2answers
90 views

HTML5 sectioning for my design

I've designed my new website: Now I want to build up my HTML as semantic as possible. Here's my first attempt / set-up: ...
3
votes
1answer
93 views

Editing HTML based on instructions in a data structure

My getExtend() function, which will be included via require.js, has two inputs and one output: HTML file content config object which determine how to update ...
0
votes
1answer
81 views

iframe play & thumbnail function

This is quite a simple function, but I just wanted some opinions on it, like is this the correct way to run a function and check if an element exists or not? ...
0
votes
1answer
980 views

Manipulate original DOM in React.js

As an introduction, I would like to have my inputs validated with the built-in validation HTML5 attributes, e.g. use pattern for text input. So this is my sample code that implements that. Is it ...

1
4
5
6 7 8