TypeScript DOM.createElement方法代码示例

 it('should be able to create text nodes and use them with the other APIs', () => {
   var t = DOM.createTextNode('hello');
   expect(DOM.isTextNode(t)).toBe(true);
   var d = DOM.createElement('div');
   DOM.appendChild(d, t);
   expect(DOM.getInnerHTML(d)).toEqual('hello');
 });

 constructor() {
   super("");
   // compute the root url to pass to AppRootUrl
   var a = DOM.createElement('a');
   DOM.resolveAndSetHref(a, './', null);
   this.value = DOM.getHref(a);
 }

 useFactory: (appComponentType, directiveResolver) => {
   // TODO(gdi2290): determine a better for document on the server
   let selector = directiveResolver.resolve(appComponentType).selector;
   let serverDocument = DOM.createHtmlDocument();
   let el = DOM.createElement(selector);
   DOM.appendChild(serverDocument.body, el);
   return serverDocument;
 },

 protected meta (name: string): HTMLElement {
     let meta: HTMLElement;
     meta = DOM.query(`meta[${this.attribute}=${name}]`);
     if (meta === null) {
         meta = DOM.createElement('meta');
         meta.setAttribute(this.attribute, name);
         this.head.appendChild(meta);
     }
     return meta;
 }

 /**
  * get the HTML Element when it is in the markup, or create it.
  * @param name
  * @returns {HTMLElement}
  */
 private getOrCreateMetaElement(name: string): HTMLElement {
     let el: HTMLElement;
     el = DOM.query('meta[name=' + name + ']');
     if (el === null) {
         el = DOM.createElement('meta');
         el.setAttribute('name', name);
         this.headElement.appendChild(el);
     }
     return el;
 }

  /**
   * Apply an ink ripple to an element at the given position.
   *
   * @param element The element to apply a ripple to
   * @param x The x position inside the element for the ripple to originate from
   * @param y The y position inside the element for the ripple to originate from
   * @returns {Promise<any>} A promise that resolves when the ripple has faded
   */
  static ripple(element: HTMLElement, x: number, y: number): Promise<any> {
    let fit: boolean = isPresent(DOM.getAttribute(element, 'md-fab'));

    let container = DOM.createElement('div');
    DOM.addClass(container, 'md-ripple-container');

    let ripple = DOM.createElement('div');
    DOM.addClass(ripple, 'md-ripple');
    DOM.appendChild(container, ripple);

    DOM.appendChild(element, container);

    let getHostSize = () => {
      let elX = element.offsetWidth;
      let elY = element.offsetHeight;
      return Ink.getSize(fit, elX, elY);
    };
    let getInitialStyles = (): any => {
      let size = getHostSize();
      let color = DOM.getComputedStyle(element).color || 'rgb(0,0,0)';
      return {
        'background-color': color,
        left: `${x - size / 2}px`,
        top: `${y - size / 2}px`,
        width: `${size}px`,
        height: `${size}px`,
        opacity: 0.2,
        transform: 'scale(0.01)'
      };
    };

    return Animate.setStyles(ripple, getInitialStyles())
      .then(() => Animate.animateStyles(ripple, {
        left: '50%',
        top: '50%',
        opacity: 0.1,
        transform: 'translate(-50%, -50%) scale(1)'
      }, 450))
      .then(() => Animate.animateStyles(ripple, {opacity: 0}, 650))
      .then(() => DOM.removeChild(element, container));
  }

  /**
   * Apply an ink ripple to an element at the given position.
   *
   * @param element The element to apply a ripple to
   * @param left The x position inside the element for the ripple to originate from
   * @param top The y position inside the element for the ripple to originate from
   * @returns {Promise<any>} A promise that resolves when the ripple has faded
   */
  static ripple(element: HTMLElement, left: number, top: number): Promise<any> {
    let fit: boolean = isPresent(DOM.getAttribute(element, 'md-fab'));

    let container = DOM.querySelector(element, '.md-ripple-container');
    if (!container) {
      container = DOM.createElement('div');
      DOM.addClass(container, 'md-ripple-container');
      DOM.appendChild(element, container);
    }

    let ripple = DOM.createElement('div');
    DOM.addClass(ripple, 'md-ripple');

    let getInitialStyles = (): any => {
      let color = DOM.getComputedStyle(element).color || 'rgb(0,0,0)';
      let size = Ink.getSize(fit, element.clientWidth, element.clientHeight);
      return {
        'background-color': color,
        left: `${left}px`,
        top: `${top}px`,
        width: `${size}px`,
        height: `${size}px`
      };
    };

    return Animate.setStyles(ripple, getInitialStyles())
      .then(() => DOM.appendChild(container, ripple))
      .then(() => DOM.addClass(ripple, 'md-ripple-placed'))
      .then(() => Animate.wait())
      .then(() => DOM.addClass(ripple, 'md-ripple-scaled'))
      .then(() => DOM.addClass(ripple, 'md-ripple-active'))
      .then(() => Animate.wait(450))
      .then(() => DOM.removeClass(ripple, 'md-ripple-active'))
      .then(() => Animate.wait(650))
      .then(() => DOM.removeChild(container, ripple));
  }

    it('should bootstrap a simple app', inject([AsyncTestCompleter], (async) => {
         var fakeDoc = DOM.createHtmlDocument();
         var el = DOM.createElement('app-cmp', fakeDoc);
         DOM.appendChild(fakeDoc.body, el);

         bootstrap(AppCmp, [
           ROUTER_PROVIDERS, provide(ROUTER_PRIMARY_COMPONENT, {useValue: AppCmp}),
           provide(LocationStrategy, {useClass: MockLocationStrategy}),
           provide(DOCUMENT, {useValue: fakeDoc}), provide(Console, {useClass: DummyConsole})
         ]).then((applicationRef) => {
           var router = applicationRef.hostComponent.router;
           router.subscribe((_) => {
             expect(el).toHaveText('outer { hello }');
             expect(applicationRef.hostComponent.location.path()).toEqual('');
             async.done();
           });
         });
       }));