<!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>
未完待续。。。