<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box"> <span>span</span> <p>p标签</p> <!- >div</->Here is a comment < Script > // var = document.getElementById Box ( 'Box'); // console.dir (Box) // hierarchy node // // parent-child structure // the parentNode only one parent node // the childNodes child node has a number // Children subelements // // var = document.getElementById Box ( 'Box'); // the console.log (box.parentNode); // the console.log (box.childNodes); // // properties node, element nodes, text nodes, comment nodes // for (var I = 0; I <box.childNodes.length; I ++) { // // find all the child elements in the box // var node = box.childNodes [ I]; // // determine whether the current node is a child element node // IF (node.nodeType ===. 1) { // the console.log (Node); // } // } // // // there can be direct access attribute child elements? Children var Box = document.getElementById ( ' Box ' ); the console.log (box.children); // for all child elements </ Script > </ body > </ HTML >