The Polymer documentation says:
Polymer provides a custom API for manipulating DOM such that local DOM and light DOM trees are properly maintained. These methods and properties have the same signatures as their standard DOM equivalents, except that properties and methods that return a list of nodes return an Array, not a NodeList.
Note: All DOM manipulation must use this API, as opposed to DOM API directly on nodes.
Jquery has a lot of useful methods though, which make my life easier, like toggleClass, hasClass, addClass, one...
I have been able to use some of these methods without consequence in my elements, but I am wondering what exactly the semantics are behind the bold part of the above quote, so I can reason about things more clearly.
Note: I'm not talking about using jquery in the main document, I am talking about using it when I am inside the shadow boundary, like in an element's ready callback for instance.
You can, actually. You'll just have to use Polymer.dom(this.root).querySelector and wrap that returned element in jquery.
Here's an example. http://jsbin.com/purudu/edit?html,output
Related
I've read the documentation over and over and have googled with no luck. The docs start explaining this.$ with an example but then they don't give an example for what this.$$ does
As far as I understand it, this.$ will find something in my template with the ID I want. For example - I can use this.$.test.textContent="hey there"
But for this.$$ it just says "dynamically-created nodes" - maybe someone can explain with an example what the difference between static and dynamic created nodes is, and how to use this.$$ - Thank you in advance!
Polymer.dom(this.root).querySelector utilizes the shady DOM API.
Polymer with shady DOM (default in 1.0) doesn't fully polyfill shadow DOM.
To ensure all Polymer features, not natively supported by the browser, are taken into account correctly (like <content> projection) when using querySelector()) you need to use the Polymer.dom(...) wrapper.
this.$ is a getter that returns a static map from element id to the element reference. Elements created by dom-repeat or hidden by dom-if or otherwise created dynamically are not included.
this.$$() is a shorthand function for Polymer.dom(this.root).querySelector() and therefor takes dynamically created elements into account, because it actually queries the DOM when executed.
That's the question, but specifically my problem is:
I can't execute getComputedStyle it keep yelling the first parameter is not type of element.
I can't access raw DOM property.
Often i can't see raw DOM property in web console.
I care more about my understanding rather than getting my code running.
Angular Element:
If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or jqLite.
https://docs.angularjs.org/api/ng/function/angular.element
DOM element:
Document object model.
The DOM is the way Javascript sees its containing pages' data. It is an object that includes how the HTML/XHTML/XML is formatted, as well as the browser state.
A DOM element is something like a DIV, HTML, BODY element on a page. You can add classes to all and add style with respect to added classes using CSS, or interact with them using JS.
look at this answer
What is DOM element?
Is it better to use
document.createNode();
or plain text like
var foo = '<div> bar </div>';
to create HTML markup with JavaScript?
There is no "better" in this particular case, it is going to boil down to what is most easily maintained. and programmer preference.
In some browsers, using DOM to create elements and nodes is, in terms of performance, faster than others. Some user agents process strings faster, for example by setting the innerHTML property.
I personally prefer to use DOM objects always, but I use the mootools framework which lends itself to this approach. jQuery encourages string-based creation.
Check out this benchmark: http://jsperf.com/string-vs-createelement/3, but also consider these articles: http://www.quirksmode.org/dom/innerhtml_old.html and http://karma.nucleuscms.org/item/101
It is better to use the DOM node functions. If you want to create it using a string, look into jQuery, as it has ways to parse it correctly into DOM nodes for you.
var foo = $('<div> bar </div>');
Using DOM manipulation functions you can have a reference to the created elements, one by one, and will be easier to modify the code later on, for example modify the tree order, adding or removing an element, and also for debugging purposes.
This said, there are some times I experienced myself in which the DOM manipulation functions are not the best way.
For example I had the necessity to modify real time the content of a style tag, to control the style of the elements directly via text css rules, something you can't achieve in all browsers using the various JS style objects, because they contain read-only properties.
In this case the style tag html was read-only for IE (or at least IE didn't like to modify it via innerHtml or similar), the only solution I found was to read the old html value, change it, remove the element and create a new style tag element with the new html directly typed in the string when creating the element.
This said, I would go with the DOM node functions whenever possible.
I don't know what it's called, but I know that there's a way to get elements based on their tags without getElementsByTagName. It returns the same thing, but it's shorter and I'm using tags a lot in my project. What I'm talking about is document.frames[x] and document.images[x], but with other elements, like document.b[x] or document.a[x]. Seeing as document.images isn't the same as the <img> tag, it seems like if there are more they'd be named differently as well. Would anyone happen to know what it's called when using this method and/or have a list of accepted tags? Thanks.
P.S. Please do not suggest using a library such as jQuery. This project is meant to be a learning experience, so I want to use regular JavaScript.
As mentioned elsewhere in the answers, this doesn't have anything to do with JavaScript really, these are DOM properties and methods accessible via the JavaScript language binding for the DOM.
With reference to addressing elements such as document.frames[x] (note that this is incorrect, it should be window.frames[x]) and document.images[x] - these are Document Object/HTML Collections and the W3C standard includes only images, applets, links, forms and anchors.
So unless I'm looking in completely the wrong place, from what I can tell from the DOM-1 and DOM-2 specs, there doesn't seem to any way of arbitrarily addressing elements by tag name the way that you remember doing.
Update
The MDC entry on HTMLCollection is more understandable; it reads
The following lists each item (and its specific properties) which return an HTMLCollection: Document (images, applets, links, forms, anchors); form (elements); map (areas); table (rows, tBodies); tableSection (rows); row (cells)
Other than other JavaScript libraries creating these shorthands, I am not aware of any that are built into the language. It would be trivial to map this to your own shorthand:
var $ = document.getElementsByTagName;
// you can then use it like so:
$('SPAN').// and so on
Other than this, there is no built-in array-like access to all of the tags in the document:
http://www.javascriptkit.com/jsref/document.shtml
Create your own reference,
document.tag = document.getElementsByTagName;
or a wrapper,
function tag(name) {
return document.getElementsByTagName(name);
}
The only APIs I know of that support querying by element name are,
DOM
getElementsByTagName
CSS Selectors
querySelectorAll
XPath
evaluate
E4X
(mozilla only, and doesn't work with the DOM yet)
Following up on my question about jQuery.get() I was wondering if there is a list of DOM properties and methods that aren't available in jQuery that can only be accessible if you were working with the raw DOM object (i.e. $("#someID").get().scrollHeight; )
I haven't encountered a list but if one existed it would probably be quite lengthy. In addition to browser-specific (proprietary) properties there's a bunch of other less useful properties and methods not currently abstracted by jQuery. But then, I don't really see this as a problem, or even a valid point of discussion because jQuery IS JavaScript; if you need access to something beyond what jQuery provides then you can use get() or access a specified element within one of your "jQuery collections" like an array:
jQuery(elem)[0].someDOMProperty;
Plus jQuery provides absolutely no support for non-element nodes within the DOM. If, for whatever reason, you need direct access to comment nodes, text nodes etc. then you'll need to use the "raw" DOM.
I don't know of a compiled list of DOM operations/properties that are NOT available in jQuery (and a quick google search didn't turn anything up), but if you go to http://api.jquery.com/ you can see the entire API, and even download it as an Adobe AIR app in case you don't have internet when you need it.
No. JQuery is just JavaScript. If you can do it in JavaScript, you can do it in jQuery. Some properties and methods are overwritten in the context of a jQuery object and that's where you would want to us the get() method--to 'get' (i.e. access) the standard property/method.
That's really as complicated as it is.
Every attribute of every element is accessible through the attr() function. If you could do a document.getElementById() on that element and then access a property, you can also do it using the attr() function. However, some properties are accessed more easily in other ways when using jquery. For example, to see if an element is hidden or visible, you could do:
var isVisible=$("#el").is(":visible");
instead of using the attr() method. Similarly, you can find the selectedIndex of dropdowns and the text of the selected option, in easier ways than using the attr() method. This pdf outlines some of these easier approaches.
To access a css property, you are better off doing:
var fontWeight=$("#el").css("fontWeight");
rather than using get() or attr(). You can also set the css properties in this way, e.g:
$("#el").css("fontWeight","bold");
I could be wrong, but I think you can access any properties via the attr method.