I'm new to javaScript and I'm watching a lynda dot com video on JavaScript Essentials by Simon Allardice. In lesson 22, he goes over how to change DOM elements using JS. In an example, he uses .setAttribute(“align”, “right”); to change the alignment of some paragraph text to align right witin a div tag.
Does anyone know where I can find a reference list of available attributes to use for other DOM elements? I tried to search "javascript attributes reference list", but it returns html attributes.
HTML element and DOM element are synonymous. In the example you are using javascript to set HTML (DOM) element attributes. Here is a good resource.
Related
I'm trying to update an existing markup element in React rather than replacing an entire fragment. When I assign a div container element to a variable with .getElement(); I can select the first element within the div with firstElementChild. Then I can find its ".style.color" for example.
Now there's a popover that's the before-last element that I also want to get to it (and its backgroundColor). Not the lastElementChild, the one before that. How do I "get to it"? Is there an array of children I can use?
Not the lastElementChild, the one before that. How do I "get to it"?
You can go from the lastElementChild to its previousSibling
Is there an array of children I can use?
There is a live HTMLCollection (which is array-like) called children
DOM_Selector_Image
As can be shown in the attached image. Which presents a basic website with the "HTML Tree Generator" Add on.
typing the following in the chrome console:-
document.firstElementChild.lastElementChild.lastElementChild.previousElementSibling;
Will give you the following results:
<p> The DOM </p>
This is because
firstElementChild
This is the HTML document
lastElementChild
This is the Body
lastElementChild
This is the SCRIPT
previousElementSibling
This is the element before the SCRIPT which is the text "The DOM"
What is the main difference between element and html?
I used
insertAdjacentElement('beforeend', html);
and it showed error. But worked when using
insertAdjacentHTML('beforeend', html);
Just wondering what the difference was.
insertAdjacentElement() is used to insert an element which is already in the Dom.
You can get this element with getElementById() for example.
https://www.w3schools.com/jsref/met_node_insertadjacentelement.asp
insertAdjacentHtml() is used to insert html code.
https://www.w3schools.com/jsref/met_node_insertadjacenthtml.asp
The insertAdjacentElement method is only compatible with either elements already present in the DOM or new elements created with document.createElement method.
The insertAdjacentHTML however will not work when you are trying to insert DOM elements into another but rather works on strings that can be parsed as XML or HTML which is then added to the parent container.
Although they are pretty similar in that they have more positioning parameters than node.appendchild and element.append methods
I have recently discovered the HTML template element, and would appreciate some clarification.
As far as I can tell, the three distinguishing features are:
template is not rendered on screen
template does not make its way to the DOM
there is an additional content property which acts as a virtual element between the template and its contents
Aside from these, a <template> might have been a div, hidden from the screen and the DOM. In this regard, the JavaScript used to take advantage of the template is the same as if trying to fake one using a div.
Is this correct? I ask because it would be relatively easy to fake one for nonsupporting browsers.
There are some major differences:
Script (<script>) in a <template> element is not executed immediately.
Media content (<audio>, <video>, <img>) inside the template won't be loaded immedialtey.
Instead they will be executed or loaded once they are inserted in the rendered DOM tree.
querySelector() method calls and CSS selectors won't explore the content of a <template>, but you can still access the elements inside by using querySelector() on its content property.
With HTML5 template, you can access all its content in the form of a Document Fragment, and insert it in the DOM tree using appendChild(), instead of modifying innerHTML.
<template> elements can be placed in the <head> element.
You access the template content as a string using .innerHTML or as a DocumentFragment using .content.
It's quite difficult then to fake all thses behaviors. There are some polyfills that can partially do that. I'd recommend Neovov's one.
Look at this illustrative example:
//explore the content of the template
var script = T1.content.querySelector( 'script' )
console.log( script.innerHTML )
function insert() {
//insert the real templete
Target1.appendChild( T1.content.cloneNode( true ) )
//insert the fake template
Target2.innerHTML += D1.innerHTML
}
<template id=T1>
Real Template -
<script>console.log( 'executed at each insertion' )</script>
</template>
<div hidden id=D1>
Fake Template -
<script>console.log( 'executed only at parsing' )</script>
</div>
<button onclick="insert()">insert</button>
<div id=Target1><div>
<div id=Target2><div>
In short, the template tag is exactly what it sounds like.
It is just a template for the JavaScript to create in the future.
It is slightly different from a hidden <div> though, but basically you are right and it can be faked with a hidden div
Imagine this scenario where you have a webpage with 2 inputs, one that enters your name and one that enters your age. By using a template tag to create a simple table, you can then use JavaScript to populate the table with your inputs, in the same page.
This article has a good read on it:
https://www.sitepoint.com/html5-template-tag/
I want to know what the difference is between appendChild, insertAdjacentHTML, and innerHTML.
I think their functionality are similar but I want to understand clearly in term of usage and not the execution speed.
For example, I can use innerHTML to insert a new tag or text into another tag in HTML but it replaces the current content in that tag instead of appends.
If I would like to do it that way (not replace) I need to use insertAdjacentHTML and I can manage where I want to insert a new element (beforebegin, afterbegin, beforeend, afterend)
And the last if I want to create (not insertion in current tag) a new tag and insert it into HTML I need to use appendChild.
Am I understanding it correctly? Or are there any difference between those three?
element.innerHTML
From MDN:
innerHTML sets or gets the HTML syntax describing the element's descendants.
when writing to innerHTML, it will overwrite the content of the source element. That means the HTML has to be loaded and re-parsed. This is not very efficient especially when using inside loops.
node.appendChild
From MDN:
Adds a node to the end of the list of children of a specified parent node. If the node already exists it is removed from current parent node, then added to new parent node.
This method is supported by all browsers and is a much cleaner way of inserting nodes, text, data, etc. into the DOM.
element.insertAdjacentHTML
From MDN:
parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. [ ... ]
This method is also supported by all browsers.
....
The appendChild methods adds an element to the DOM.
The innerHTML property and insertAdjacentHTML method takes a string instead of an element, so they have to parse the string and create elements from it, before they can be put into the DOM.
The innerHTML property can be used both for getting and setting the HTML code for the content of an element.
#Guffa did explain the main difference ie innerHTML and insertAdjacentHTML need to parse the string before adding to DOM.
In addition see this jsPerf that will tell you that generally appendChild is faster for the job it provides.
One that I know innerHTML can grab 'inner html', appendChild and insertAdjacentHTML can't;
example:
<div id="example"><p>this is paragraph</p><div>
js:
var foo = document.getElementById('example').innerHTML;
end then now
foo = '<p>this is paragraph</p>';
DOCS:
appendChild
insertAdjacentHTML
innerHtml
innerHTML vs appendChild() performance
insertAdjacentHTML vs innerHTML vs appendChild performance
the main difference is location (positioning) :
(elVar mean element saved to variable)
** elVar.innerHTML: used to sets/get text and tags (like ) inside an element (if u use "=" it replace the content and "+=" will add to the end.
** divElvar.appendChild(imgElVar): to add pure element to the end of another element (or start with prepend) .
** insertedElVar.insertAdjacentElement(beforebegin,targetElvar): it insert element into spicific location before elVar (after it with "afterend").
-innerText: can replace/get/insertOnEnd text.but can read tags and text inside element with display:hidden , cant insert on start .
-innercontent : show all text inc hidden , cant read html tags and it put empty spaces instead of them , cant insert on start
-innerHTML: read all set all , cant insert on start
-prepend : insert text at start of elvar (but cant use to get/replace text or html)
prepend was needed for start, after it made its easy to make append , not for a need , its just bcz lol
Let say, I have code as follow
<div id='tes' data-name='baloon'>Content Baloon</div>
<div id='tes' data-name='big'>Content Big</div>
And I want to get inner of each div with javascript (not jquery) but work on html5. How to that?
You can't have elements with the same ID in an HTML (5 or any other version) document - it is an error. Therefore, there is no way javascript can address this.
Check the HTML spect at http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
You can have multiple elements with the same "name" property - and javascript offers support for that.
Just make tes a class and use Javascript to fetch all div elements with the class.
Then iterate through that set of elements and check for the specific data-name attribute you want to match.
Every div tag "class" or "id" cannot have same specific name.
data-name is use to match javascript function nor command given.