Самый удобный способ найти элемент в DOM – это получить его по id. Для этого используется вызов document.getElementById(id)
<body> <div id="svgContainer"> <svg id="elm" width="300" height="300"> <circle cx="50" cy="50" r="20" fill="#000"/> <circle cx="100" cy="100" r="60" fill="#336699"/> </svg> </div> <script> window.onload = function() { var root = document.getElementById('elm'); var del = root.getElementsByTagName('circle')[1] root.removeChild(del) }; </script> </body>
Следующий способ - это получить все элементы с определенным тегом, и среди них искать нужный. Для этого служит document.getElementsByTagName(tag). Она возвращает массив из элементов, имеющих такой тег.
<body> <div id="svgContainer"> <svg id="elm" width="300" height="300"> <g> <circle cx="50" cy="50" r="20" fill="#000"/> <circle cx="100" cy="100" r="60" fill="#336699"/> <g> <circle cx="120" cy="30" r="20" fill="#816499"/> </g> </g> <g> <circle cx="30" cy="50" r="20" fill="#000"/> </g> </svg> </div> <script> window.onload = function() { var root = document.getElementById('elm'); var el = root.getElementsByTagName('g')[0].getElementsByTagName('g')[0].getElementsByTagName('circle')[0]; el.setAttribute("fill","#ccc"); }; </script> </body>
Получить всех потомков
elem.getElementsByTagName('*')