<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> div{padding:20px;} @-webkit-keyframes start1 { 0%,30% {opacity: 0;-webkit-transform: translate(0,8px);} 60% {opacity: 1;-webkit-transform: translate(0,0);} 100% {opacity: 0;-webkit-transform: translate(0,-10px);} } </style></head><body style="overflow:hidden;"> <div> <p>11111</p> <p id='n'>2222222</p> <p>3333333</p> </div> <form id="f"> <input name="aaa" type="radio" value="111">111 <input name="aaa" type="radio" value="222">222 <input name="aaa" type="radio" value="333">333 <div> 不是直接子元素 <p>不是直接子元素</p> </div> </form> <div id="father"> <p>第一个元素是我吗？？？</p> <p>第一个元素是我吗？？？</p> <p>最后一个元素是我吗？？？</p> </div> <script> /* 值得注意的是nodelist并不是一个真正意义上的数组，他是一个类数组对象 类数组对象和数组类似，但实际上他依然是一个对象，可以通过(typeof nodelist !="object" && nodelist.constructor == Array)来判断。 只是把平时我们习惯用的键改成数组命名，并添加一个length属性，如下所示： { "1":123, "2":234, length:2 } */ // 根据id获取node，这个在ie7下会获取到name等于n的元素可以通过getAttributeNode('id').value进行判断 var oid = document.getElementById('n'); console.log("id获取",oid) // 根据tagname获取nodes得到的是一个nodelist var nodes = document.getElementsByTagName('p'); console.log("根据tagname获取",nodes) // getElementByName 根据name属性选择，返回nodelist var nodes1 = document.getElementsByName('aaa'); console.log("根据name属性选择，返回nodelist:",nodes1); // 根据css选择器获取nodes得到的是一个node ie8+ var dom = document.querySelector("body [name='aaa']"); console.log("querySelector选择：",dom) // 根据css选择器获取nodes得到的是一个nodelist ie8+ var doms = document.querySelectorAll("input"); console.log("querySelectorAll选择：",doms) // 获取子节点得到的子节点包含空文本节点，需要通过判断nodeType进行过滤 或者用elements var childNodes = document.getElementsByTagName('body')[0].childNodes; console.log("获取的子节点：",childNodes); // 获取所有子元素 不包含文本节点 var childNodes2 = document.getElementById("f").elements; console.log("elements获取的子节点：",childNodes2); // 返回首个非文本节点子节点（注意换行回作为一个空白textNode） function getFirstChild(node){ var first = node.firstChild; console.log(first) while(first.nodeType!=1){ first = first.nextSibling; } return first; } var ofirst = getFirstChild(document.getElementById('father')); console.log("获取第一个子元素：",ofirst); // 返回末尾非文本节点子节点（注意换行回作为一个空白textNode） function getLastChild(node){ var last = node.lastChild; console.log(last) while(last.nodeType!=1){ last = last.previousSibling; } return last; } var olast = getLastChild(document.getElementById('father')); console.log("获取最后一个子元素：",olast); // 获取前一个元素 function getPreviousNode(node){ while(node.previousSibling.nodeType != 1){ node = node.previousSibling; } return node.previousSibling; } var oN = document.getElementById('n'); console.log(getPreviousNode(oN)) console.log(document.getElementById("f").elements[0].value) console.log(document.getElementById("f").elements[2].value) // 获取后一个元素 function getNextNode(node){ while(node.nextSibling.nodeType != 1){ node = node.nextSibling; } return node.nextSibling; } // 创建元素追加到父元素里 var newList = document.createElement('ul'); for(var i=0;i<5;i++){ var txt = document.createTextNode(i+'创建元素追加到父元素里'); var list = document.createElement('li'); list.appendChild(txt); newList.appendChild(list); } document.getElementById("father").appendChild(newList); </script></body></html>未完待续。。。