The JavaScript document object model (DOM) summary (DOM)
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
Development tools and key technology: Adobe Dreamweaver JavaScript
Author: Huang Futao
Time to write: on April 27, 2020,
Knowledge points list
1, part of the JavaScript
Complete JS implementation is made of the following three parts: the different ECMAScript, document object model (DOM), the browser object model (BOM),
2, the introduction of DOM
Object of a DOM document object belongs to the host, the host is provided by the operation environment of JS object, is mainly refers to objects provided by the browser
- 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
Operating a WEB page,
The document
- the document representation is the whole HTML pages document
Object
- object representation transform every parts of the web pages are to an object
Model
- use the model to represent the object, the relationship between the object so we facilitate access to
Summary: the document object model (dom), converts HTML pages for each of the parts into an object, then get in JS,
In simple terms: JS and HTML is the language of two different fields, if you want to interact, such as to add or delete check HTML will use the DOM to receive the contents of the HTML document passed, in other words, the HTML DOM is about how to access, modify, add or delete the HTML element standard,
,
3, the Node Node - constitute the most basic unit of the HTML document,
Each part can be called - a web page is a node, although is a node, but in fact their exact type is different,
The classification of the node:
(1) a document node: refers to the entire HTML document
- document, document node represents the entire HTML document, all the nodes in a web page are its child nodes,
- document object attributes of the object as a window, we don't have to get can directly use the
- through which we can look for the node object within the entire document access, and can create all kinds of the node object through the object
(2) the element node: refers to the tag of the HTML document
- labels are in HTML element node, a node, this is also our most commonly used
- all the tags in the browser page will be converted to an element node, we could be obtained by the method of document element nodes,
- such as:
- the document. The getElementById ()
- according to the id attribute value for an element node object,
(3) the text nodes: refers to the tags inside the text
- a text node represents outside the text content of HTML tags, arbitrary HTML text is a text node,
- it can include literal interpretation of plain text content
- a text node is generally as the child nodes of the element node being
- get the text nodes, the general first to get the element node, through the element node for a text node
- for example:
- element node. FirstChild;
- element node for the first child, generally for a text node
(4) an attribute node: refers to the tag attributes such as img for the SRC attribute values
- an attribute node said is an attribute of the tag, to note here is that an attribute node is not the child nodes of the element nodes, but part of the element node
- could be obtained by element node specified attribute node
- for example:
- element node. GetAttributeNode (" attribute name ");
Attention!!!!!! : we don't usually use attribute node,
5. Comment node: refers to the annotation
4, HTML DOM attribute
, nodeName attribute: the name of the node is read-only,
(1). The element node nodeName is the same as the tag name
(2). An attribute node nodeName is the name of the attribute of the
(3). A text node nodeName is always # text
(4). A document node nodeName is always # document
(2), nodeValue properties: the value of the node
(1). Element node nodeValue is undefined or null
(2). A text node nodeValue is text itself
(3). An attribute node nodeValue is the value of the attribute of the
(3) the nodeType property: the type of node, it is read-only, the following several node type:
Element type node type
1
elementProperty 2
Text 3
Note 8
Document 9
(4), gets the child nodes of the element node
Through specific element node called
-.childnodes
- property, said all child nodes of the current node
- firstChild
- property, said the first child node of the current node
- lastChild
- property, said the last child node of the current node
Nodes (5), access to the father and brother
Through specific node called
- parentNode
- property, said the parent node of the current node
- previousSibling
- property, said before a brother of the current node node
- nextSibling
- property, said after a brother of the current node node
6, the attribute of element node
? Access: element object. The property name
Example: value
element.
element. The idElement. The className
? Settings, element object. The property name=new value
Example: element value="https://bbs.csdn.net/topics/hello"
Element. The id="id01
"Element. The className="newClass"
7) other properties
NodeValue
- a text node can nodeValue properties to get and set the contents of a text node
InnerHTML
- element nodes through this property to get and set the tag within the HTML code
5, the HTML DOM methods
(1) the HTML DOM access (access for an HTML element)
Through the document object call
- getElementById () through the id attribute access to an element node object
- the getElementsByTagName () through the tag name for a group of element node object
- getElementsByName () by the name attribute to obtain a set of element node objects
- getElementsByClassName () by the class name for a group of element node object, this method does not support IE8 following version
(2) of the node changes
Modify here we mainly refers to the operation of the element node
? Create a node
- the document. The createElement method (" tag ")
? Delete node
- the parent node. RemoveChild (child nodes)
? Replace the node
- the parent node. The replaceChild (new nodes, the old node)
? Insert the node
- the parent node. The appendChild (child nodes)
- the parent node. The insertBefore (new nodes, the old node)
6, JS, modify or read through the style of the HTML elements (can modify attribute values, also can read the attribute value)
Syntax: elements. Style. (also called style name)=attribute value (also called style value)
Read: elements. Style. The style name
Through the style attribute set and read are inline style
7, using JS reading element current style (read only, cannot be modified)
(1) only supports the attribute of IE browser is not compatible with other (currentStyle properties)
Grammar: elements. CurrentStyle. The property name or elements. CurrentStyle [properties]
Note: currentStyle is the style of the display can be used to read the current element, if the current element is not set the style, the access to its default value, for example, if there is no set width, obtain the value of auto
(2) other browsers can use, Internet explorer does not support method under (getComputedStyle () method)
Parameter description:
1. Need to get the style element
2. A pseudo element can pass the general pass null
Note: this method returns an object, object encapsulates the current element in the style of the corresponding
Var obj=getComputedStyle (element, null);//use of the method shows that
Getting elements display style:
Obj. The property name or obj [" attribute name "]
If the style is not set, may be obtain the real value, rather than the default value,
For example, if there is no set width, access to the value of 1200 px element (actual value)
8, summarizes Element properties and methods
Properties: (1) node
Element. The child nodes in the NodeList.childnodes back element, the
Element. ParentNode returns element's parent,
The name of the element. The nodeName returns element,
Element. The nodeType returns the element node type,
Element. The nodeValue set value or return element,
Nodelist. Length returns the number of nodes in a nodelist,
(2) basic tag
Element. The className sets or returns the class attribute of the element,
Element. The id set or return the id of the element,
Element. The innerHTML sets or returns the contents of the element,
Element. The tagName returns the tag name of element,
Element. The textContent sets or returns the node and its descendants text content,
Element. The title element sets or returns the title attribute,
(3) the width distance
Element. ClientHeight return to highly visible element,
Element. ClientWidth return elements visible width,
The height of the element. OffsetHeight return element,
The width of the element. The offsetWidth return element,
Element. The offsetLeft return element horizontal offset,
Overall height of the element. ScrollHeight return element,
Element. ScrollLeft return element to the distance between the left edge and view,
Element. The scrollTop returns the distance between the edge element with the view,
The overall width of the element. The scrollWidth return element,
Methods: element. The appendChild () to the element, add a new child node as the last child node of
Element. The getAttribute () returns the element node specified attribute values,
nullnullnullnullnullnullnullnullnullnullnullnullnullnullnull
