Develop Reference

Using svg.js, how can I access the child nodes of an element?

I am accessing an existing DOM SVG element in my HTML using
svgEle = SVG.adopt(svgDocument.getElementById('svg'));
How can I access child elements of svgEle without adopting them individually?
I have tried
elementById = svgEle.select("#" + id);
and
elementById = svgEle.get(id);

In SVG.js 3.0+ the API changed and you should use .find() or .findOne() methods instead of .select().
See reference here: https://svgjs.dev/docs/3.0/referencing-creating-elements/#using-css-selectors

You use select(<CSS Selector>).
svgEle = SVG.adopt(document.getElementById('svg'))
svgEle.select("#keys")
.stroke('yellow')
SVG.get(<ID>) only works for SVG elements created by SVG.js.
Here is jsfiddle to illustrate: https://jsfiddle.net/dotnetCarpenter/yy2opz8s/2/

How to pass arguments between two windows in html[ Values between parent and child window]

Description :
I am using java script
I cannot retrieve using dom object.

Try out this
At first retrieving value from a parent window
will be using
If you open child using
popupWindow = window.open("my.html",'some name','width=500,height=500');
In Child window:
//This gives DOM value of parent in child window.
window.opener.document.getElementById("your field name in parent window");
//setting value
window.opener['dataitem'] = document.getElementById("your field name in child window").value;
In parent window:
//This gives DOM value of child in parent window.
var some_data = window['dataitem'];
Hope this helps you!!
Thank you ..

targeting the parent window using jQuery

Here is the sample code which I am not able to solve. I did it using javascript, but when I am doing using jQuery, I do not able to target the element.
Script :
var element = window.parent.document.getElementById('iframeOne');
//this is working fine
But i want to do using jQuery. So how can I target the element?

Perhaps you want to do something like this
$('#iframeOne', window.parent.document);
Another way to do it
window.parent.$("#iframeOne");
Another way
$("#iframeOne", top.document);
If you know the name of the parent window, you can also do
$("#iframeOne",opener.document)
Here opener is the name of the window.
Cheers!!

to select element with id within the parent window
$('#iframeOne',window.parent.document);

Use this:
var ele = $('#iframeOne', window.parent.document);
or
var ele = $(window.parent.document).find("#iframeOne");

The jQuery selector syntax for id is to use a # before the id name
in you case it should be $('#iframeOne')
an optional context can also be used like $('#iframeOne, window.parent.document). The default context is document root.

How to "create" HTML elements via Javascript?

Perhaps there's a better way to word my question by saying "Dynamically create DOM elements via Javascript", but I decided to write the simple title in case the latter was wrong. Anyway, is there a way I can "spawn" HTML elements via Javascript? For example, I can click a button on my site, and a paragraph will appear?

You can use createElement() like this:
var el = docment.createElement("elementtype");
This will create any element, if you replace elementtype with the type of element ("div", "p", etc.)
After that, you can use the native .appendChild() or .insertBefore() methods on whichever element you want to attach this new created element onto.
var attachTo = document.getElementById('appendToMe');
attachTo.appendChild(el);
And it'll be on the page after the last element inside of that element.
References:
https://developer.mozilla.org/en-US/docs/Web/API/document.createElement
https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild
https://developer.mozilla.org/en-US/docs/Web/API/Node.insertBefore

var element = document.createElement('p');
element.innerHTML = "Hey, this is a new paragraph!";
parentElement.appendChild(element);
For more information, refer to document.createElement and Node.appendChild

how to find the class name of 'deepest' div in javascript/jquery?

I am aware that e.target contains the info of the element just below the cursor, but what if I want to know the class name of the div which has a table>tr>td>button in it and I'm clicking that button inside that td. I know this events bubbles up and there should be a way to find out if the div exists in that bubbling levels. Any help.
Scenario: button is inside a modal window. How do I find the modal windows class name on click of the button inside it.

Use .closest() to traverse up the DOM to the nearest match:
var parentDiv = $(yourButton).closest('div');
Or in the button's click:
$(yourButton).click(function() {
var nearestParentDiv = $(this).closest('div');
// And read its class
console.log(nearestParentDiv.attr('class'));
});
The selector .closest() accepts can of course be more specific than this, so if if the modal window <div> has some known class but you need to inspect its other classes, you should use the more specific selector.

Yes as you say the event will bubble up to your div, so just make the div handle the event with .on() , like this:
$('#yourdiv').on('click',':button',function(e) {
alert( $(e.delegateTarget).attr('class') );//alerts the classes of #yourdiv
alert( $(this).attr('id'));//alerts the id of the clicked button (if have one)
});
UPDATE:
Fixed obtaining the reference to the original div where the event was attached. With event.delegateTarget from the Event object . Thanks Cristophe and Kevin B. for spotting the error.
See working demo

You can use .parent() to get the parent div attributes like id: http://jsbin.com/ololad/1/edit
$('button').click(function(){
console.log($(this).parent().attr('id'));
});