DOM中元素获取的方式
- id获取：var oDiv=document.getElementById('div1'); 注意，只能用document;
- class获取：document.getElementsByClassName('haha'); 可以限定范围的获取元素
- tagName:可以限定范围的获取元素
- querySelect
- tag
- '#'id
- .class
- querySelectAll; 注意，querySelectAll获取到的是一组元素，即使是页面中唯一的id，也得加[];
节点
|nodeType |nodeName | nodeValue|
---|---
文本节点 | 3 | "#text" | 文本内容
元素节点 | 1|大写的标签名| null
注释节点 | 8| #comment |注释内容
document节点 | 9|#document| null
节点关系
- children 子元素
- 一般情况兼容，但是在IE7／8下，如果有注释的话，拿到的是不准确的；
- childNodes 拿到所有的子节点
- parentNode 父元素； 拿的是结构上的父级；
- previousSibling 上一个哥哥节点
- nextSibling 下一个弟弟节点
久久乘法表 + 扩展
<!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; //现在没有，以后会有
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>
</html>
getChildren
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆梦源：勿忘初心，方得始终</title>
</head>
<body>
<!--为什么要封装？要封装他干什么？目的：1)为了获取当前容器下，所有的子元素 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：拿到当前容器下，所有的子节点
var aChilds=parent.childNodes;
//2:建立空数组，逐个遍历每个节点进行判断
var ary=[];
for(var i=0; i<aChilds.length; i++){
var cur=aChilds[i];
if(cur.nodeType===1){
/*if(typeof tagName==='undefined'){//说明没传第二个参数，那我们获取的就是所有子节点
ary.push(cur)
}else{//传了第二个参数，需要比对标签名后再放入数组；
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');
//目的：获取当前元素的上一个哥哥元素；
/*
* 目的：获取当前元素的上一个哥哥元素；
* 参数：当前元素
* 返回值：当前元素的上一个哥哥元素；
* */
/**
* 功能：求当前元素的上一个哥哥元素
* @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>
</html>
网友评论