I want to get a reference to a DOM element and click on it but I don't know how to spot it.
In DOM will be like:
$('.filter-buttons :nth-child(2)').get(0).click() , or using [0]instead of get(0)
But with Nightmare function click accepts only one parameter .click(selector)
.click('.filter-buttons :nth-child(2)')
. The question is that I don't know where to put the get(0). Any ideas?
As it has mentioned .get(0) lets you find a dom node and you are applying a dom click event. so i suggest you to use document.querySelector() method:
.click(document.querySelector('.filter-buttons :nth-child(2)'))
document.querySelector():
This method just returns a single dom node. which exactly is your requirement.
from the docs:
Returns the first element within the document (using depth-first pre-order traversal of the document's nodes|by first element in document markup and iterating through sequential nodes by order of amount of child nodes) that matches the specified group of selectors.
Example
In this example, the first element in the document with the class "myclass" is returned:
var el = document.querySelector(".myclass");
Related
Why isn't getElementById() part of a DOM element when at the same time it is a part of a DOM document, keeping in mind that document stands higher in a hierarchy than an element. How exactly is getElementById() implemented in machine code of browsers?
?
id values must be unique in the document, so there's very little need to look for an element by id within another element. Just look for it on the document.
In the rare case you need to look for an element by id only within another element's descendants, you can use querySelector with an ID selector:
const e = someElement.querySelector("#the-id");
...but again, it's a rare use case that likely suggests that ids are being misused.
I am learning JavaScript from the MDN web docs. I was studying Element.querySelector() method.
It is written that it returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.
But there is an example given, which contradicts this fact.
var baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
(baseElement.querySelector("div span").innerHTML);
<div>
<h5>Original content</h5>
<p>
inside paragraph
<span>inside span</span>
inside paragraph
</p>
</div>
<div>
<h5>Output</h5>
<div id="output"></div>
</div>
Here, div tag is not a descendant of p tag, still this code works.
Can you point where I am going wrong ?
Element.querySelector() first applies the CSS Selectors passed to .querySelector() method, on the whole document and not the base element on which .querySelector() was invoked. This is done to generate initial set of potential elements.
After generating initial set of potential elements, list of potential elements is then filtered to retain only those elements which are descendants of the base element. Finally, the first element from this filtered list is returned.
In your code example, entire document is first searched for elements that match div span. As there is only one element in the entire document that matches div span selector, initial set of potential elements contains only one span element. After that, this span element is checked to see if it is the descendant of baseElement. Since, in this case, it is a descendant of
the baseElement, it is returned.
What i explained above is written under "Return Value" heading in MDN - Element.querySelector()
The entire hierarchy of elements is
considered when matching, including those outside the set of elements
including baseElement and its descendants; in other words, selectors
is first applied to the whole document, not the baseElement, to
generate an initial list of potential elements. The resulting elements
are then examined to see if they are descendants of baseElement. The
first match of those remaining elements is returned by the
querySelector() method.
I'm creating a JQuery object(let's call it $dummyHTML) and setting some html content inside it. Then I go through each of it's child nodes including text ones, do some checks, and append them to a new different JQuery Object(let's call it $refinedHTML).
But the problem is that the contents of $dummyHTML seems to be empty even before I append them to $refinedHTML!
Now, I know that JQuery append function doesn't copy a node, it actually transfers the node to the other JQuery object. So I'm guessing the append function triggers before I mean it to?
Here is a minified example of the issue.
var $dummyHTML = $('<div/>');
$dummyHTML.html('Hello there, <span>myself!</span>');
var $refinedHTML = $('<div/>');
console.log($dummyHTML[0]);
$dummyHTML.contents().each(function() {
$refinedHTML.append($(this));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
But if I remove the .contents part the programs works as expected.
.contents() extracts the content of a DOM element .When you create an object on the fly,it is not yet a DOM element so .contents() will not work however you can manipulate the object data in other ways.
Reference here:
Given a jQuery object that represents a set of DOM elements, the .contents() method allows us to search through the immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements.
I have two duplicate pieces of code that I want to work independently. I am therefore using the unique dom number to manipulate each.
I know I can use $("*").index(this) to get the DOM number of the current element, but how would I go about getting the DOM number of a parent (with class called 'test') of the current element?
Thanks for any help.
You can use $(this).parent() to obtain the parent of the current element, so you could replace "this" with the value of this query and would result something like: $("*").index($(this).parent()[0])
I understand that $fn.insertAfter() is used to insert element after the element supplied as the argument. How's $fn.after() different from it?
$.fn.after()help inserts an element after the target element, on which you call it.
$('div').after('<div>new div</div>');
whereas, $.fn.insertAfter inserts the target element after the node you specify:
$('<div>new div</div>').insertAfter($('#someid'));
The latter is mostly prefered, because you keep a reference to the newly created element and can chain more methods on it. So for instance:
$('<div>new div</div>')
.insertAfter($('#someid'))
.attr('foo', 'bar')
.css({
'background-color': 'red'
});
is possible. You cannot do that with .after()help. The same thing is for .append()help / .appendTo()help and .insertBefore()help / .before()help
This is an example of the same thing, the difference is the context of the selector. insertAfter inserts the selected element after the parameter
after inserts the parameter after the selected element.
$('<div id="foo"></div>').insertAfter('#bar');
$('#bar').after('<div id="foo"></div>');
Quoting straight from the documentation:
The .after() and .insertAfter()
methods perform the same task. The
major difference is in the
syntax—specifically, in the placement
of the content and target. With
.after(), the selector expression
preceding the method is the container
after which the content is inserted.
With .insertAfter(), on the other
hand, the content precedes the method,
either as a selector expression or as
markup created on the fly, and it is
inserted after the target container.
This mentions that they perform the same task but have different syntax.