Traversing the DOM - Revision history

Bacchas at 00:33, 2 December 2016

2016-12-02T00:33:35Z

← Older revision		Revision as of 00:33, 2 December 2016
Line 11:		Line 11:
	''' ES6 Version'''		''' ES6 Version'''
	const boxesArr = Array.from(elements)		const boxesArr = Array.from(elements)
			boxesArr.forEach(cur => cur.style.backgroundColor = 'blue');

2016-12-02T00:31:52Z

← Older revision		Revision as of 00:31, 2 December 2016
Line 10:		Line 10:
	</pre>		</pre>
	''' ES6 Version'''		''' ES6 Version'''
			const boxesArr = Array.from(elements)

2016-12-01T21:17:57Z

← Older revision		Revision as of 21:17, 1 December 2016
Line 9:		Line 9:

	</pre>		</pre>
	''' ES6 E		''' ES6 Version'''


	==Selecting Elements with the query selector==		==Selecting Elements with the query selector==
	document.querySelector('h1');		document.querySelector('h1');

2016-12-01T19:22:43Z

← Older revision		Revision as of 19:22, 1 December 2016
Line 9:		Line 9:

	</pre>		</pre>
			''' ES6 E
	==Selecting Elements with the query selector==		==Selecting Elements with the query selector==
	document.querySelector('h1');		document.querySelector('h1');

2016-12-01T17:18:36Z

← Older revision		Revision as of 17:18, 1 December 2016
Line 1:		Line 1:
			== Getting all Elements with the same class ==
			<pre>
			var elements = document.querySelectorAll('.box');
			// the queryelectorall Returns a Node List so we have to convert it to a regular array by using the slice.call
			var boxesArr = Array.prototype.slice.call(elements);
			boxesArr.forEach(function(curr){
			cur.style.backgroundColor = 'green';
			});

			</pre>

	==Selecting Elements with the query selector==		==Selecting Elements with the query selector==
	document.querySelector('h1');		document.querySelector('h1');

2016-10-30T21:34:49Z

Changing CSS

← Older revision		Revision as of 21:34, 30 October 2016
Line 36:		Line 36:

	== Changing CSS ==		== Changing CSS ==
			'''NOTE: CSS style names and DOM Styles are a little Different. eg. css background color is background-color while DOM is backgorundColor'''
	var mystyle = document.querySelector('#myid');		var mystyle = document.querySelector('#myid');
	mystyle.style.backgroundColor = "red";		mystyle.style.backgroundColor = "red";

	==[[#top\|Back To Top]]-[[Main_Page\| Home]] - [[Java Script\|Category]]==		==[[#top\|Back To Top]]-[[Main_Page\| Home]] - [[Java Script\|Category]]==

2016-10-30T21:33:27Z

← Older revision		Revision as of 21:33, 30 October 2016
Line 34:		Line 34:
	</body>		</body>
	</pre>		</pre>

			== Changing CSS ==
			var mystyle = document.querySelector('#myid');
			mystyle.style.backgroundColor = "red";
	==[[#top\|Back To Top]]-[[Main_Page\| Home]] - [[Java Script\|Category]]==		==[[#top\|Back To Top]]-[[Main_Page\| Home]] - [[Java Script\|Category]]==

2016-10-30T20:58:34Z

Selecting Elements with the query selector

← Older revision		Revision as of 20:58, 30 October 2016
Line 3:		Line 3:
	document.querySelector('.classname'); // will return the 1st item with that class name		document.querySelector('.classname'); // will return the 1st item with that class name
	document.querySelectorAll('.classname'); // will return a array with all items with that class name		document.querySelectorAll('.classname'); // will return a array with all items with that class name
			document.querySelectorAll(.classname').[0] // will select the first array item with that classname
	document.querySelector('#idname');		document.querySelector('#idname');

2016-10-25T19:24:31Z

← Older revision		Revision as of 19:24, 25 October 2016
Line 32:		Line 32:
	</ul>		</ul>
	</body>		</body>
			</pre>
	==[[#top\|Back To Top]]-[[Main_Page\| Home]] - [[Java Script\|Category]]==		==[[#top\|Back To Top]]-[[Main_Page\| Home]] - [[Java Script\|Category]]==
	~~</pre>~~

2016-10-25T19:24:13Z

← Older revision		Revision as of 19:24, 25 October 2016
Line 32:		Line 32:
	</ul>		</ul>
	</body>		</body>
			==[[#top\|Back To Top]]-[[Main_Page\| Home]] - [[Java Script\|Category]]==
	</pre>		</pre>