I am using neon-animation-pages and I want to see if an attribute is set on one of its child elements. From what I understand you can just add any attribute you want and if it is in the tag it will resolve to true if it doesn't have a value explicity set. For instance:
<neon-animation-pages id="pages">
<div awesome>This one is awesome</div>
<div>This one is not</div>
<div>This one is not</div>
</neon-animation-pages>
Above I created my own attribute called: awesome
In my code I use this:
_onIronSelect: function(){
console.log(this.$.pages.selectedItem.getAttribute('awesome'));
}
The console only spits out 'null' or ' ' depending on whether it has my awesome attribute. I can prob make it work, but I thought it was supposed to resolve to true or false, boolean?
Found this in the docs
Boolean properties are set based on the presence of the attribute: if
the attribute exists at all, the property is set to true, regardless
of the attribute value. If the attribute is absent, the property gets
its default value.
at https://www.polymer-project.org/1.0/docs/devguide/properties.html
So I assume I should be trying to get the value of the selectedItem's property > awesome. How can I do this?
There's an important difference between properties and attributes. Properties are JavaScript properties on the DOM object. Attributes basically provide a string valued key/value database that can be initialized from markup.
The Polymer docs you quoted are talking about properties. If a Polymer element has a property, awesome, listed in the properties object with a type of Boolean, it will deserialize to true or false as described.
This is a service Polymer provides because it's a common pattern for HTML elements. For example, if you set the id attribute on an HTML element, the browser automatically reflects that to the id property. But if you add a generic attribute that that element doesn't know about (like awesome), the attribute isn't reflected as a property.
If you want to test for the presence or absence of an attribute on any element (standard HTML or Polymer), use hasAttribute as #günter-zöchbauer said. According to MDN, getAttribute in all modern browsers returns null when the attribute is absent, but apparently this wasn't always true, so hasAttribute is probably safer, as well as clearer.
https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
Maybe you want
this.$.pages.selectedItem.hasAttribute('awesome')
Related
MDN says:
If you want default content for your , you enter it between the opening and closing tags. does not support the value attribute.
but in angular property binding we can bind to value.
<textarea rows="10" [value]="'test'" ></textarea>
is there any online repository where we can find all the properties with regard to angular.??
I found the article "HTML Attributes vs DOM Properties and Angular 2 Data Binding" useful, especially the following sections:
DOM is basically collection of objects (window,html,body, head and etc) which allows us to manipulate it. It means that HTML elements are contained in the DOM as objects.HTML elements have attributes which initilizes DOM properties. Once initilization process is done attributes job is done.
<input type=”text” value=”5">
Given input element has type and value attributes. When HTML element is created its properties which have similar names to attributes (but not same thing) is created, too. After initilization given input element have properties such as type and value.
Angular property binding acts on the elements/objects contained in the DOM. You can find a list of properties of all element interfaces at MDN Web APIs documentation. Most of the one's you're interested in, have a name that starts with 'HTML'.
The HTMLTextAreaElement interface for example corresponds to the <textarea> element. You can use all its properties and the properties of its parent interfaces for Angular property binding as long as they're not read only.
If we inspect any element in browser, there are two properties associated with each of them.
innertext and
innerText
(notice 'T' is caps in second one)
document.getElementById(elementId).innerText = 'sometext';
updates inner-text of the element but when I try to do
document.getElementById(elementId).innertext = 'someOtherText';
nothing happens.
Is there any difference between the two. If yes, what is the difference?
.innertext method does not exist in plain JS.
Hence, doing document.getElementById(elementId).innertext = 'someOtherText'; will create a new property called innertext for your object with the value you provided.
The innerText property is used by all major browsers, so that should be the one you use.
https://developer.mozilla.org/en-US/docs/Web/API/Node/innerText
Browsers historically have individually added a large number of non-standard features, and if you are seeing an innertext property, it was likely just added by that browser for convenience.
HTML 5.1 Specification define strange property in the Document IDL.
getter object (DOMString name);
It's not a typo and I don't understand how to use it.
That part of the WebIDL definition for the Document interface specifies that it has a named property getter. It only has meaning in combination with the section of the spec of the HTML spec that defines the supported property names for the Document interface.
Together, those specify some things that get exposed as named properties of a Document.
Consider the following document:
<!doctype html>
<form name=foo></form>
<form name=bar></form>
<iframe name=bar></iframe>
<p id=baz>
If you call document.foo you’ll get back a single element, the form name=foo element.
If you call document.bar you’ll get back a collection that includes both the form name=bar element and iframe name=bar element.
And if you call document.baz you’ll get back undefined.
The reason for all that behavior is, the section of the HTML spec defining the supported property names for the Document interface specifies that form[name] values and iframe[name] values are accessible as named properties of a Document
And that spec section also says that if a Document named property matches only one element, then that element is returned, but if it matches multiple elements, then a collection is returned.
And the reason document.baz returns undefined is because that spec section does not specify p[id] values as being accessible as named properties of a Document.
However, if you instead do window.baz you will get back the p id=baz element.
The reason for that difference is: while the WebIDL definition for Window specifies it is having a named property getter (just as the Document WebIDL does), the section defining the supported property names for Window—unlike the similar section for Document—does specify p[id] values (actually id values of any element) as being accessible as named properties of a Window.
I'm doing migration from 0.5 to 1.0.
While reading, I notice 2 different way on declaring attributes, using hostAttributes and properties.
What are difference between those 2 ?
Host attributes are attributes that do not match to an element's corresponding Javascript property (which you declare in properties). This includes attributes like class, tabindex, data-* attributes, aria-roles, etc. To declare them during create-time, you must set them in the hostAttributes object. If you are going to bind values into them, you must use $= (which calls Element.setAttribute) rather than =.
Sources:
https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#host-attributes
https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding
If a custom element needs HTML attributes set on it at create-time, the attributes may be declared in a hostAttributes property on the prototype, where keys are the attribute names and values are the values to be assigned.
But now since listeners and hostAttributes have been removed from element metadata
we can use _ensureAttribute as an alternative to define these kind of attributes
ex:-
this._ensureAttribute('tabindex', 0);
you can declare all such properties in ready
I would like to have a
<input type="text" value=VARIABLENAME />.
Is there anyway I can do this? Putting value = "VARIABLENAME" interprets it as the name of the variable. But I would like to assign the content of the variable to the value property.
EDIT: The variable is from the text content of one of my tables. I got the variable by using doing something like this in my script tag.
selectedScheduleName = e.target.childNodes[0].wholeText;
Thank you.
Yes, you can assign a value to the input's value property from a variable, e.g.:
theInput.value = theVariable;
You do this in the JavaScript, after getting a reference to the input element.
So for instance, if you give the input an id value of "foo", you can do this:
document.getElementById("foo").value = theVariable;
...within a script tag. (Be sure that the input has already been added to the DOM first, either by putting the script after it — the bottom of the body tag is good — or by using window's load event or, if you use a library that supports one, some kind of "dom ready" event.)
The element doesn't have to have an id, if you can get at it via getElementsByTagName or by the form element's elements array, etc., etc.
Handy references:
DOM2 Core specification (well supported cross-browser)
DOM2 HTML specification (reasonably well supported cross-browser)
DOM3 Core specification (not quite as well supported cross-browser yet)
The HTML5 specification now has IDL for the HTML DOM objects in it directly (supplanting/supplementing the DOM2 HTML spec), such as for HTMLElement, HTMLFormElement, and HTMLInputElement
If as you say you have a JavaScript variable you wish to apply:
var foo = "Testing";
document.GetElementById('ElementID').value = foo;
or using jQuery:
var foo = "Testing";
$("#ElementID").val(foo);