How to convert a DOM element into a Snap.svg element? - javascript

Is there a way to convert a DOM element into a Snap.svg element without using a selector? How can I do this?
I cannot find a way in the documentation. (http://snapsvg.io/docs/)
I want to fetch the corresponding Snap.svg element once a Jquery event is triggered, but I have no idea how I can do this in a nice way.

Simply
var mySnapElement = Snap( someDomElement );

Related

Is it possible to use getElementByClassName() on element that was created by javascript - Mapbox

Is it possible to use getElementByClassName() to obtain an element that was created by javascript?
Im trying to get the distance from Mapbox (Just using pure js). See the picture =>
Image
Im trying to obtain that h1 element. See the picture =>
H1 Value that created by mapbox javascript
My Code:
<script type="text/javascript">
function myFunction() {
var code = document.getElementsByTagName('h1')[2].innerHTML;
document.getElementById("km").value = code; } </script>
Im trying to get the h1 element's contents with the method above, but it didn't work.
Any solution?
To get the h1 that is a child of the element with classname mapbox-directions-component you can use getElementsByClassName and then chain a getElementsByTagName from that dom location. Note that both selectors return a collection of elements. So if you know it's the first element with that class and first tag that is a child of that element you can use:
document.getElementsByClassName("mapbox-directions-component")[0].getElementsByTagName("h1")[0].innerHTML
However a more direct approach, in my opinion, would be to use querySelector: MDN Document.querySelector()
document.querySelector(".mapbox-directions-component h1").innerHTML

How to define element without ID?

I have an element in CSS. I'm using:
ul.bjqs-controls.v-centered {to add style to it}
But in JS I need to define it and I don't have and Id, the only way to define is ul.bjqs-controls.v-centered.
I'm new in JS.
Should I use getElementById? Or what?
EDIT:
I'm trying to use jquery, but it's first time I use it, I'm trying to change element's (ul.bjqs-controls.v-centered) width to window width on page resize, but it doesn't seem to work :/
$(window).resize(function() {
$("ul.bjqs-controls.v-centered").width()=$(window).width();
});
getElementsByClassName("classname") will return a nodeList. You can loop in it and reach item what you want.
Please have a look at http://api.jquery.com/category/traversing/tree-traversal/
You can find the element by using other identified elements or using classes as people mentioned above.
you can use jquery like below
$(".ul.bjqs-controls.v-centered").html()
like that

How to completely remove the canvas element with Jquery/JavaScript?

I have a canvas object that loads on my page dynamically from a jQuery plugin. It has no wrapper, no id or class associated to it. But I need to remove it after
$(window).resize(function)() {...}
takes place. I have tried using jQuery's
...next().remove();
technique, so that the neighboring div element can remove it from the DOM, but I am getting issues. specifically, additional elements on my page are also getting removed. Is there a healthy way to about this?
Thanks!
If you are not using multiple canvas elements, simply
$('canvas').remove();
Will remove all matched elements on the page. http://jsfiddle.net/vj6NP/
If you do have multiple canvas on the page and would like to remove only one, you could select which one to remove using nth-of-type.
For example to remove the first instance http://jsfiddle.net/vj6NP/3/: -
$('canvas:nth-of-type(1)').remove();
How many canvas elements do you have on the page? If there is only one; and you don't plan to ever add any in the future it might be simplest just to do
var dynamic_canvas = $('canvas');
if(dynamic_canvas) dynamic_canvas.remove();
The easiest way is to keep a reference to the canvas element added to the document then remove it using JQuery:
this.canvas = document.createElement('canvas');
//later...
$(this.canvas).remove();

jQuery: Finding the number of attributes an element has

Suppose I have the xml element
<fruit color="blue" taste="sweet" shape="round"></fruit>
Without jQuery, I could use
fruit.attributes.length
How do I do this with jQuery?
Using jQuery, you'd simply retrieve the DOM element using get(index) or [index] from the jQuery object:
$('someSelector').get(0).attributes.length;
$('someSelector')[0].attributes.length;
jQuery does not provide a wrapper around this native DOMElement property.
I don't think jQuery has a way of doing that. You can do it without jQuery.
$('fruit')[0].attributes.length

How to move HTML element

How to move HTML element to another element. Note that, I don't mean moving element's position. Consider this HTML code:
<div id="target"></div>
<span id="to_be_moved"></span>
I want to move "to_be_moved" to "target" so "target" has child "to_be_moved" now. So the result should be like this:
<div id="target"><span id="to_be_moved"></span></div>
I've searched in google (especially using prototype framework) but all I've got is moving position, not as I want. Thanks before.
document.getElementById('target').appendChild( document.getElementById('to_be_moved') )
Assuming you're working with native DOM elements, the Javascript method .appendChild will suit your needs.
In native Javascript, document.getElementByID is probably your best bet in getting the DOM element, so...
var target = document.getElementById('target')
document.getElementById('to_be_moved').appendChild(target)

Categories