DOM： 全称；document object model
DOM中获取元素的方法
- 1.id获取：var oDiv=document.getElementById('tab1');
- 注意只能用document；
- 2.class获取：var oDiv=documents.getByClassName('tab1');
- 3.tagName获取：var oDiv=documents.getByTagName('tab1')[0];
- 4.querySelect获取： var oDiv=document.querySelector();
- 5.querySelectAll : var oDiv=document.querySelector()[];注意：querySelectAll获取的是一组元素，即使页面中只有唯一的一个id，也需要加[];
- 一共9种方法。
节点
| 节点 |
nodeType |
nodeName |
nodevalue |
| 元素节点 |
1 |
大写的标签名 |
null |
| 文本节点 |
3 |
"#text" |
文本内容 |
| 注释节点 |
8 |
#comment |
注释内容 |
| document节点 |
9 |
#document |
null |
节点关系
- children 子元素
- 一般情况兼容。但是在IE7/8下，如果有注释的话，拿到的是不准确的；
- childNodes 拿到所有子节点
- parentNode 父元素，拿的是结构上的父级；
- previousSibling 上一个哥哥的节点
- nextSibling 下一个弟弟的节点
parentNode 父元素
<body>
<div>
<p>
<span></span>
</p>
</div>
<script>
var oSpan=document.getElementsByTagName('span')[0];
var oP=document.getElementsByTagName('p')[0];
var oDiv=document.getElementsByTagName('div')[0];
//parentNode拿的是结构上的父级；
</script>
</body>
同步
<script>
/*while(1){
}*/
document.body.onclick=function () {
alert(1223)
};
alert(123)
</script>
封装
- getChildren 获取当前容器下，所有的子元素；
- pre() 获取当前元素的上一个哥哥元素；
<body>
<ul><!--llalalalala--> 111111111111
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div>
<p></p>
<p></p>
<p></p>
<h2></h2>
<h2></h2>
</div>
<script>
var oUl=document.getElementsByTagName('ul')[0];
var oDiv=document.getElementsByTagName('div')[0];
//需求：找到当前元素下，所有子元素节点；
/*
* 如何进行函数封装
* 1：函数的功能；
* 2：函数是否需要传参
* 3：函数是否有返回值；
* */
function getChildren(parent,tagName){
//1:先拿到当前元素下所有的子节点
var aChilds=parent.childNodes;
//2:逐个验证每个子节点，是否是元素节点，如果是元素节点就放入数组；
var ary=[];
for(var i=0; i<aChilds.length; i++){
if(aChilds[i].nodeType==1){
/* if(tagName){
aChilds[i].tagName.toUpperCase()==tagName.toUpperCase() && ary.push(aChilds[i]);
}else{
ary.push(aChilds[i]);
}
*/
tagName?aChilds[i].tagName.toUpperCase()==tagName.toUpperCase() && ary.push(aChilds[i]):ary.push(aChilds[i]);
}
}
return ary;
};
var aLi=getChildren(oUl);
var aChild=getChildren(oDiv);
</script>
</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');
//目的：获取当前元素的上一个哥哥元素；
/*
* 目的：获取当前元素的上一个哥哥元素；
* 参数：当前元素
* 返回值：当前元素的上一个哥哥元素；
* */
/**
* 功能：求当前元素的上一个哥哥元素
* @param curEle
* @returns preEle
*/
function prev(curEle){
//如果高级浏览器支持的话，直接使用高级浏览器提供的previousElementSibling
if(curEle.previousElementSibling){
return curEle.previousElementSibling;
}
//证明浏览器不支持 previousElementSibling
var prev=curEle.previousSibling;
//循环的条件：上一个节点，必须是个节点，并且不是元素节点
while(prev && prev.nodeType !==1){
prev=prev.previousSibling;
}
return prev;
}
</script>
</body>
封装下一个弟弟元素
<body>
<div class="wrap">
<div>1</div>
<!--aassssdsfsrbdrgbebrb-->
<!--aassssdsfsrbdrgbebrb-->
<div>2</div>
<!--aassssdsfsrbdrgbebrb-->
<!--aassssdsfsrbdrgbebrb-->
<div>3</div>
<!--aassssdsfsrbdrgbebrb-->
<!--aassssdsfsrbdrgbebrb-->
<div>4</div>
<!--aassssdsfsrbdrgbebrb-->
<!--aassssdsfsrbdrgbebrb-->
<div>5</div>
<!--aassssdsfsrbdrgbebrb-->
<!--aassssdsfsrbdrgbebrb-->
<div>6</div>
</div>
<script>
var oDiv=document.getElementsByTagName('div')[0];
var aDiv=oDiv.getElementsByTagName('div');
function pro(curEle) {
if (curEle.nextElementSibling){
return curEle.nextElementSibling;
}
var prev=curEle.nextSibling;
while (prev&&prev.nodeType!==1){
prev=prev.nextSibling;
}
return prev;
}
</script>
</body>
九九乘法表
<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; //现在没有，以后会有
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;
//自定义属性思想：所有你将来要用到的数值，不知道存哪里，都可以存在元素的自定义属性上；
/*aLi[i].oldBg='bg'+i%3;//当我们换完颜色的时候，就把每个li自身的颜色，存在自己的自定义属性上；
aLi[i].onmouseover=function () {
this.className='change';
};
aLi[i].onmouseout=function () {
//鼠标移出的时候，就恢复以前的严格，以前的颜色在标签的自定义属性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>
