Home > front end >  Document object model (dom)
Document object model (dom)

Time:09-21

The DOM, the full name of the Document Object Model Document Object Model (DOM), through the DOM in JS to manipulate HTMl Document, as long as the understanding of DOM can follow one's inclinations of the WEB page operation,
Documents: the document representation is the whole HTML page document,
Object: the object representation transform every parts of the web pages are to an object,
Model: object model to represent the relationship between, so we facilitate access to objects,
Node, the Node, is a the most basic part of our web page for each of the parts can be called is a Node, such as: HTML tags and attributes, text, notes, the entire document is a Node, although is a Node, but in fact their exact type is different,
Common node is divided into four categories: document node: the entire HTML document, (document, document node represents the entire HTML document, all the nodes in a web page are all its child nodes) element node: HTML tags in HTML documents, (in the HTML tags are element node, this is also our one of the most common nodes) attribute node: the attribute of the element, (text node represents outside the text content of HTML tags, arbitrary HTML text is a text node) text nodes: HTML tags in the text, (attribute node represents the label of a property, to note here is that an attribute node is not the child nodes of the element nodes, but part of the element node)

GeElementById methods:
Var BTN=document. GetElementById (" BTN ") from the HTML//get BTN
BTN. Onclick=function () {//add click event to BTN
Alert (" hello world ");//popup window
}
Besides getElementById method and getElementsByTagName () through the tag name for a group of element node object, getElementsByName () with the node object name attribute for a set of elements, getElementsByClassName () by the class name for a group of element node object,
Element clientHeight, element clientWidth this two attributes of elements can be gained visibility and height, these attributes are without px, the returned is a number, can be directly calculated, can obtain the height and width of the element, including content area and padding, these properties are read-only and cannot be modified,
Element. The corresponding to the current element offsetLeft positioning element horizontal offset element. The corresponding to the current element offsetTop positioning elements vertical offset
  • Related