"Web Dev Saga: Week 6 :– Arrays, DOM Selection & Element Manipulation"

Things I Learned This Week :-

This week, I delved deeper into JavaScript, focusing on Arrays and the DOM (Document Object Model). Here’s a breakdown of what I covered:

• JavaScript Arrays – Explored how arrays store multiple values, learned different methods like push(), pop(), shift(), unshift(), splice(), slice(), and practiced looping through arrays efficiently. Want to know more? Head over to my keynotes.

• JavaScript DOM (Document Object Model) – Understood how the DOM represents the structure of a webpage, allowing JavaScript to interact with and manipulate elements dynamically. For more details, refer to my keynotes.

• Selecting Elements in JavaScript – Learned various ways to select elements using getElementById(), getElementsByClassName(), querySelector(), and querySelectorAll(), enabling precise element targeting. Curious to explore them further? Refer to my keynotes.

• Manipulating Elements & Attributes – Practiced inserting new elements with createElement() and appendChild(), modifying content with innerHTML, removing elements using remove(), and changing attributes dynamically with setAttribute() and getAttribute(). Also explored applying CSS styles via JavaScript for enhanced interactivity. Check out my keynotes for more details.

Steps That I Did :-

This week, I focused on JavaScript Arrays and DOM Manipulation. Here’s how I approached learning and implementing these concepts:

• Explored JavaScript Arrays – Created different arrays and experimented with methods like push(), pop(), shift(), unshift(), splice(), and slice() to modify array elements dynamically.

• Practiced DOM Manipulation – Accessed and modified webpage elements using JavaScript by selecting them with getElementById(), getElementsByClassName(), querySelector(), and querySelectorAll().

• Added & Removed Elements Dynamically – Used createElement(), appendChild(), and remove() to insert and delete elements in the DOM, making webpages more interactive.

• Modified Attributes & Styles with JavaScript – Updated src, href, class, and other attributes dynamically using setAttribute() and getAttribute(). Also styled elements by changing style properties.

Challenges I Faced and How I Overcame Them :-

• Understanding Complex Array Methods
  Challenge: While working with methods like splice(), map(), and filter(), I initially struggled to understand how they manipulate arrays differently.
  How I Overcame It: I practiced each method separately with different examples and logged the outputs to the console to see their effects. I also referred to MDN documentation and created small exercises to reinforce my learning.

• Updating Attributes & Styles with JavaScript
  Challenge: Changing attributes like src and href dynamically didn’t work as expected sometimes, and updating CSS styles inline felt confusing at first.
  How I Overcame It: I learned to use setAttribute() properly and practiced updating styles by modifying element.style.property instead of relying only on classList. Building small experiments helped me get comfortable with these concepts.

Resources I Used :-

• Videos :- Sigma Web Development Course By CodeWithHarry

• Documentation :- MDN Web Docs

Conclusion :-

This week was a deep dive into JavaScript Arrays and DOM Manipulation, and it truly expanded my understanding of how JavaScript interacts with web pages dynamically. From mastering complex array methods to efficiently selecting and modifying elements in the DOM, every challenge I faced helped solidify my learning.

The ability to insert, remove, and update elements dynamically using JavaScript has opened up a whole new world of possibilities for interactive web development. As I continue this journey, I’m excited to explore more advanced topics and build even more dynamic projects.

On to the next week of JavaScript adventures! 🚀💡