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.
Related
I know that the textarea doesn't support the functionality of pattern, however if I set the pattern variable in html, its still present in the browser.
So I have to execute the pattern verification in js anyways, but is it OK for me to store the pattern in the pattern attribute? As opposed to data-pattern or something, for consistency with the input elements?
You should use data-* attributes for extra attributes and since textarea tag does not support the pattern attribute then adding it like adding value to div.
Hope this helps.
Custom attribute is suppose to have the data- prefix, so I recommend to use that or you could ran into issues when validating your code.
And what happens if such an attribute suddenly become a standard attribute?
More to read:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#data-*
https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
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')
I'm experimenting with the HTML Filter module from the PowerMezz library and would like to customise the filter rules for a particular instance of the function. Is this possible?
For example, by default the style attribute is permitted, however I'd like to have this attribute stripped:
>> filter-html {<p style="color:red">A Para</p>}
== {<p>A Para</p>}
As well as limiting some other tags/attributes that are otherwise allowed.
After studying the filter-html module it looks like the immediate answer is no --- there appears to be no way to change the filter options for a particular instance.
After some experimentation, however, I discovered that you can make small change to make something like this possible. Most attribute handling can be customized by changing the attributes-map block, but inline style attributes are not handled in that block. They are dealt with specifically in the check-attributes function.
I commented out these lines in check-attributes which then causes all style attributes get stripped out by default:
if value: select attributes 'style [
append style value
]
You would need to add the ones you didn't want filtered back in to the specific html tags in attribute-map. I make a copy of the original attribute-map, make my changes, run filter-html, then revert back to the original before the next filtering instance.
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);
What Xpath expression can I use to find all the anchor (just 'a') elements whose actual text (the innerHTML) is Logout.
something like
//a[#innerHTML='Logout']
Would that be correct?
No, it would be incorrect. innerHTML is a property, part of the object model, while XPath operates on tags and attributes. Unless your a tag actually has an attribute named innerHTML, this wouldn't work.
If you want to compare the value of the tag itself, you can use the . (dot) to refer to the tag:
a[.='Logout']
However, I must add, just in case you're using jQuery: I'm not sure if it will work with jQuery. jQuery does not support XPath fully, only basic stuff.