DOM: document object model
DOM中元素獲取的方式
- id獲取: var oDiv = document.getElementById("div1");
- class獲取：document.getElementsByClassName();
- tagName：可以限定范圍的獲取元素
- querySelect
- querySelectAll
- tag
- '#id
- .class
- 注意：querySelectAll獲取到的是一組元素拱燃，即使是頁面中唯一的ID力惯，也得加[]獲取哮缺；
節(jié)點
| 節(jié)點名 |
nodeType |
nodeName |
nodeValue |
| 文本節(jié)點 |
3 |
#text |
文本內(nèi)容 |
| 注釋節(jié)點 |
8 |
#comment |
注釋內(nèi)容 |
| 元素節(jié)點 |
1 |
大寫的標簽名 |
null |
| document節(jié)點 |
9 |
#document |
null |
節(jié)點的關(guān)系
- children 子節(jié)點
- 一般情況兼容尝苇，但是在IE6-8下埠胖，如果有注釋的話直撤，拿到的是不準確的；
- childNodes 拿到所有的子節(jié)點
- parentNode 父元素谋竖；拿到的是結(jié)構(gòu)上的父級蓖乘；
- previousSibling 上一個哥哥節(jié)點
- previousElementSiblings 上一個哥哥節(jié)點
- nextSibling 下一個弟弟節(jié)點
- getChildren 獲取當前容器下，所有的子元素
<div class="wrap">
<div>第一個div</div>
<!--發(fā)生的發(fā)生的發(fā)生-->
<div>第二個div</div>
<a href="#">第1個a元素</a>
<a href="#">第2個a元素</a>
<!--是的發(fā)生的發(fā)展的發(fā)-->
<a href="#">第3個a元素</a>
是的方法阿魏酸
<div>第三個div</div>
<div>第四個div</div>
是打發(fā)打發(fā)所發(fā)生的
<span>第1個span</span>
<!--水電費水電費v水電費水電費-->
<span>第2個span</span>
<span>第3個span</span>
</div>
<script>
//需求：獲取限定范圍內(nèi)的所有子節(jié)點
/*
* 1. 目的：獲取一定范圍內(nèi)的所有子節(jié)點
* 2. 參數(shù)：1）范圍變量 2）獲取的節(jié)點->可傳可不傳
* 3. 返回值：將最后獲取到的子節(jié)點以數(shù)組的形式返回
*/
/*
* @功能 -> 獲取限定范圍內(nèi)的所有子節(jié)點或特定的子節(jié)點
* @getChildren -> function getChildren(){}
* @oParent -> 父級元素，即范圍
* @tagName -> 所要獲取的元素子節(jié)點 -> 可傳可不傳
*/
// 1. 確定范圍,通過getElementsByClassName獲取到的都是一個數(shù)組握牧，只有一個的時候也需要用[0]來獲取最終的元素
var oWarp = document.getElementsByClassName('wrap')[0];
function getChildren(oParent,tagName){
var ary = [];
var aChild = oParent.childNodes;
for(var i=0;i<aChild.length;i++){
if(aChild[i].nodeType === 1){
tagName ? aChild[i].tagName.toLowerCase() == tagName.toLowerCase() && ary.push(aChild[i]): typeof tagName == "undefined" && ary.push(aChild[i]);
}
}
return ary;
}
//var aChildren = getChildren(oWarp);
</script>
<div class="wrap">
<div>第一個div</div>
<!--發(fā)生的發(fā)生的發(fā)生-->
<div>第二個div</div>
<a href="#">第1個a元素</a>
<a href="#">第2個a元素</a>
<!--是的發(fā)生的發(fā)展的發(fā)-->
<a href="#">第3個a元素</a>
是的方法阿魏酸
<div>第三個div</div>
<div>第四個div</div>
是打發(fā)打發(fā)所發(fā)生的
<span>第1個span</span>
<!--水電費水電費v水電費水電費-->
<span>第2個span</span>
<span>第3個span</span>
</div>
<script>
/*
* 1. 目的：獲取當前元素的上個一個哥哥元素
* 2. 參數(shù)：1）當前元素
* 3. 返回值：返回當前元素的上一個哥哥元素
**/
/*
* @功能 ->獲取當前元素的上個一個哥哥元素
* @curEle -> 當前元素
*
**/
/*
* 1. 獲取當前元素
* 2. 獲取當前元素的上一個節(jié)點
*/
var oDiv = document.getElementsByTagName("div")[0];
var aDiv = oDiv.getElementsByTagName('div');
function prev(curEle){
if(curEle.previousElementSibling){
return curEle.previousElementSibling;
}
var prev = curEle.previousSibling;
while(prev && prev.nodeType !== 1){
prev = prev.previousSibling;
}
return prev;
}
</script>
next() 獲取當前元素的下一個弟弟元素
<div class="wrap">
<div>第1個div元素</div>
<div>第2個div元素</div>
<div>第3個div元素</div>
<span>第1個span元素</span>
<span>第2個span元素</span>
</div>
<script>
var oWrap = document.getElementsByClassName('wrap')[0];
var aIndex = oWrap.getElementsByTagName('div');
function next(curEle){
if(curEle.nextElementSibling){
return curEle.nextElementSibling;
}
var next = curEle.nextSibling;
while(next && next.nodeTyp !== 1){
next = next.nextSibling;
}
return next;
}
</script>
demo : 九九乘法表
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul li{
height: 40px;
line-height: 40px;
font-size: 20px;
cursor: pointer;
}
ul li.change{
background: lightcyan;
}
ul li.bg0{
background: lightblue;
}
ul li.bg1{
background: lightskyblue;
}
ul li.bg2{
background: lightsteelblue;
}
ul li span{
display: inline-block;
width: 90px;
text-align: center;
}
</style>
<ul></ul>
<script>
(function(){
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var str = '';
for(var i=1;i<10;i++){
str += "<li>";
for(var j=1;j<=i;j++){
str += "<span>"+ j + "x" + i + "=" + j*i +"</span>";
}
str += "</li>";
}
oUl.innerHTML = str;
// 思路一：自定義屬性
/* for(var i=0;i<aLi.length;i++){
aLi[i].className = 'bg'+ i%3;
aLi[i].bg = 'bg' + i%3;
aLi[i].onmouseover = function(){
this.className = 'change';
}
aLi[i].onmouseout = function(){
this.className = this.bg;
}
}*/
// 思路2: 變量
for(var i=0;i<aLi.length;i++){
aLi[i].className = "bg" + i%3;
var oldBg = null;
aLi[i].onmouseover = function(){
oldBg = this.className;
this.className = 'change';
}
aLi[i].onmouseout = function(){
this.className = oldBg;
}
}
})()
</script>
BOM的知識-window.location
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
