ડાયનેમિક વેબસાઇટ્સ

Jules David

રવિવાર, 20 ઑક્ટોબર, 2024 એ 03:34:49 AM વાગ્યે

JavaScript અને બહુવિધ કેટેગરીઝ સાથે ઉત્પાદન ફિલ્ટરિંગને વધારવું

ગતિશીલ, વપરાશકર્તા-મૈત્રીપૂર્ણ વેબ પૃષ્ઠો બનાવવા માટે સીમલેસ નેવિગેશન અને સામગ્રીનું સરળ ફિલ્ટરિંગ ઓફર કરવામાં આવે છે. બહુવિધ કેટેગરીમાં આવતા ઉત્પાદનો અથવા વસ્તુઓ પ્રદર્શિત કરતી વખતે આ ખાસ કરીને ઉપયોગી છે. JavaScript નો ઉપયોગ કરીને, અમે બહુવિધ કેટેગરીઝ પર આધારિત આઇટમ્સને ફિલ્ટર કરવાની સાહજિક રીત અમલમાં મૂકી શકીએ છીએ, જે વપરાશકર્તાઓ માટે તેઓ જે શોધી રહ્યાં છે તે બરાબર શોધવાનું સરળ બનાવે છે.

આ દૃશ્યમાં, કેટેગરી બટન પર ક્લિક કરવાથી પૃષ્ઠ પર પ્રદર્શિત વસ્તુઓને ફિલ્ટર કરવી જોઈએ. વપરાશકર્તા એકસાથે બહુવિધ કેટેગરીઝ પસંદ કરવા સક્ષમ હોવા જોઈએ, જે ઉત્પાદનોના વધુ અનુરૂપ દૃશ્ય માટે પરવાનગી આપે છે. દાખલા તરીકે, "સૅલ્મોન" અને "ઝીંગા" પસંદ કરવાથી માત્ર બંને ઘટકો ધરાવતી વસ્તુઓ દર્શાવવી જોઈએ.

હાલમાં, ઘણા અમલીકરણો સિંગલ-કેટેગરી ફિલ્ટરિંગ માટે સારી રીતે કામ કરે છે, પરંતુ બહુવિધ કેટેગરીઝ ઉમેરવા મુશ્કેલ હોઈ શકે છે. પડકાર એ સુનિશ્ચિત કરવામાં આવેલું છે કે કઈ વસ્તુઓ બતાવવા અથવા છુપાવવી તે નક્કી કરતી વખતે બધી પસંદ કરેલી શ્રેણીઓ ધ્યાનમાં લેવામાં આવે છે. આ લેખ JavaScript નો ઉપયોગ કરીને કાર્યક્ષમ રીતે સિંગલ-કેટેગરી ફિલ્ટરિંગને મલ્ટિ-કેટેગરી ફિલ્ટરિંગમાં કેવી રીતે વિસ્તૃત કરવું તે શોધે છે.

આ માર્ગદર્શિકામાં, અમે એક સરળ અને વપરાશકર્તા-મૈત્રીપૂર્ણ અનુભવ પ્રદાન કરીને, બહુવિધ સક્રિય બટનો પર આધારિત કાર્ડ્સને ગતિશીલ રીતે ફિલ્ટર કરતા ઉકેલમાંથી પસાર થઈશું. આ JavaScript સોલ્યુશનનો અમલ કરીને, તમે તમારા વેબ પૃષ્ઠની ક્રિયાપ્રતિક્રિયાને કેવી રીતે બહેતર બનાવવી અને વપરાશકર્તાની સગાઈ કેવી રીતે વધારવી તે શીખી શકશો.

