DOM中元素獲取的方式
- id獲?。簐ar oDiv=document.getElementById('div1'); 注意，只能用document;
- class獲?。篸ocument.getElementsByClassName('haha'); 可以限定范圍的獲取元素
- tagName:可以限定范圍的獲取元素
- querySelect
- tag
- '#'id
- .class
- querySelectAll; 注意，querySelectAll獲取到的是一組元素，即使是頁(yè)面中唯一的id，也得加[];
節(jié)點(diǎn)
|nodeType |nodeName | nodeValue|
---|---
文本節(jié)點(diǎn) | 3 | "#text" | 文本內(nèi)容
元素節(jié)點(diǎn) | 1|大寫的標(biāo)簽名| null
注釋節(jié)點(diǎn) | 8| #comment |注釋內(nèi)容
document節(jié)點(diǎn) | 9|#document| null
節(jié)點(diǎn)關(guān)系
- children 子元素
- 一般情況兼容，但是在IE7／8下，如果有注釋的話，拿到的是不準(zhǔn)確的；
- childNodes 拿到所有的子節(jié)點(diǎn)
- parentNode 父元素； 拿的是結(jié)構(gòu)上的父級(jí)；
- previousSibling 上一個(gè)哥哥節(jié)點(diǎn)
- nextSibling 下一個(gè)弟弟節(jié)點(diǎn)
久久乘法表 + 擴(kuò)展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圓夢(mèng)源：勿忘初心，方得始終</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)在沒有，以后會(huì)有
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;
//隔行換色，最簡(jiǎn)單的方法，就是%的思想；
for(var i=0; i<aLi.length; i++){
aLi[i].className='bg'+i%3;
//自定義屬性思想：所有你將來要用到的數(shù)值，不知道存哪里，都可以存在元素的自定義屬性上；
/*aLi[i].oldBg='bg'+i%3;//當(dāng)我們換完顏色的時(shí)候，就把每個(gè)li自身的顏色，存在自己的自定義屬性上；
aLi[i].onmouseover=function () {
this.className='change';
};
aLi[i].onmouseout=function () {
//鼠標(biāo)移出的時(shí)候，就恢復(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>圓夢(mèng)源：勿忘初心，方得始終</title>
</head>
<body>
<!--為什么要封裝？要封裝他干什么？目的：1)為了獲取當(dāng)前容器下，所有的子元素 2)對(duì)子元素再做一個(gè)過濾-->
<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é)點(diǎn)
var aChilds=parent.childNodes;
//2:建立空數(shù)組，逐個(gè)遍歷每個(gè)節(jié)點(diǎn)進(jìn)行判斷
var ary=[];
for(var i=0; i<aChilds.length; i++){
var cur=aChilds[i];
if(cur.nodeType===1){
/*if(typeof tagName==='undefined'){//說明沒傳第二個(gè)參數(shù)，那我們獲取的就是所有子節(jié)點(diǎn)
ary.push(cur)
}else{//傳了第二個(gè)參數(shù)，需要比對(duì)標(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>圓夢(mèng)源：勿忘初心，方得始終</title>
</head>
<body>
<div class="wrap"><div>第1個(gè)div</div>
111111
22222
33333
<div>第2個(gè)div</div>
<div>第3個(gè)div</div>
<div>第4個(gè)div</div>
<div>第5個(gè)div</div>
</div>
<script>
var oDiv=document.getElementsByTagName('div')[0];
var aDiv=oDiv.getElementsByTagName('div');
//目的：獲取當(dāng)前元素的上一個(gè)哥哥元素；
/*
* 目的：獲取當(dāng)前元素的上一個(gè)哥哥元素；
* 參數(shù)：當(dāng)前元素
* 返回值：當(dāng)前元素的上一個(gè)哥哥元素；
* */
/**
* 功能：求當(dāng)前元素的上一個(gè)哥哥元素
* @param curEle
* @returns preEle
*/
function prev(curEle){
//如果高級(jí)瀏覽器支持的話，直接使用高級(jí)瀏覽器提供的previousElementSibling
if(curEle.previousElementSibling){
return curEle.previousElementSibling;
}
//證明瀏覽器不支持 previousElementSibling
var prev=curEle.previousSibling;
//循環(huán)的條件：上一個(gè)節(jié)點(diǎn)，必須是個(gè)節(jié)點(diǎn)，并且不是元素節(jié)點(diǎn)
while(prev && prev.nodeType !==1){
prev=prev.previousSibling;
}
return prev;
}
</script>
</body>
</html>
