First, DOM
Introduction: with a Platform-and language-independent access and modification (methods and properties to add, move, change, or remove) The content and structure of a document (primarily a Web page). is a common way to represent and manipulate an HTML or XML document.
Definition of the node: D (Web page documents) O (Document object) m (tree structure of Web document) m The tree structure can be understood as composed of nodes. Think of each label as a node.
Classification of nodes:Take a completed label as an example <div id = "box" > Test div</div>
ELEMENT node: Yes tag <div></div>
Text node: Is the plain text inside the tag, test div
Attribute node: Is the attribute of the tag, id= "box"
second, get the node:
Since the page is to operate first to get the content of the interface, mainly through the acquisition of nodes to the content of the page to operate. Here is a partial interface HTML, the following JS code mainly for the operation of the code.
Interface HTML:
<body> <span> start </span> <div name= "test" id = "box" AAA = "BBB" > <p> test div1</p> <p> test div2</p> <p> test div3</p> </div> <div id = "pox" > Test <em> Skew </em> end </div> <span> End </span></body >
JS Code:
Window.onload=function () { var box = document.getElementById (' box '); alert (box); The return value htmldivelement represents the div's node object lert (box.tagname); Returns the label name of the element node object }; Window.onload=function () { var p = document.getelementsbytagname (' P '); alert (p); Returns a collection of arrays, Htmlcollectionalert (p.length); Returns the number of P arrays alert (p[0]); The node object that returns P is alert (P.item (0)); IBID. alert (p[0].tagname); Lialert (p[0].innerhtml); Returns the text content of the node: Test Div1 var all= document.document.getElementsByTagName (' * '); Alert (all.length) <pre name= "Code" class= "JavaScript" > window.onload=function () { var box = Document.getelementsbyname (' Test ') [0]; alert (box); Returns the Node object Description: The name attribute generally appears in the form, and adding the Name property to other nodes is considered an illegal property, and Firefox and Google can get the illegal name in HTML, which is not available in the lower version of IE.
- - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - -
(2) Get elements by node attributes
1) Node property: To get the name, type, and value of the node.
JS Code:
Window.onload=function () { node attribute var box = document.getElementById (' box '); alert (box.nodename); Show Div element name alert (box.nodetype); Show 1 node type alert (box.nodevalue); Show null cause element node itself has no content };2) Hierarchy Node properties: Hierarchical nodes can be divided into parent-child nodes and sibling nodes, and other levels of nodes can be obtained through the current node.
2.1) child node childnodes, first word node firstchilds, last child node Lastchilds.
JS Code:
Window.onload=function () {sub-node var pox = document.getElementById (' pox '); Alert (pox.childNodes.length)//number of child nodes alert (pox.childnodes[0].nodevalue);//The content of the first child node alert ( Pox.firstChild.nodeValue); The content of the first child node alert (pox.lastChild.nodeValue);//The contents of the last node 2.2) parent node ParentChild, sibling node previoussibing,nextsibing.
JS Code:
Window.onload=function () { parent node, upper and lower node var pox = document.getElementById (' pox '); alert (Pox.parentnode) ; Pox node's parent node, Body node alert (pox.firstChild.nextSibling); The next node of the first node in the child node of the Pox node alert (pox.lastChild.previousSibling); The previous node of the last node in the child node of the Pox node alert (pox.lastChild.previousSibling.nodeName)};- - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - - - - - -
2. Attribute nodes
1) direct . The property value of the HTML attribute.
JS Code:
Window.onload=function () { var box = document.getElementById (' box '); alert (box.id); The return value is Box alert (BOX.AAA); The defined property values are not displayed. Return to Undefinedalert (Box.class); Returns the undefined class JS keyword alert (box.classname); Returns the value of the class attribute CD} 2) getattribute () Gets the property value of a property.
JS Code:
Window.onload=function () { var box = document.getElementById (' box '); Alert (Box.getattribute (' aaa ')) //This way you can get the property value of a custom attribute. Alert (Box.getattribute (' className '))//return null alert (Box.getattribute (' class ')) 3) obtained through the node genus.
JS Code:
Window.onload=function () { attribute var pox = document.getElementById (' pox '); alert (box.attributes); Collection array, which holds the attribute list of the element node alert (pox.attributes.length); The number of attributes of the node alert (pox.attributes[0]); Attr , Attribute node alert (pox.attributes[0].nodename);//The property name of the first property //Traversal property collection reads the property from the back forward. }; Window.onload=function () {var box = document.getElementById (' box '); Alert (Box.setattribute (' title ', ' title '))// Add Title property and Value alert (box.setattribute (' style ', ' color:red '))// Add a Style property and value} Window.onload=function () { var box = document.getElementById (' box '); Alert (Box.removeattribute (' title ')) //Remove Title Property} - ---------------------------------------------- ------- --------------------------------- - ------------------------------ --- -----
3, content node
1) innerHTML Gets the text content of the current element node
js code:
Window.onload=function () { var box = document.getElementById (' box '); alert (box.innerhtml); Displays the text content in the current element node (including html)//var box = document.getElementById (' box '); Box.innerhtml= ' Play <strong>JS</strong> '; Assignment, you can parse the HTML inside. } Window.onload=function () { var pox = document.getElementById (' pox '); Pox.childnodes[0].nodevalue= ' Test <strong>Pox</strong> '; Test <strong>Pox</strong> tilt End //pox.innerhtml= ' Test <strong>pox</strong ; Test pox (pox capital)};Note: The difference is 1: The former interprets the HTML in the assigned text as a special character, which is displayed as HTML.
Difference 2: The former is to get the text node to display the text, the latter is the element node (.) point out the text content of the node.
Iii. Summary
It mainly explains how to get three kinds of nodes in the base of DOM, then through three kinds of nodes to do the basic operation, Dom as the operation of the page has more content need to learn, and only in the application can better understand. Now is just the basic knowledge summary, later with the deepening of understanding in doing the corresponding summary.
Get element node (DOM base)
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
