Javascript - HTML DOM basics

1.HTML DOM is, and what it does:

  w3c DOM have for a number of explanations and definitions, with their understanding of words is: HTML DOM is a standard html object model allows JavaScript to operate (to acquire, modify, delete, add,) HTML object.

How to get 2.DOM HTML elements?

  There are many ways to access the HTML element in the DOM:

  1.DOM node:

    (Visit his son, sibling nodes in the DOM Core)

    node.parentNode access parent

    node.childNodes access to all child nodes

    node.firstChild access the first child node

    node.lastChild visit last child

    Node.nextSibling access the next sibling node

    On node.previousSibling access a sibling

    (Streamlining by the core DOM HTML DOM access parent-child, sibling)

    element.parentElement access parent element

    element.childern access to all sub-elements

    element.firstElementChild access the first child

    element.lastElementChild access the last child

    Under element.nextElementChild access a child element

    A sub-element on element.perviousElementChild access

  The difference between the two is that core DOM access is whether parent-child or sibling will be spaces, line breaks as this will cause inconvenience to the node use, and streamlined access to HTML DOM elements only in HTML.

  2.DOM method

    the getElementById (id attribute value) returns the id of the element with

    getElementsByTagName (tag name) Returns the tag name of all the elements stored in the form of an array

    getElementsByClassName (class attribute values) Returns the name of the given class is stored in all the elements of an array

    getElementsByName (name attribute value)

  3.css selector

    Document .querySelectorAll ( "") acquired by the selector element returns an array

    Document .querySelector ( "") acquired by the selector element a return element

How 3.DOM modify the content of HTML elements, attributes, style

  1. modify its contents (element represents an element)

    For dual Tags: element.innerHTML = "......"

    For a single label: element.value = "......"

  2. Modify its properties

    element.class = "" Modify class attribute

    element.href = "" href attribute to modify hyperlinks

  3. modify its style

    element.style.fontSize = "16px" Change font size

How to add HTML elements 4.DOM

  1. Adding

    element.appendChild (elem) is added to a child element of the parent element element elem

  2. Insert

    element.insertBefore (elem, oldElem) elem insert a forward element of the parent element oldElem

  3. Replace

    element.replaceChild (elem, oldElem) element of the parent element is replaced oldElem element elem

5.DOM how to remove HTML elements

  elem child nodes parentNode.removeChild (elem) delete the parent node

  

  

 

Guess you like

Origin www.cnblogs.com/blogzzy/p/11374060.html