js的三大核心
1豌熄、ECMAScript js的語法標準
2罢杉、DOM Document Object Mobel 文檔對象模型
提供方法：讓js可以操作HTML標簽方法 DOM老大是document
3饱亿、BOM Browser Object Mobel 瀏覽器對象模型
提供方法 讓js可以操作瀏覽器 BOM 老大是window
js里最大的boss是window
document是window下的一個對象
DOM
Document Object Mobel 文檔對象模型
一套規(guī)則修己，使JS能夠 操作HTML 文檔的規(guī)則
JS 通過 DOM規(guī)則 操作THML 文檔
DOM樹
childNodes:獲取所有的孩子節(jié)點
<div class="box">
<p>明天您好</p>
<a href="">我是a標簽</a>
阿飛
</div>
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0],
val = oBox.childNodes; //獲取所有的孩子
console.log( val );//得到的是所有的節(jié)點
</script>
1赴蝇、是一個回車算是的一個文本節(jié)點 #text
2菩浙、p標簽節(jié)點
3、是一個回車算是的一個文本節(jié)點 #text
4句伶、 a標簽節(jié)點
5劲蜻、 3、是一個文本節(jié)點 #text
查看瀏覽器
nodeType屬性返回節(jié)點類型的常數(shù)值考余。不同的類型對應不同的常數(shù)值先嬉，12種類型分別對應1到12的常數(shù)值
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0],
val = oBox.childNodes; //獲取所有的孩子
console.log( val[1].nodeType );//得到的是節(jié)點對象對應的數(shù)字值
</script>
children只獲取兒子節(jié)點中的所有標簽元素節(jié)點
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0],
val = oBox.children; //只獲取對象下兒子的所有標簽節(jié)點
//console.log( val[4].nodeValue );
console.log( val );//得到標簽元素節(jié)點
</script>
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0],
val = oBox.children; //只獲取對象下兒子的所有標簽節(jié)點集合 類數(shù)組
val[0].style.backgroundColor = 'red'; // 設置第0個的背景色
//console.log( val[4].nodeValue );
console.log( val );
</script>
children只獲取兒子級，如果要獲取所有后代可以用
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0],
all = oBox.getElementsByTagName('*'); //可以獲取的所有后代標簽元素
console.log( all );
</script>
firstChild 獲取第一個子節(jié)點 obj.firstChild;
主流瀏覽器：獲取第一個子節(jié)點
IE 6 7 8 :獲取第一個標簽元素子節(jié)點
<div class="box">
<p>明天您好
<span>您好您好</span>
</p>
<a href="">我是a標簽</a>
阿飛
</div>
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0],
val = oBox.firstChild;// 獲取到文本節(jié)點
console.log( val );
</script>
firstElementChild 獲取第一個標簽元素子節(jié)點 obj.firstElementChild;
主流瀏覽器：獲取第一個標簽元素子節(jié)點
IE 6 7 8 :undefined 沒有這個屬性
<div class="box">
<p>明天您好
<span>您好您好</span>
</p>
<a href="">我是a標簽</a>
阿飛
</div>
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0],
val = oBox.firstElementChild;// 獲取到標簽元素節(jié)點
console.log( val );
</script>
總結：firstElementChild 在IE 6 7 8 不存在 firstChild 在IE 6 7 8 跟主流瀏覽器表現(xiàn)不一樣
做兼容 用children[ 0 ];
lastChild 和lastElementChild 跟上面一樣
nextSibling相鄰的兄弟節(jié)點（下一個）
<body>
<div class="box">
<p>明天您好
<span>您好您好</span>
</p>
<a href="">我是a標簽</a>
阿飛
</div>
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0],
val = oBox.firstElementChild.nextSibling;//相鄰的兄弟節(jié)點（下一個）
console.log( val );
</script>
</body>
nextElementSibling; 相鄰的兄弟元素標簽節(jié)點（下一個）
<body>
<div class="box">
<p>明天您好
<span>您好您好</span>
</p>
<a href="">我是a標簽</a>
阿飛
</div>
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0],
val = oBox.firstElementChild.nextElementSibling;//相鄰的兄弟元素標簽節(jié)點（下一個）
console.log( val );
</script>
</body>
這2個兼容性跟上面的一樣 可以用序號來做選擇下一個
previousSibling 上一個元素
previousElementSibling上一個標簽元素
