TypeScript DOM.getAttribute方法代码示例

         fakeAsync(inject([Router, TestComponentBuilder], (router, tcb) => {
           let fixture = tcb.createFakeAsync(RootCmp);
           advance(fixture);

           router.navigateByUrl('/team/22/link(simple)');
           advance(fixture);
           expect(fixture.debugElement.nativeElement).toHaveText('team 22 { link, aux: simple }');

           let native = DOM.querySelector(fixture.debugElement.nativeElement, "a");
           expect(DOM.getAttribute(native, "href")).toEqual("/team/33/simple(aux:simple)");

           router.navigateByUrl('/team/22/link(simple2)');
           advance(fixture);

           expect(DOM.getAttribute(native, "href")).toEqual("/team/33/simple(aux:simple2)");
         })));

 .then((testComponent) => {
   testComponent.detectChanges();
   let anchorElement =
       testComponent.debugElement.query(By.css('a.detail-view')).nativeElement;
   expect(DOM.getAttribute(anchorElement, 'href')).toEqual('detail');
   async.done();
 });

    it('should select by attr name only once if the value is from the DOM', () => {
      matcher.addSelectables(s1 = CssSelector.parse('[some-decor]'), 1);

      var elementSelector = new CssSelector();
      var element = el('<div attr></div>');
      var empty = DOM.getAttribute(element, 'attr');
      elementSelector.addAttribute('some-decor', empty);
      matcher.match(elementSelector, selectableCollector);
      expect(matched).toEqual([s1[0], 1]);
    });

  /**
   * 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));
  }

    it('should clone correctly', () => {
      var el1 = el('<div x="y">a<span>b</span></div>');
      var clone = DOM.clone(el1);

      expect(clone).not.toBe(el1);
      DOM.setAttribute(clone, 'test', '1');
      expect(stringifyElement(clone)).toEqual('<div test="1" x="y">a<span>b</span></div>');
      expect(DOM.getAttribute(el1, 'test')).toBeFalsy();

      var cNodes = DOM.childNodes(clone);
      var firstChild = cNodes[0];
      var secondChild = cNodes[1];
      expect(DOM.parentElement(firstChild)).toBe(clone);
      expect(DOM.nextSibling(firstChild)).toBe(secondChild);
      expect(DOM.isTextNode(firstChild)).toBe(true);

      expect(DOM.parentElement(secondChild)).toBe(clone);
      expect(DOM.nextSibling(secondChild)).toBeFalsy();
      expect(DOM.isElementNode(secondChild)).toBe(true);

    });

  /**
   * 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));
  }

export function getHref(elt) {
  return DOM.getAttribute(elt, 'href');
}