Skip to main content
SimilarExport ZIP
100%

Gist a9a28ae7918d9806bc45f4b440a0bca6

✓ Published0🌍 Public
KKopylovVitalik
Last edited Apr 15, 2020
Created on Apr 15, 2020

This example demonstrates a practical vanilla JavaScript replacement for jQuery’s `index()` and `eq()` methods, showing how to locate an element’s position among its siblings and select a specific node by index. The code uses `document.querySelectorAll('.class')` to fetch all elements with that class, then sets the text content of the first matching element to `1254` via `[0].textContent`, mirroring `eq(0)`. It also defines a helper function, `getNodeindex`, that spreads `elm.parentNode.children` into an array and calls `indexOf(elm)` to return the element’s zero-based index, replicating `index()`. The example highlights modern DOM traversal techniques without external libraries.

AI-generated description

Similar vizzes

Loading thumbnail…

TITLE GOES HERE

This example demonstrates how to select and manipulate elements in an HTML document using the Document Object Model (DOM) API. It shows a basic page with paragraphs and list items, highlighting retrieval of elements by ID, tag name, and class name, as well as accessing the text content of a selected element. The code uses standard JavaScript methods like `getElementById`, `getElementsByTagName`, and `getElementsByClassName` to query and inspect the document structure, running within a React framework and a D3 v5 environment.

TTimothyMiage
60% match
Loading thumbnail…

d3js workshop - data binding

This example demonstrates how D3 selections can target specific elements in the DOM using element type, ID, and class selectors. The page contains two visible divs with different identifiers, and commented code shows updated text for various selection strategies, such as `d3.selectAll('div.selectMe')`. It also illustrates appending new elements, where `d3.select('body').append('div')` adds a child to the document body. Built with d3.v3, the example relies solely on D3’s core selection and manipulation APIs, with no external data or rendering pipeline.

LLelandCurtis
58% match
Loading thumbnail…

Gist 5969a606f59c3a8ca7f28d9eebaa89d5

This example shows a JavaScript function called `quickCheck` that is intended to search an array for a given element. The code uses a `for` loop and the `Array.indexOf` method to iterate through the array, though the loop’s logic is incomplete and does not yet return a result. It targets a console output via `console.log` to test the function with an array of vegetables and a search term. No external libraries are used; the code relies solely on native JavaScript array methods.

MMistyBlunch
57% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates core SVG and DOM manipulation fundamentals using D3.js v7 within an HTML page. It shows how to select and modify existing HTML elements, including changing paragraph text and styling list items. The code creates a new list item through D3's selection and append methods, then utilizes CSS selectors like `:nth-child` to target specific elements for styling. The example uses `d3.select`, `d3.selectAll`, and methods such as `.text()` and `.style()` to interact with page content, providing a basic introduction to querying and updating document structure.

Bbirdfoot
57% match
Loading thumbnail…

[JavaScript This的应用] #javascript #EMACScript

This example demonstrates a JavaScript technique for overriding the native `document.getElementById` method to control how DOM elements are accessed. It shows the result of calling the modified function to retrieve a `div` element with the ID `div1` and logging its `id` property to the console. The code wraps the original method using `Function.prototype.apply` to preserve the `document` context, then assigns the wrapper to a variable and invokes it. The implementation relies solely on vanilla JavaScript DOM APIs, with no external libraries.

LLaughingVzr
57% match
Loading thumbnail…

d3 select this

This example demonstrates basic D3.js selection and DOM manipulation using the v5 API. It shows how to bind an array of numeric data to paragraphs, conditionally style elements with `d3.select(this)`, and explore methods like `append()`, `insert()`, and `remove()`. The code uses D3's data join pattern with `.enter()` and `.append()`, and directly modifies inline styles for each paragraph based on index. It also illustrates the difference between appending and inserting nodes relative to existing elements, with explicit selector targeting in the insertion operation.

Ssgzzhinde
57% match
Loading thumbnail…

Fork of JavaScript Basics

A minimal HTML page demonstrates JavaScript syntax basics through commented-out examples and a single active function call. The page uses an SVG element and inline script, with all code commented except for a `person` function that creates and logs an object with `first` and `last` properties. The visualization shows the console output of `person('Jane', 'Doe')` using standard JavaScript object literal syntax. The file includes references to CSS and JavaScript, though the actual rendering relies solely on the SVG structure and console logging.

HHayden-V
56% match
Loading thumbnail…

Javascript basics

This example demonstrates JavaScript language fundamentals, including variable assignment, increments, loops, and function declarations, with output logged to the browser console. The page uses a minimal HTML structure with inline CSS to remove body margins and prevent scrolling, while a static SVG element serves as a placeholder on a blank canvas. The code explores modern syntax features such as `let`, arrow functions, and template-free function expressions, though no visualization is rendered. It relies solely on native browser APIs—`console.log` for debugging and a hardcoded `<svg>` tag—without external libraries or data sources.

Nnreinig3@gatech.edu
56% match