Public properties and methods in the core DOM
Public properties and methods in the core DOM
Note: Searching for nodes (markers) in the core DOM starts from the root node of (html node).
##Node access
- nodeName: Node name.
- nodeValue: The value of the node. Only text nodes have values, element nodes have no values. The value of nodeValue can only be "plain text" and cannot contain any HTML tags or CSS attributes.
- firstChild: The 1st child node.
- lastChild: the last child node.
- childNodes: A list of child nodes, which is an array.
- parentNode: parent node.
Methods to find tags
- ##document.firstChild
- document.firstChild.lastChild
- document.body
##Attribute operations on nodes
- getAttribute(name): Get the value of a node attribute.
- removeAttribute(name): Delete the attribute of a node.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <script type="text/javascript"> window.onload = function(){ //查找body節(jié)點(diǎn) var node_body = document.all.div1; //查找img節(jié)點(diǎn) var imgObj = node_body.firstChild; //增加屬性 imgObj.setAttribute("src","https://img.php.cn/upload/course/000/000/009/580ae23c4a88a881.jpg"); imgObj.setAttribute("width","400"); imgObj.setAttribute("border","2"); imgObj.setAttribute("style","cursor:pointer;"); //刪除border屬性 imgObj.removeAttribute("border"); } </script> </head> <body ><div id="div1"><img /></div></body> </html>
Creation of nodes
- Example: var imgObj = document.createElement("img")
- ##parentNode.appendChild(childNode): Append the created node to a parent node.
- parentNode represents the parent node, and the parent node must exist.
childNode represents the child node.
- Example: document.body.appendChild(imgObj)
parentNode.removeChild(childNode): Delete a certain Child nodes under the parent node.
- #parentNode represents the parent node.
childNode represents the child node to be deleted.
Example: document.body.removeChild(imgObj)
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>php.cn</title> <script > //網(wǎng)頁加載完成后 window.onload = function(){ //創(chuàng)建一個(gè)<img>標(biāo)記 var imgObj = document.createElement("img"); //增加屬性 imgObj.setAttribute("src","/upload/course/000/000/009/580ae23c4a88a881.jpg"); imgObj.setAttribute("width","400"); //將創(chuàng)建的圖片節(jié)點(diǎn)，掛載到某個(gè)父節(jié)點(diǎn)下 document.body.appendChild(imgObj); } </script> </head> <body> </body> </html>
