I was working on a page and noticed they had an element bound to document (ex. document.formNameId). I was thinking it must be the JavaScript and not being able to find a place where it was set, I removed all the JavaScript on the page. I still found the element name set on the document.
After playing with it, it seems form elements that have a name attribute set are added to document. Are there any other elements that are by default bound like that?
EDIT:
Upon further inspection, you can even find elements inside that form element by the same API.
So if I do something like this to get an input element: document.formName.inputName
Check this example out.
Yes, these are called (in HTML5) Named Properties
The description in the spec says:
The Document interface supports named properties. The supported
property names at any moment consist of the values of the name content
attributes of all the applet, exposed embed, form, iframe, img, and
exposed object elements in the Document that have non-empty name
content attributes, and the values of the id content attributes of all
the applet and exposed object elements in the Document that have
non-empty id content attributes, and the values of the id content
attributes of all the img elements in the Document that have both
non-empty name content attributes and non-empty id content attributes.
The supported property names must be in tree order, ignoring later
duplicates, with values from id attributes coming before values from
name attributes when the same element contributes both.
So these happens for a number of elements. There is also a description at the above link of how the values of such properties are determined, including how for forms, it becomes the list of controls on the form.
https://developer.mozilla.org/en-US/docs/Web/API/document has a good overview over all properties and methods of the document object.
[obsolete: document.formNameId is missing there and I could not find it on this website, so it seems it is not a default property but was added by a script (a quick google search for "document.formnameid" lists only this stackoverflow question).]
Related
In lit-element, in most of the cases passing data from parent-component to child-component via attributes and via properties result in the same thing.
I wonder in which case I should use attributes while which case properties?
The difference between attributes and properties is that attributes are expressed in the DOM, while properties are not. The element can decide to reflect the properties back to attributes, but that is somewhat orthogonal. Example:
<my-button raised></my-button>
Here, raised is a boolean attribute, and it is convenient to pass data that way because you can do it declaratively in the DOM. <my-button>'s implementation does not have to know whether the attribute or the property was used to pass this data, because attributes get converted to properties automatically (if a property with a matching name was declared).
The following works as well (lit-element specific), but assigns the property directly.
<my-button .raised=true></my-button>
The implementation of my-button can decide if changes to the property get reflected back to the attribute. This is useful if you want to use the attribute, for example, in CSS for styling.
Generally, however, you just assign properties and let the custom element decide whether the property gets reflected back to the attribute. Say you want to control the button programmatically, you would just assign the property
this.button_.raised = true;
instead of writing
this.button_.setAttribute('raised', true);
Note, this always works with custom elements and even a few native elements (e.g., input's value is a property, too). But you can't write:
this.myDiv_.id = 'container';
because <div>s don't have properties, and you have to use setAttribute().
HTML 5 introduced the output element, which has a for attribute defined as follows:
The for content attribute allows an explicit relationship to be made between the result of a calculation and the elements that represent the values that went into the calculation or that otherwise influenced the calculation. The for attribute, if specified, must contain a string consisting of an unordered set of unique space-separated tokens that are case-sensitive, each of which must have the value of an ID of an element in the same Document.
Are there any browsers or applications which use the value of this element, and if so for what? It's a neat idea but I'm not sure how it actually plays out.
I need to find a way to implement the concept of "scoped IDs" in HTML/XML.
I know that the id attribute of an element must hold a unique value for the entire document, but I'm wondering if there's a workaround ('hack', 'cheat', whatever) that I can do to create scoped IDs. That is, for any particular sectioning/containing element, IDs would be unique, but outside of the container, those IDs would be hidden and couldn't be referenced. With nested sections, inner sections will still be able to access their parent section's element's IDs but not the other way around.
I thought about using <iframe>s, but those are just icky.
Maybe there's a solution using JavaScript/jQuery?
Not possible.
This is exactly what classes are for though. Give unique IDs to each "section" or container element and then use classes for the common descendant elements you wanted to use recurring IDs for, then target them with #unique-container .common-element selectors.
I find it hard to imagine a situation in which you would want to do what you described anyway. You are basically just asking if you can use IDs as classes, but that's why classes exist in the first place.
I suppose you could make some kind of psuedo-scoped-ID by adding custom HTML5 attributes to the elements and processing them / doing whatever you want to do with them in Javascript but again without any context as to why you want to do this it's hard to really recommend anything here.
I want to access an element using a DOM hierarchy Node structure, through its parent nodes.I am trying to find the DOM hierarchy through firebug; want something like, <parent_node1>.<child_node1>.<child_node2> (not by document.getElementByID, getElementbyname) to access an element.
I want to automate a scenario like, I have column headers and corresponding values. Want to test, whether the values present under each column header, is correct...
I am thinking of using DOM as a method of automating this case...But, how can I find the DOM hierarchy...?
What I see through Inspect Element in Firebug is something like, list of events, elements and is not looking like a hierarchy node structure...Can somebody help in this regard please?
As discussed, you probably mean the DOM Element properties like element.childNodes, element.firstChild or similar.
Have a look at the DOM Element property reference over at JavaScriptKit, you'll get a good overview there how to access the hierarchy.
var currentTD = document.getElementsByTagName("td")[0];
var currentTable = document.getElementsByTagName("table")[0];
currentTD.parentNode // contains the TR element the TD resides in.
currentTable.childNodes // contains THEAD TBODY and TFOOT if present.
DOM Tables even have more properties like a rows collection and a cells collection.
A reminder of caution: Beware that these collections are live collections, so iterating over them and accessing collection.length in each iteration can be really slow because to get the length, the DOM has to be queried each time.
document.getElementById and document.getElementByTagname are using the DOM. They take an object within the DOM (specifically the document object, though you can also call both of those on elements) and return an object which is a single element or a collection of zero or more elements, respectively. That's a DOM operation. From there you can do other DOM operations on the results like getting children, parents or siblings, changing values etc.
All DOM operations come down to:
Take a starting point. This is often document though it's so often that the first thing we do is call document.getElementById or document.getElementByTagname and then work from the result that we could really consider that the starting point.
Find the element or elements we are interested in, relative to the starting point whether through startingPoint.getElementById* or startingPoing.getElementByTagname perhaps combined with some test (e.g. only working on those with a particular classname, if they have children of particular types, etc.
Read and/or change certain values, add new child nodes and/or delete nodes.
In a case like yours the starting point will be one or more tables found by document.getElementById(someID), document.getElementById(someID).getElementsByTagname('table')[0], or similar. From that table, myTable.getElementsByTagname('th') will get you the column headings. Depending on the structure, and what you are doing with it, you could just select corresponding elements from myTable.getElementsByTagname('td') or go through each row and then work on curRow.getElementsByTagname('td').
You could also just use firstChild, childNodes etc. though it's normally more convenient to have elements you don't care about filtered out by tagname.
*Since there can only be one element with a given id in a document, this will return the same if called on any element higher in the document hierarchy, so we normally just call this on document. It can be useful to call it on an element if we want to do something if the element is a descendant of our current element, and not otherwise.
I created a method and pass the element type, id, and any inner text that instantiates a new html element. The last statement: Me.Controls.Add(element) adds it to the end of the page, but I would like it to be inserted in a specific position (between 2 divs within a form). What I am describing is very similar to this post on SO here, although it was for javascript.
Perhaps look at using a PlaceHolder control..