I am trying to find the css path and the situation is like this:
there are more than 20 child nodes, and i have to select every node which has fill not equal to none.
I know i can select a particular node using :nth-child(1) and select the node not having fill equal to none with :not([fill=none])
but how am i suppose to iterate through all the nodes which have fill not equal to none.
I have tried this:
div[nth-child(:not[fill=none]))
How about:
div:not([fill=none])
Related
https://github.com/nintyfan/V2BlankBrowser
In file main. See at v1UI_integration branch and init_v1_ui and real_new_tab code. I known, there is big amount of code, so I do not paste it here.
Problem is, when trying to add more than two children to GtkOverlay, one of it always get at index 0 and I cannot reorder it with gtk_overlay_reorder_overlay. I try with different approach by use three overlays (one root and two children) and it worked, but problem was I cannot interact with items, even when setting gtk_overlay_set_overlay_pass_through to children. What i do wrong?
I have a recursive function that creates divs inside divs on demand by the user, but I've stumbled on a problem where I need to separate those divs as in a specific manner, similar to "layers".
Example:
I have created a div, firstborn - and inside it, the user created another div (lets call this one child div). Inside this secondary div, the user created yet another div (and this one grandchild div) - I need to know the number of child divs of the firstborn div, and the number of child divs that the child div has (grandchild divs)
I've stumbled upon this issue because the way I was trying to get them was by:
numberOfFirstbornDivs = document.getElementsByClassName("firstBornDiv").length
numberOfChildrenDivs = document.getElementsByClassName("recursivelyCreatedDiv")[index].getElementsByClassName("recursivelyCreatedDiv").length
What I wanted was the number of divs named "recursivelyCreatedDiv" only under the first "layer", but instead, I get the number of divs from all subsequent "layers" (in the given example I wanted to have:
numberOfFirstbornDivs = 1 and
numberOfChildrenDivs = 1,
but instead I get:
numberOfFirstbornDivs = 1 and
numberOfChildrenDivs = 2).
I understand this happens because I name my divs by the same ClassName, but I don't know how to workaround this as they are created recursively (and on demand by the user).
To only select direct childs of an element you can use the '>' css selector instead of getting elements by class name.
For example, .firstBornDiv > .recursivelyCreatedDiv will target all elements with the recursivelyCreatedDiv class that are direct children of a div with the firstBornDiv class
Edit 1: To be more precise, you can use the querySelectorAll() method with any css selector to get the array of elements targeted by your selector which is what you would need with this answer.
I have a webpage with three <input> elements that all have the same name attribute. Ideally, I would like to select the second of these elements except sometimes there is only one element on the page and I want to instead select that element.
Ideally I would like something like (pseudo-code since max doesn't exist)
(//input[#name='myname'])[max(1, last()-1)]
I thought that maybe I could do something like the following except it yields all three elements
(//input[#name='myname'])[last()-1 or 1]
What is the best way to accomplish this using XPath?
Maybe grab both and then only the last one.
If there's two or more, it gets the second. If there's only one, it grabs that one.
((//input[#name='myname'])[position()=1 or position()=2])[last()]
Mootools slick selector engine documentation seems kind of sparse / unfriendly.
http://mootools.net/docs/core/Slick/Slick
An example:
Normally i can reach the last child of an element with:
$('wrapper').getLast().setStyle('background-color','green');
how do i utilize the new slick engine to achieve the same?
And where is the documentation?
Should i just learn CSS3 selectors?
In their example they use $$('p.foo !^') to get the last child of p class foo whatever that means. (do they mean the last instance of p.foo in the $$ array or the last child of the last element???)
Here i tried to fiddle a bit, the last two doesn't work:
http://jsfiddle.net/XLVr6/1/
The example bellow will select the last child of the element with id="wrapper. It will only return one element.
$$('#wrapper !^').setStyle('background-color','red');
or better way as only one element is needed, as it is faster:
document.getElement('#wrapper !^').setStyle('background-color','red');
However, if it's written like this where we select the last child of all p-elements on the page with class="wrapper"
$$('p.wrapper !^').setStyle('background-color','red');
Another way to do it is like this, however next example is faster:
('someId').getLast().setStyle('background-color','red');
As pointed out by Dimitar this is a better (faster) way to do it:
document.getElement('#someId :last-child')
As for your fiddle, the two last selectors should be written like this:
$$('#wrapper :last-child').setStyle('background-color','red');
$$('#wrapper !^').setStyle('background-color','red');
Please note the space between "wrapper" and ":last-child", that is because we are selecting the last child of a the child elements of "wrapper".
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.