આદેશ	ઉપયોગનું ઉદાહરણ
every()	The every() method is used to check if all selected categories match the categories of each card. This is crucial in ensuring that multiple category filters work correctly. For example, activeCategories.every(cat =>દરેક () પદ્ધતિનો ઉપયોગ એ તપાસવા માટે થાય છે કે બધી પસંદ કરેલી શ્રેણીઓ દરેક કાર્ડની શ્રેણીઓ સાથે મેળ ખાય છે કે કેમ. બહુવિધ કેટેગરી ફિલ્ટર્સ યોગ્ય રીતે કાર્ય કરે છે તેની ખાતરી કરવા માટે આ મહત્વપૂર્ણ છે. ઉદાહરણ તરીકે, activeCategories.every(cat => cardCategories.includes(cat)) એ સુનિશ્ચિત કરે છે કે તમામ પસંદ કરેલ કેટેગરીઝ કાર્ડની શ્રેણીઓમાં સમાયેલ છે.
toggle()	આ આદેશ વર્ગને ચાલુ અથવા બંધને ટૉગલ કરે છે. જ્યારે ક્લિક કરવામાં આવે ત્યારે કેટેગરી બટનમાંથી સક્રિય-બટન વર્ગને ગતિશીલ રીતે ઉમેરવા અથવા દૂર કરવા માટે તેનો ઉપયોગ થાય છે. આ બટન સક્રિય છે કે કેમ તે ટ્રૅક કરવામાં મદદ કરે છે, જેના પર અસર થાય છે કે કયા કાર્ડ્સ બતાવવામાં આવ્યા છે અથવા છુપાયેલા છે.
filter()	The filter() method creates a new array with all elements that pass a test. In the Node.js example, products.filter(product => selectedCategories.every(cat =>ફિલ્ટર() પદ્ધતિ ટેસ્ટ પાસ કરતા તમામ ઘટકો સાથે નવી એરે બનાવે છે. Node.js ઉદાહરણમાં, products.filter(product => selectedCategories.every(cat => product.categories.includes(cat))) વપરાશકર્તા દ્વારા પસંદ કરાયેલી શ્રેણીઓના આધારે ઉત્પાદનોને ફિલ્ટર કરે છે.
split()	સ્પ્લિટ() પદ્ધતિનો ઉપયોગ શ્રેણીઓની સ્ટ્રિંગને એરેમાં રૂપાંતરિત કરવા માટે થાય છે. દાખલા તરીકે, card.getAttribute("data-category").split(",") અલ્પવિરામથી અલગ કરેલ કેટેગરી સ્ટ્રિંગને સક્રિય શ્રેણીઓ સાથે સરળ સરખામણી માટે એરેમાં વિભાજિત કરે છે.
classList.add()	આ પદ્ધતિ એલિમેન્ટમાં ચોક્કસ વર્ગ ઉમેરે છે. તેનો ઉપયોગ સક્રિય ફિલ્ટર્સ સાથે મેળ ખાતા ન હોય તેવા કાર્ડને છુપાવવા માટે નિષ્ક્રિય-કાર્ડ વર્ગ ઉમેરવા માટે થાય છે. ઉદાહરણ તરીકે, card.classList.add("નિષ્ક્રિય-કાર્ડ") કાર્ડને છુપાવે છે જ્યારે તેની કેટેગરીઝ પસંદ કરેલ સાથે મેળ ખાતી નથી.
trim()	ટ્રિમ() પદ્ધતિનો ઉપયોગ સ્ટ્રિંગના બંને છેડામાંથી વ્હાઇટસ્પેસ દૂર કરવા માટે થાય છે. સ્ક્રિપ્ટમાં, તે સુનિશ્ચિત કરે છે કે બટનોમાંથી શ્રેણીઓ ઉત્પાદન ડેટાની શ્રેણીઓ સાથે સ્વચ્છ રીતે સરખાવવામાં આવે છે. દાખલા તરીકે, button.innerText.trim() ખાતરી કરે છે કે કોઈ વધારાની જગ્યાઓ ધ્યાનમાં લેવામાં આવતી નથી.
post()	બેકએન્ડ સ્ક્રિપ્ટમાં, post() નો ઉપયોગ રૂટ બનાવવા માટે થાય છે જે ક્લાયન્ટ દ્વારા મોકલવામાં આવેલ ડેટા સ્વીકારે છે (આ કિસ્સામાં, પસંદ કરેલ શ્રેણીઓ). સર્વર-સાઇડ સ્ક્રિપ્ટ પસંદ કરેલ કેટેગરીઝના આધારે ફિલ્ટર કરેલ ઉત્પાદન ડેટા પરત કરવા માટે આ વિનંતી પર પ્રક્રિયા કરે છે.
json()	એક્સપ્રેસમાં આ પદ્ધતિનો ઉપયોગ ક્લાયન્ટને JSON પ્રતિસાદ મોકલવા માટે થાય છે. દાખલા તરીકે, res.json(filteredProducts) પસંદ કરેલ કેટેગરીઝ સાથે મેળ ખાતા ઉત્પાદનો પરત કરે છે, જે ક્લાયન્ટ-સાઇડને ફિલ્ટર કરેલ ઉત્પાદનો પ્રદર્શિત કરવાની મંજૂરી આપે છે.

JavaScript માં મલ્ટી-કેટેગરી ફિલ્ટરિંગને સમજવું

ઉપરોક્ત આપવામાં આવેલી સ્ક્રિપ્ટો બહુવિધ કેટેગરીઝ પર આધારિત આઇટમ્સને ગતિશીલ રીતે ફિલ્ટર કરવા પર ધ્યાન કેન્દ્રિત કરે છે, જે ઉત્પાદન-આધારિત વેબસાઇટ્સ પર વપરાશકર્તા અનુભવને વધારવા માટે જરૂરી છે. ધ્યેય વપરાશકર્તાઓને બહુવિધ કેટેગરીઝ પસંદ કરવા અને તે મુજબ કાર્ડ ફિલ્ટર કરવાની મંજૂરી આપવાનો છે. આ JavaScript નો ઉપયોગ કરીને બટન ક્લિક્સ કેપ્ચર કરીને, પસંદ કરેલ કેટેગરીઝને એરેમાં સ્ટોર કરીને અને પછી તમામ પસંદ કરેલ કેટેગરીઝ સાથે મેળ ખાતા કાર્ડ પ્રદર્શિત કરીને પ્રાપ્ત થાય છે. જ્યારે વપરાશકર્તા કેટેગરી બટન પર ક્લિક કરે છે ત્યારે પ્રક્રિયા શરૂ થાય છે, જે તે બટનની સક્રિય સ્થિતિને ટૉગલ કરે છે. બટનની કિંમત એરેમાં સંગ્રહિત છે, જે તમામ સક્રિય ફિલ્ટર્સનું પ્રતિનિધિત્વ કરે છે.

આ ઉકેલનો એક મહત્વપૂર્ણ ભાગ એરે પદ્ધતિનો ઉપયોગ કરી રહ્યો છે દરેક(). આ આદેશ સુનિશ્ચિત કરે છે કે તમામ પસંદ કરેલ શ્રેણીઓની સરખામણી કાર્ડની શ્રેણીઓ સાથે કરવામાં આવે છે. તે તપાસે છે કે દરેક સક્રિય કેટેગરી કાર્ડની શ્રેણીઓમાં જોવા મળે છે કે કેમ, આમ બહુ-કેટેગરી ફિલ્ટરિંગને સરળતાથી કાર્ય કરવાની મંજૂરી આપે છે. બીજી મહત્વપૂર્ણ પદ્ધતિ છે વિભાજિત(), જેનો ઉપયોગ દરેક કાર્ડમાંથી શ્રેણીઓની સ્ટ્રિંગને એરેમાં તોડવા માટે થાય છે. આ JavaScript ને વ્યક્તિગત કેટેગરીની તુલના કરવા અને કયા કાર્ડ પ્રદર્શિત કરવા અથવા છુપાવવા જોઈએ તે નિર્ધારિત કરવા સક્ષમ કરે છે.

વધુમાં, સ્ક્રિપ્ટ વાપરે છે classList.toggle() જ્યારે ક્લિક કરવામાં આવે ત્યારે બટનો પર સક્રિય વર્ગ ઉમેરવા અથવા દૂર કરવા. આ વર્ગ દ્રશ્ય પ્રતિસાદ માટે નિર્ણાયક છે, કારણ કે તે સૂચવે છે કે કયા બટનો હાલમાં સક્રિય છે. જ્યારે બટન નિષ્ક્રિય કરવામાં આવે છે, ત્યારે તેની શ્રેણી સક્રિય શ્રેણીઓની શ્રેણીમાંથી દૂર કરવામાં આવે છે, અને ડિસ્પ્લેને અપડેટ કરવા માટે ફિલ્ટરિંગ કાર્ય ફરીથી ટ્રિગર થાય છે. સક્રિય શ્રેણીઓ સાથે મેળ ખાતા ન હોય તેવા કાર્ડ્સને નિષ્ક્રિય તરીકે ચિહ્નિત કરવા માટે વર્ગ ઉમેરીને છુપાવવામાં આવે છે. આ પદ્ધતિ સુનિશ્ચિત કરે છે કે વપરાશકર્તાઓ બહુવિધ ફિલ્ટર્સને પસંદ અથવા નાપસંદ કરીને તેમની શોધને સરળતાથી રિફાઇન કરી શકે છે.

બેક-એન્ડ સ્ક્રિપ્ટ Node.js અને Express નો ઉપયોગ કરીને સર્વર-સાઇડ પર ઉત્પાદન ફિલ્ટરિંગને હેન્ડલ કરવા માટે રચાયેલ છે. પસંદ કરેલ કેટેગરીઝ પોસ્ટ વિનંતી દ્વારા સર્વરને મોકલવામાં આવે છે, અને સર્વર ઉત્પાદનોને ફિલ્ટર કરીને અને ફક્ત સક્રિય શ્રેણીઓ સાથે મેળ ખાતી વસ્તુઓ પરત કરીને આ વિનંતી પર પ્રક્રિયા કરે છે. સર્વર ફ્રન્ટ-એન્ડ જેવા જ તર્કનો ઉપયોગ કરે છે, નો ઉપયોગ કરીને ફિલ્ટર() દરેક ઉત્પાદનની શ્રેણીઓ સાથે પસંદ કરેલ શ્રેણીઓની તુલના કરવાની પદ્ધતિ. મોટા ડેટાસેટ્સ સાથે કામ કરતી વખતે આ અભિગમ ઉપયોગી છે, કારણ કે તે ક્લાયન્ટ-સાઇડથી પ્રોસેસિંગને ઑફલોડ કરે છે, પરિણામે અંતિમ-વપરાશકર્તાઓ માટે વધુ સારું પ્રદર્શન થાય છે.

JavaScript નો ઉપયોગ કરીને ડાયનેમિક આઇટમ ફિલ્ટરિંગ: ઑપ્ટિમાઇઝ મલ્ટી-કેટેગરી ફિલ્ટરિંગ

વેનીલા જાવાસ્ક્રિપ્ટનો ઉપયોગ કરીને ફ્રન્ટ-એન્ડ ડેવલપમેન્ટ અભિગમ

// Define product data
let products = {
  data: [
    { productName: "Fantasy", category: "Salmon, Shrimp" },
    { productName: "Spring", category: "Veggie" },
    { productName: "Rainbow", category: "Salmon, Tuna, Unagi" },
    { productName: "Unique", category: "Salmon, Tuna, Unagi, Shrimp" },
    { productName: "Perfection", category: "Salmon" },
  ]
};

// Handle button click event
let activeCategories = [];
document.querySelectorAll(".category-button").forEach(button => {
  button.addEventListener("click", () => {
    const category = button.innerText.trim();
    button.classList.toggle("active-button");
    if (button.classList.contains("active-button")) {
      activeCategories.push(category);
    } else {
      activeCategories = activeCategories.filter(cat => cat !== category);
    }
    filterCards();
  });
});

// Filter cards based on active categories
function filterCards() {
  document.querySelectorAll(".card").forEach(card => {
    const cardCategories = card.getAttribute("data-category").split(",");
    const match = activeCategories.every(cat => cardCategories.includes(cat));
    card.style.display = match ? "block" : "none";
  });
}

ડાયનેમિક આઇટમ ફિલ્ટરિંગ માટે બેકએન્ડ અમલીકરણ

Node.js અને Express નો ઉપયોગ કરીને સર્વર-સાઇડ અભિગમ

const express = require('express');
const app = express();
app.use(express.json());

// Sample product data
const products = [
  { name: 'Fantasy', categories: ['Salmon', 'Shrimp'] },
  { name: 'Spring', categories: ['Veggie'] },
];

// Filter products API
app.post('/filter', (req, res) => {
  const selectedCategories = req.body.categories;
  const filteredProducts = products.filter(product =>
    selectedCategories.every(cat => product.categories.includes(cat))
  );
  res.json(filteredProducts);
});

app.listen(3000, () => console.log('Server running on port 3000'));

વેબ ડેવલપમેન્ટમાં મલ્ટી-કેટેગરી ફિલ્ટરિંગ માટે અદ્યતન તકનીકો

માં બહુ-શ્રેણી ફિલ્ટરિંગ સિસ્ટમ લાગુ કરતી વખતે જાવાસ્ક્રિપ્ટ, માત્ર UI ક્રિયાપ્રતિક્રિયા જ નહીં, પણ તેને સમર્થન આપતું ડેટા માળખું પણ ધ્યાનમાં લેવું મહત્વપૂર્ણ છે. ગતિશીલ સામગ્રીના સંદર્ભમાં, ઑપ્ટિમાઇઝ અને સ્વચ્છ જાળવણી DOM મેનીપ્યુલેશન વ્યૂહરચના કી છે. દાખલા તરીકે, તમે બહુવિધ કેટેગરી બટનોને અસરકારક રીતે હેન્ડલ કરવા માટે ઇવેન્ટ ડેલિગેશન તકનીકોનો ઉપયોગ કરી શકો છો, ખાતરી કરો કે માત્ર જરૂરી DOM ઘટકોની જ હેરફેર કરવામાં આવી છે.

એક પાસું જે ફિલ્ટરિંગ અનુભવને વધુ વધારી શકે છે તે સરળ બટનોને બદલે વધુ અત્યાધુનિક UI ઘટકો, જેમ કે ચેકબોક્સ અથવા બહુ-પસંદ ડ્રોપડાઉન ઉમેરવાનું છે. આ વપરાશકર્તાઓને વધુ દાણાદાર રીતે ફિલ્ટર્સ સાથે ક્રિયાપ્રતિક્રિયા કરવાની મંજૂરી આપે છે. ઉદાહરણ તરીકે, એક ડ્રોપડાઉન જે બહુવિધ પસંદગીઓને મંજૂરી આપે છે તે વર્ગો પસંદ કરતી વખતે વપરાશકર્તાઓ માટે ક્લીનર UI અને વધુ સુગમતા પ્રદાન કરે છે. આને વધારાના JavaScript લોજિક અને સ્ટાઇલ સાથે અમલમાં મૂકી શકાય છે, જ્યારે હજુ પણ એરે પદ્ધતિઓનો ઉપયોગ કરે છે જેમ કે filter() અને every() શ્રેણી સરખામણી માટે.

અન્ય મહત્ત્વપૂર્ણ વિચારણા એ ફિલ્ટરિંગ સિસ્ટમની કામગીરી છે, ખાસ કરીને જ્યારે મોટા ડેટાસેટ સાથે કામ કરતી વખતે. જ્યારે તમારી પાસે ફિલ્ટર કરવા માટે સેંકડો અથવા હજારો આઇટમ્સ હોય, ત્યારે શક્ય તેટલું DOM મેનીપ્યુલેશન ઓછું કરવું મહત્વપૂર્ણ છે. આને ઑપ્ટિમાઇઝ કરવાની એક રીત એ છે કે DOM પરના અપડેટ્સને બેચ કરો requestAnimationFrame() અથવા debounce() અપડેટ્સના દરને નિયંત્રિત કરવા અને સરળ વપરાશકર્તા અનુભવની ખાતરી કરવા માટેની પદ્ધતિઓ. આ તકનીકો માત્ર કાર્યક્ષમતામાં સુધારો કરતી નથી પણ પૃષ્ઠની પ્રતિભાવશીલતાને પણ વધારે છે, જે તેને મોટા ડેટાસેટ્સ માટે વધુ સ્કેલેબલ બનાવે છે.

JavaScript માં મલ્ટી-કેટેગરી ફિલ્ટરિંગ વિશે વારંવાર પૂછાતા પ્રશ્નો

હું બહુવિધ સક્રિય ફિલ્ટર્સને કેવી રીતે હેન્ડલ કરી શકું?
તમે સક્રિય ફિલ્ટર્સને એરેમાં સંગ્રહિત કરી શકો છો અને ઉપયોગ કરી શકો છો every() દરેક કાર્ડની શ્રેણી પસંદ કરેલા ફિલ્ટર્સ સાથે મેળ ખાય છે કે કેમ તે તપાસવા માટે.
જો મારી પાસે ઓવરલેપિંગ શ્રેણીઓ હોય તો શું થાય?
ઉપયોગ કરીને split() અને trim(), તમે દરેક કેટેગરી સક્રિય ફિલ્ટર્સ સાથે યોગ્ય રીતે સરખાવવામાં આવે તેની ખાતરી કરીને કેટેગરીના ડેટાને અલગ અને સાફ કરી શકો છો.
હું મોટા ડેટાસેટ્સ માટે ફિલ્ટરિંગને કેવી રીતે ઑપ્ટિમાઇઝ કરી શકું?
બેચ DOM નો ઉપયોગ કરીને અપડેટ્સ requestAnimationFrame() અથવા અમલીકરણ a debounce() ફિલ્ટરિંગ કામગીરીની આવર્તન ઘટાડવા, કામગીરીમાં સુધારો કરવા માટેનું કાર્ય.
બધી પસંદ કરેલી શ્રેણીઓ સાથે મેળ ખાતી વસ્તુઓ હું કેવી રીતે પ્રદર્શિત કરી શકું?
ઉપયોગ કરો every() દરેક કાર્ડના ડેટામાં તમામ પસંદ કરેલ કેટેગરીનો સમાવેશ થાય છે તે સુનિશ્ચિત કરવા માટે તેમને દૃશ્યમાન બનાવતા પહેલા.
કાર્ડ સિસ્ટમમાં તૂટેલી છબીઓને હેન્ડલ કરવાની શ્રેષ્ઠ રીત કઈ છે?
અમલ કરો error જ્યારે તે લોડ થવામાં નિષ્ફળ જાય ત્યારે ઇમેજને છુપાવવા અથવા બદલવા માટે દરેક ઇમેજ પર ઇવેન્ટ લિસનર, વપરાશકર્તા અનુભવને વધારે છે.

જાવાસ્ક્રિપ્ટ ફિલ્ટરિંગ તકનીકો પર અંતિમ વિચારો

વેબ પેજીસમાં મલ્ટી-કેટેગરી ફિલ્ટરિંગ લાગુ કરવાથી વપરાશકર્તાના અનુભવમાં નોંધપાત્ર સુધારો થઈ શકે છે, જે વપરાશકર્તાઓને તેમને જે જોઈએ છે તે શોધવાનું સરળ બનાવે છે. ના સાવચેત ઉપયોગ સાથે જાવાસ્ક્રિપ્ટ જેવી પદ્ધતિઓ ટૉગલ() અને દરેક(), વિકાસકર્તાઓ એક કાર્યક્ષમ, સ્કેલેબલ સોલ્યુશન બનાવી શકે છે જે મોટા ડેટાસેટ્સને સરળતાથી હેન્ડલ કરે છે.

તદુપરાંત, DOM મેનીપ્યુલેશનને ઑપ્ટિમાઇઝ કરીને અને બિનજરૂરી કામગીરીને ઘટાડીને, આ અભિગમ ઉચ્ચ વપરાશકર્તા ક્રિયાપ્રતિક્રિયા સાથે પણ કાર્યક્ષમતાની ખાતરી કરે છે. આ ફિલ્ટરિંગ સિસ્ટમને ઈ-કોમર્સ વેબસાઇટ્સ, પોર્ટફોલિયોમાં અથવા બહુવિધ ફિલ્ટર્સ પર આધારિત ડાયનેમિક કન્ટેન્ટ ડિસ્પ્લેની આવશ્યકતા ધરાવતા કોઈપણ પેજમાં એકીકૃત કરી શકાય છે.

સ્ત્રોત અને સંદર્ભ વિભાગ

આ લેખમાંની સામગ્રી અને કોડ ઉદાહરણો એલેના ચુયાનકોવાના કોડપેન ઉદાહરણથી પ્રેરિત છે. તમે મૂળ કોડ અહીં અન્વેષણ કરી શકો છો: એલેના કોડપેન .
જાવાસ્ક્રિપ્ટ એરે પદ્ધતિઓ અને ઇવેન્ટ હેન્ડલિંગ પર વધારાના ખ્યાલો અધિકૃત મોઝિલા ડેવલપર નેટવર્ક દસ્તાવેજીકરણમાંથી સંદર્ભિત કરવામાં આવ્યા હતા, અહીં સુલભ છે: MDN વેબ દસ્તાવેજ .
JavaScript નો ઉપયોગ કરીને DOM મેનીપ્યુલેશન અને પ્રદર્શનને ઑપ્ટિમાઇઝ કરવા પર વધુ આંતરદૃષ્ટિ માટે, મેં સ્મેશિંગ મેગેઝિન તરફથી આ વ્યાપક માર્ગદર્શિકાનો ઉલ્લેખ કર્યો: કાર્યક્ષમ DOM ને સમજવું .

ડાયનેમિક વેબસાઇટ્સ માટે કેટલીક શ્રેણીઓ દ્વારા વસ્તુઓને સૉર્ટ કરવા માટે JavaScript નો ઉપયોગ કરો