TypeScript-类型“节点”上不存在属性“ id”

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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;
    (...)
  }
}