《JavaScript学习笔记》:DOM基础
DOM 节点
1、childNodes 获取子节点(包括文本节点和元素节点)
2、children 获取子节点(只包括元素节点)
3、nodeType 判断节点类型
- nodeType =3 :此节点为文本节点
- nodeType =1 :此节点为元素节点
看一个例子:对上面知识点的一个练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
window.onload=function()
{
var oUl=document.getElementById('ul1');
var aLi=oUl.childNodes; //获取子节点集,其中包括文本节点和元素节点
//alert(aLi.length);//结果为5
for(var i=0;i<aLi.length;i++)
{
nodeType=3 为文本节点;nodeType=1 为元素节点
alert(aLi[i].nodeType);
}
var aLi=oUl.children;
alert(aLi.length); //结果为:2;直接获取的就是元素节点个数(不包括文本节点)
};
</script>
</head>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
</ul>
</body>
</html>
4、parentNode 获取父节点
下面这个例子是对获取父节点这个知识点的应用:每个li中有一个链接,当我们点击这个链接时,整个li隐藏。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
window.onload=function()
{
var aA=document.getElementsByTagName('a');
for(var i=0;i<aA.length;i++)
{
aA[i].onclick=function()
{
this.parentNode.style.display='none';//this.parent就是获取父节点
};
}
};
</script>
</head>
<body>
<ul id="ul1">
<li >1 <a href="javascript:" >隐藏</a></li>
<li >2 <a href="javascript:" >隐藏</a></li>
<li >3 <a href="javascript:" >隐藏</a></li>
<li >4 <a href="javascript:" >隐藏</a></li>
<li >5 <a href="javascript:" >隐藏</a></li>
</ul>
</body>
</html>
5、firstChild firstElementChild :获取第一个子节点,有的浏览器支持firstChild来获取第一个子节点,有的浏览器支持第二种。
为解决兼容器问题,我们可以用if来判断一下,如下:
function getFirstChild(parent)
{
if(parent.firstChild)
{
return parent.firstChild;
}
else
{
return parent.firstElementChild;
}
};
要说明的是:firstChild、firstElementChild都是获取第一个子节点,如果第一个子节点是文本节点,即使这个文本节点为空,则也获取的就是文本节点,在IE 11、FireFox中已验证过了,看有的资料显示:有的浏览器会忽略节点之间生成的空白文本节点。
6、lastChild/lastElementChild 获取最后一个子节点,用法与上面类似
7、nextSibling/nextElementSibling 获取下一个兄弟节点
8、previousSibling/previousSibling:获取前一个兄弟节点
根据ClassName选择元素节点
前面我们都是根据id来获取元素节点,我们也可以通过ClassName条件来刷选,如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
window.onload=function()
{
var aUl=document.getElementById('ul1');
var aLi=aUl.getElementsByTagName('li');
var res=[];
for(var i=0;i<aLi.length;i++)
{
if(aLi[i].className=='box')
{
res.push(aLi[i]);
}
}
//这样我们就获取到了所有className='box'的li
for(var i=0;i<res.length;i++)
{
res[i].style.background='red';
}
};
</script>
</head>
<body>
<ul id="ul1">
<li class="box">1</li>
<li>2</li>
<li class="box">3</li>
<li class="box">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li class="li1">8</li>
<li class="box">9</li>
</ul>
</body>
</html>
为方便重复使用,我们可以封装为一个函数,如下:
function getByClassName(parent,name)
{
var arr=parent.getElementsByTagName('*');
var res=[];
for(var i=0;i<arr.length;i++)
{
if(arr[i].className==name)
{
res.push(arr[i]);
}
}
return res;
}
DOM方式操作元素属性
前面我们介绍的操作元素属性的方法有两种
1、用点,例如:oTxt.value=’adb’;
2、用方括号,例如:oTxt[‘value’]=’xxx’;
下面就是第三种,obj.setAttribute(name,value);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
window.onload=function()
{
var oTxt = document.getElementById('txt1');
//oTxt.value='adb';
oTxt['value']='xxx';
//oTxt.setAttribute('value','asdf');
};
</script>
</head>
<body>
<input id="txt1"type="text" />
</body>
</html>
既然有设置属性,肯定就有获取属性值的方法,如下:
1、obj.getAttribte(name);
对于获取属性值的方法就不举例进行介绍了,比较简答。