TypeScript DOM.appendChild方法代码示例

 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');
 });

 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;
 },

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

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

 TimerWrapper.setTimeout(() => {
   var finishedDiv = DOM.createElement('div');
   finishedDiv.id = 'done';
   DOM.setInnerHTML(finishedDiv, 'Finished');
   DOM.appendChild(document.body, finishedDiv);
 }, 0);

export function parseDocument(documentHtml: string): Object {
  if (!documentHtml) {
    throw new Error('parseDocument requires a document string');
  }
  if (typeof documentHtml !== 'string') {
    throw new Error('parseDocument needs to be a string to be parsed correctly');
  }
  const doc = parser.parse(documentHtml);
  let rootNode;
  let bodyNode;
  let headNode;
  let titleNode;

  for (let i = 0; i < doc.children.length; ++i) {
    const child = doc.children[i];

    if (isTag('html', child)) {
      rootNode = child;
      break;
    }
  }

  if (!rootNode) {
    rootNode = doc;
  }

  for (let i = 0; i < rootNode.children.length; ++i) {
    const child = rootNode.children[i];

    if (isTag('head', child)) {
      headNode = child;
    }

    if (isTag('body', child)) {
      bodyNode = child;
    }
  }

  if (!headNode) {
    headNode = treeAdapter.createElement('head', null, []);
    DOM.appendChild(doc, headNode);
  }

  if (!bodyNode) {
    bodyNode = treeAdapter.createElement('body', null, []);
    DOM.appendChild(doc, bodyNode);
  }

  for (let i = 0; i < headNode.children.length; ++i) {
    if (isTag('title', headNode.children[i])) {
      titleNode = headNode.children[i];
      break;
    }
  }

  if (!titleNode) {
    titleNode = treeAdapter.createElement('title', null, []);
    DOM.appendChild(headNode, titleNode);
  }

  doc._window = {};
  doc.head = headNode;
  doc.body = bodyNode;

  const titleNodeText = titleNode.children[0];

  Object.defineProperty(doc, 'title', {
    get: () => titleNodeText.data,
    set: (newTitle) => titleNodeText.data = newTitle
  });

  return doc;
}