Introduction to DOM:
Description: Dom Document Object Model, the DOM tree is created automatically when a Web page is loaded into a Web browser. It represents the current Web page that is loaded into the browser window, and the DOM tree allows you to quickly locate the elements or nodes in the DOM object.
Note: The following is not specifically for JS, but the DOM core, which is a DOM-enabled programming language can use them, and is not limited to processing Web pages, they can be used to handle any kind of markup language such as XML documents
Node Classification:
ELEMENT node
Description: The label element in the document belongs to the element node, and the only element that is not included in the other element is the <HTML> element, which is the root element node of our node number.
Attribute node
Description: element more or less some attributes, the role of the property is to make a more specific description of the element, the attribute node is always placed in the start tag, so the attribute node is always included in the element node, not all elements contain attributes, but all the attributes are contained in the element
Text node
Description: A text node is always contained inside an element node, but not all element nodes contain a text node
Get node:
| Method name | Method description |
| Body | Returns the BODY element object |
| getElementById (ID) | Returns the element node object that corresponds to the specified ID property value under the current object. |
| getElementsByTagName (name) | Returns an array of objects for the name element under the current object, name can be a wildcard * and will return all element nodes under the current object |
var shopping = document.getElementById (' purchases ') var items = shopping.getelementsbytagname (' * ') for (var i=0; i< Items.length; i++) {Console.log (i + ' + ' + Items[i].innertext)}Node Properties:
| Property name | Property Description |
| ChildNodes | Represents an array of all child element nodes under the given element node (without this element), containing element nodes, text nodes, attribute nodes |
| FirstChild | Returns the first child element node under a given element, possibly an element node, an attribute node, a text node |
| LastChild | Returns the last child element node under a given element, possibly an element node, an attribute node, a text node |
| NodeType | Returns the given element node type, returns 1 representing the element node, returns 2 for the attribute node, and 3 for the text node |
| NodeName | Returns the name of the node uppercase |
| NodeValue | Represents the value of the node, the element node is null, the attribute node is a property value, and the text node is a literal value |
| Method name | Method description |
| OnClick | Returns or sets the mouse click Handling event |
| onmouseover | Returns or sets the mouse hover handling event |
| OnMouseLeave | Returns or sets the mouse leave handling event |
| GetAttribute (attr) | Returns the property value of the element object attr, or null if no value is returned |
| SetAttribute (attr, value) | Sets the attribute of the element object attr the value of the corresponding property |
Get P Element Object array var pArr = document.getElementsByTagName (' P ') for (var i=0; i<parr.length; i++) {//Get corresponding Element object Title property value VA R title = Parr[i].getattribute (' title ')//Replace element object if present Title property value if (title) {alert (title) parr[i].setattr Ibute (' title ', ' Limanman: ' +title) alert (Parr[i].getattribute (' title ')}}Note: It is sometimes seen on the web to get or set the properties of an element object through element.attr, but it does not support all elements, so it is highly recommended that you use getattribute (attr) and setattribute (attr, value) replace it.
This article is from the "ζ Automated operation and maintenance development Road ζ" blog, please be sure to keep this source http://xmdevops.blog.51cto.com/11144840/1858118
Website frontend _javascript-dom programming. 0001.JavaScriptDom Base Core?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
