DOM中元素獲取的方式
- id獲蕊拧：var oDiv=document.getElementById('div1'); 注意性含，只能用document;
- class獲缺岂伞：document.getElementsByClassName('haha'); 可以限定范圍的獲取元素
- tagName:可以限定范圍的獲取元素
- querySelect
- tag
- '#'id
- .class
- querySelectAll; 注意睛驳，querySelectAll獲取到的是一組元素，即使是頁面中唯一的id凭峡，也得加[];
節(jié)點
|nodeType |nodeName | nodeValue|
---|---
文本節(jié)點 | 3 | "#text" | 文本內(nèi)容
元素節(jié)點 | 1|大寫的標(biāo)簽名| null
注釋節(jié)點 | 8| #comment |注釋內(nèi)容
document節(jié)點 | 9|#document| null
節(jié)點關(guān)系
- children 子元素
- 一般情況兼容，但是在IE7／8下决记，如果有注釋的話想罕，拿到的是不準(zhǔn)確的；
- childNodes 拿到所有的子節(jié)點
- parentNode 父元素霉涨； 拿的是結(jié)構(gòu)上的父級；
- previousSibling 上一個哥哥節(jié)點
- nextSibling 下一個弟弟節(jié)點
久久乘法表 + 擴展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圓夢源：勿忘初心惭适，方得始終</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
padding:30px;
}
ul li{
height: 50px;
line-height: 50px;
font-size: 30px;
}
.bg0{
background: pink;
}
.bg1{
background: lightcyan;
}
.bg2{
background: lightgoldenrodyellow;
}
.change{
background: purple;
color: #ffffff;
}
ul li span{
display: inline-block;
width: 120px;
}
</style>
</head>
<body>
<ul></ul>
<script>
(function () {
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var str='';
var oldBg=null; //現(xiàn)在沒有笙瑟，以后會有
for(var i=1; i<=9; i++){
str+='<li>'
for(j=1; j<=i; j++){
str+='<span>'+(j+'*'+i+'='+j*i)+'</span>'
}
str+='</li>'
}
oUl.innerHTML=str;
//隔行換色，最簡單的方法癞志，就是%的思想往枷；
for(var i=0; i<aLi.length; i++){
aLi[i].className='bg'+i%3;
//自定義屬性思想：所有你將來要用到的數(shù)值，不知道存哪里凄杯，都可以存在元素的自定義屬性上错洁；
/*aLi[i].oldBg='bg'+i%3;//當(dāng)我們換完顏色的時候，就把每個li自身的顏色戒突，存在自己的自定義屬性上屯碴；
aLi[i].onmouseover=function () {
this.className='change';
};
aLi[i].onmouseout=function () {
//鼠標(biāo)移出的時候，就恢復(fù)以前的嚴(yán)格膊存，以前的顏色在標(biāo)簽的自定義屬性oldBg上存的导而；
this.className=this.oldBg;
};*/
//思路2：利用變量存值
aLi[i].onmouseover=function () {
oldBg=this.className;
this.className='change';
};
aLi[i].onmouseout=function () {
this.className=oldBg;
}
}
})();
</script>
</body>
</html>
getChildren
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圓夢源：勿忘初心，方得始終</title>
</head>
<body>
<!--為什么要封裝隔崎？要封裝他干什么今艺？目的：1)為了獲取當(dāng)前容器下，所有的子元素 2)對子元素再做一個過濾-->
<div>
<p></p>
<p></p>
<p></p>
<span></span><span></span>
</div>
<script>
var oDiv=document.getElementsByTagName('div')[0];
var aP=getChildren(oDiv,'p');
var aSpan=getChildren(oDiv,'span');
var aChild=getChildren(oDiv);
function getChildren(parent,tagName) {
//1：拿到當(dāng)前容器下爵卒，所有的子節(jié)點
var aChilds=parent.childNodes;
//2:建立空數(shù)組虚缎，逐個遍歷每個節(jié)點進行判斷
var ary=[];
for(var i=0; i<aChilds.length; i++){
var cur=aChilds[i];
if(cur.nodeType===1){
/*if(typeof tagName==='undefined'){//說明沒傳第二個參數(shù)，那我們獲取的就是所有子節(jié)點
ary.push(cur)
}else{//傳了第二個參數(shù)钓株，需要比對標(biāo)簽名后再放入數(shù)組实牡；
if(cur.tagName.toLowerCase()===tagName.toLowerCase()){
ary.push(cur);
}
}*/
tagName?cur.tagName.toLowerCase()===tagName.toLowerCase()&&ary.push(cur):ary.push(cur);
}
}
return ary;
}
</script>
</body>
</html>
previouseSbling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圓夢源：勿忘初心，方得始終</title>
</head>
<body>
<div class="wrap"><div>第1個div</div>
111111
22222
33333
<div>第2個div</div>
<div>第3個div</div>
<div>第4個div</div>
<div>第5個div</div>
</div>
<script>
var oDiv=document.getElementsByTagName('div')[0];
var aDiv=oDiv.getElementsByTagName('div');
//目的：獲取當(dāng)前元素的上一個哥哥元素轴合；
/*
* 目的：獲取當(dāng)前元素的上一個哥哥元素铲掐；
* 參數(shù)：當(dāng)前元素
* 返回值：當(dāng)前元素的上一個哥哥元素；
* */
/**
* 功能：求當(dāng)前元素的上一個哥哥元素
* @param curEle
* @returns preEle
*/
function prev(curEle){
//如果高級瀏覽器支持的話值桩，直接使用高級瀏覽器提供的previousElementSibling
if(curEle.previousElementSibling){
return curEle.previousElementSibling;
}
//證明瀏覽器不支持 previousElementSibling
var prev=curEle.previousSibling;
//循環(huán)的條件：上一個節(jié)點摆霉，必須是個節(jié)點，并且不是元素節(jié)點
while(prev && prev.nodeType !==1){
prev=prev.previousSibling;
}
return prev;
}
</script>
</body>
</html>
