Home > Developer > Web Develop
Get element nodes (DOM basics) and node dom
I. DOM
Introduction:ToIAllows you to access and modify the content and structure of a document (mainly a webpage) in a way independent of platform and language (adding, moving, changing, or removing methods and attributes. Is a common method used to represent and process an HTML or XML document.
Node definition:D (Web document) O (document Object) M (tree structure of Web document) M can be understood as a node. Each label is considered as a node.
Node classification:Take a completed tag as an example <div id = "box"> test Div </div>
Element Node: Label <div> </div>
Text node: the plain text in the label. Test the Div.
Attribute node: it is the label property, id = "box"
2. Get nodes:
To perform operations on the page, you must first obtain the content of the interface, and perform operations on the page content by obtaining the node. The following provides some html interfaces. The js Code below mainly operates on 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"> end of test <em> skew </em> </ div> <span> end </span> </body>
Js Code:
Window. onload = function () {var box = document. getElementById ('box'); alert (box); // The returned value HTMLDivElement indicates the Node object lert (box. tagName); // return the Tag Name of the Element Node object };
2) getElementByTagNamename (): obtains a set of nodes with the same element name through the element node name.
Window. onload = function () {var p = document. getElementsByTagName ('P'); alert (p); // returns an array set, HTMLCollectionalert (p. length); // returns the number of p arrays alert (p [0]); // returns the Node object alert (p. item (0); // same as alert (p [0]. tagName); // LIalert (p [0]. innerHTML); // return the text content of the node: Test Div1 var all = document.doc ument. getElementsByTagName ('*'); alert (all. length) // Number of all nodes on the webpage}
3) getElementByName ()
: Obtains the set of element nodes through the value of the name attribute.
<Pre name = "code" class = "javascript"> window. onload = function () {var box = document. getElementsByName ('test') [0]; alert (box); // return Node object}
Note: The name attribute is generally displayed in a form. Adding the name attribute to other nodes is considered invalid. Firefox and Google can obtain invalid names in HTML, earlier IE versions cannot be obtained.
------------------------------------------ -----------------------------------
(2) obtain elements through node attributes
1) node attributes: Get the node name, type, and value.
Js Code:
Window. onload = function () {node attribute var box = document. getElementById ('box'); alert (box. nodeName); // display the DIV element name alert (box. nodeType); // displays the node type alert (box. nodeValue); // displays the reason why the Element Node itself has no content };Note: node can only get the current node. In the above js Code, node itself places the node pointer on the element <div> </div>, so there is no value,
2) Hierarchical node attributes: hierarchical nodes can be divided into Parent and Child Nodes and sibling nodes, and other levels of nodes can be obtained through the current node.
2.1) the child node is childNodes, the first byte is firstChilds, And the last child node is lastChilds.
Js Code:
Window. onload = function () {subnode var pox = document. getElementById ('pox'); alert (pox. childNodes. length) // Number of subnodes alert (pox. childNodes [0]. nodeValue); // the content of the first subnode alert (pox. firstChild. nodeValue); // the content of the first subnode alert (pox. lastChild. nodeValue); // the content of the last node };
2.2) parentChild of the parent node, previousSibing of the sibling node, and nextSibing.
Js Code:
Window. onload = function () {parent node, upstream and downstream node var pox = document. getElementById ('pox'); alert (pox. parentNode); // The body node alert (pox. firstChild. nextSibling); // The next node alert (pox. lastChild. previussibling); // The Last alert (pox. lastChild. previussibling. nodeName )};
------------------------------------------ ------------------------------------------
2. Attribute nodes
1) directly outputs the attribute value of the HTML attribute.
Js Code:
Window. onload = function () {var box = document. getElementById ('box'); alert (box. id); // The returned value is box alert (box. aaa); // The defined property value is not displayed. Returns undefinedalert (box. class); // returns the undefined class as the js keyword alert (box. className); // returns the class attribute value cd}
2) getAttribute () gets the attribute value of an attribute.
Js Code:
Window. onload = function () {var box = document. getElementById ('box'); alert (box. getAttribute ('aaa') // you can obtain the property value of a custom attribute. Alert (box. getAttribute ('classname') // return null alert (box. getAttribute ('class') // return the attribute value of the class Attribute}
3) obtained through the node row
Js Code:
Window. onload = function () {attribute var pox = document. getElementById ('pox'); alert (box. attributes); // a collection array that stores the attribute list of the element node alert (pox. attributes. length); // number of attributes of the node alert (pox. attributes [0]); // Attr, attribute node alert (pox. attributes [0]. nodeName); // The attribute name of the first attribute // when the attribute set is traversed, the attribute is read from the back and forward. };
Window. onload = function () {var box = document. getElementById ('box'); alert (box. setAttribute ('title', 'title') // Add the title attribute and value alert (box. setAttribute ('style', 'color: red') // Add the style attribute and value}
Window. onload = function () {var box = document. getElementById ('box'); alert (box. removeAttribute ('title') // remove the title attribute}
------------------------------------------ ------------------------------------------
3. Content Node
1) innerHTML obtains the text content of the current Element Node
Js Code:
Window. onload = function () {var box = document. getElementById ('box'); alert (box. innerHTML); // display the text content (including HTML) in the current Element Node // var box = document. getElementById ('box'); // box. innerHTML = 'fun <strong> JS </strong> '; // value assignment. You can parse the HTML in it .}
2) differences between nodeVlaue and innerhTML
Window. onload = function () {var pox = document. getElementById ('pox'); pox. childNodes [0]. nodeValue = 'test <strong> Pox </strong> '; // test <strong> Pox </strong> skewed end // pox. innerHTML = 'test <strong> Pox </strong; test Pox (Pox capital )};
Note: difference 1: the former parses the html in the assigned text into special characters, and the latter is displayed as html.
Difference 2: the former is to get the text node to display the text, and the latter is to point out the text content of the node through the Element Node.
Iii. Summary
This article mainly explains how to obtain three types of nodes in the Dom, and then perform basic operations through three nodes. Dom, as an operation on pages, has more to be learned, and it can be better understood only in applications. Now it's just a summary of the basic knowledge, and we will make a summary later as our understanding deepens.
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
