Assign a variable for nested element

Question

How do I assign a variable for the svg inside the div with an ID of parent1 in javascript?

structure

<div id="parent1">
   <svg.....></svg>
</div>

js

var target = document.getElementById("parent1").svg;

Answer 1

这应该工作：

var target = document.querySelector('#parent1 svg');

Answer 2

You can use document.querySelector to find elements by CSS selector .

For an svg element inside of an element with id parent1 , it would be

var target = document.querySelector('#parent1 svg');

Answer 3

As shown in the comments, there is a few answers to this.

1. you can query an element for children, grandchildren, etc.

var target = document.getElementById("parent1").querySelector('svg')

2. grabs first svg under the #parent in the heirarchy (melpomene's answer)

var target = document.querySelector('#parent1 svg');

3. grabs only a direct child svg in #parent (j08691's answer)

var target = document.querySelector('#parent1 > svg')