DOM是文档对象模型(Document Object Model)的缩写。 DOM使用树形结构表示HTML文档的层次结构。 在整个DOM标准中，最核心的接口是Node,它与DOM树所有的节点都对应，各种类型的节点接口均继承自Node接口 interface Node:{很多属性和方法} interface Document : Node {很多属性和方法} interface HTMLDocument : Document {很多属性和方法} interface Element : Node {很多属性和方法} interface HTMLElement : Element{很多属性和方法} ……
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="container"> <div id="main"> <ul> <li> <a href = "" name = "city">上海</a> </li> <li> <a href = "" name = "city">北京</a> </li> <li> <a href = "" name = "city">安徽</a> </li> <li> <a href = "" name = "city">湖南</a> </li> </ul> <div class="header"> <h1>header</h1> </div> </div> </div> </body> <script> function domOperate(){ /** * 获取节点 * @type {NodeList} */ var nodesContainer = document.getElementsByTagName('div'); var nodesA = document.getElementsByName('city'); var nodeMain = document.getElementById('main'); var nodeHeader = document.querySelector('.header'); /** * 创建节点 */ var nodeDiv = document.createElement('div'); nodeDiv.setAttribute('class','section'); nodeDiv.innerHTML = '<h1>section</h1>'; nodeMain.appendChild(nodeDiv); var nodeInput = document.createTextNode('input'); var frag = document.createDocumentFragment(); for(var i=0;i<10;i++){ var nodeBtn =document.createElement('input'); nodeBtn.setAttribute('type','button'); nodeBtn.setAttribute('value','ok'+ i); nodeBtn.onclick = function(event){ alert(event.target.value); }; frag.appendChild(nodeBtn); } nodeDiv.appendChild(frag);//添加节点 } domOperate(); </script> </html>