I got this issue working with TypeScript (for Angular2) when I try to get the id of an element. See this example:

<div id="search">
    <div id="field1"></div>
    <div id="field2"></div>
</div>

If I try to get the id of one of the nested div, I can do this normally:

var element = document.getElementById("search");
var subelement = element.childNodes;
subelement[1].id;

Then I will have "field2".

However when I try to do this with TypeScript I got the message Property 'id' does not exist on type 'Node'. And as result my code doesn't work. I really need a solution for this since I need to know the nested elements inside another, unless there are a better way.

I got this issue working with TypeScript (for Angular2) when I try to get the id of an element. See this example:

<div id="search">
    <div id="field1"></div>
    <div id="field2"></div>
</div>

If I try to get the id of one of the nested div, I can do this normally:

var element = document.getElementById("search");
var subelement = element.childNodes;
subelement[1].id;

Then I will have "field2".

However when I try to do this with TypeScript I got the message Property 'id' does not exist on type 'Node'. And as result my code doesn't work. I really need a solution for this since I need to know the nested elements inside another, unless there are a better way.

• javascript
• typescript
• angular

• Why don't you post the TypeScript code that didn't work as well – David L Commented Jul 7, 2016 at 16:20
• @DavidL is the same code, the only extra thing I used was a cast var element= <HTMLElement> document.getElementById("search"); but it doesn't make any difference – KESO Commented Jul 7, 2016 at 16:22
• this is similar to: stackoverflow./questions/38234810/… – Nitzan Tomer Commented Jul 7, 2016 at 16:53

3 Answers 3

Nodes can be more than just elements and don't necessarily have an id property. You should use .children which is a collection of elements only.

error TS2551: Property 'setAttribute' does not exist on type 'Node'. Did you mean 'attributes'?

const elements = document.querySelectorAll("text");

elements[k].style.transform = '...........';////error

elements[k]['style'].transform = '..........';//is working

elements[k].parentNode.setAttribute('....');////error

elements[k].parentNode['setAttribute']('..');//is working

I would use document.getElementById to reference a DOM element in Angular2 but rather leverages @ViewChild like this:

@Component({
  (...)
  template: `
    <div #search>
      <div id="field1"></div>
      <div id="field2"></div>
    </div>
  `
})
export class SomeComponent {
  @ViewChild('search') searchElement:ElementRef;

  ngAfterViewInit() {
    let domElement = searchElement.nativeElement;
    (...)
  }
}