DOM基础实例
DOM基础实例
一．什么是DOM节点？
说白了标签元素和节点都一样只是在不同的地方叫法不同
在css里面 叫标签
在JS里面 叫元素
在DOM里面叫节点
浏览器支持情况：现在主流浏览器大概就是：
IE 10%
Chrome 60%
FF 90%
（1） DOM节点
（2） ChildNodes(用来获取子节点，这个获取的是一个数组) nodeType节点类型
ChildNodes例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
var oUl=document.getElementById('ul1');
alert(oUl.childNodes.length);
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
</body>
</html>
我写了一个ul里面有2个li标签用ChildNodes来获取ul的子节点，其实都知道 ul的子节点是li ，并且有2个，但是你用某些浏览器打开应该会出现5个子节点，这多出来的3个其实是3个文本节点，什么是文本节点其实就是空白，你自己算一下，ul里面先是空白，然后是li，再是空白，再是li，然后再是空白，这样就是5个，这就是浏览器的兼容问题！
下面来解决兼容问题，然后就用到nodeType了，nodeType是获取节点的类型
获取节点类型的例子:借用上面的代码写一个for循环
<script>
window.onload=function()
{
var oUl=document.getElementById('ul1');
for(var i=0;i<oUl.childNodes.length;i++)
{
alert(oUl.childNodes[i].nodeType)
}
}
</script>
结果会报出来3和1 现在说明3代表文本节点，1代表元素节点
nodeType==3 è代表文本节点
nodeType==1 è代表元素节点
大部分浏览器兼容问题都是用if解决
<script>
window.onload=function()
{
var oUl=document.getElementById('ul1');
//alert(oUl.childNodes.length)
for(var i=0;i<oUl.childNodes.length;i++)
{
alert(oUl.childNodes[i].nodeType)
if(oUl.childNodes[i].nodeType==1)
{
oUl.childNodes[i].style.background='red';
}
}
}
</script>
这段代码是元素节点背景变为红色
下面来讲一个小东西childred
<script>
window.onload=function()
{
var oUl=document.getElementById('ul1');
alert(oUl.children.length)
</script>
Children也是来获取子节点的但是她不会算文本节点，但是很少用，不知道为什么，你们有印象就好。
（3） 父节点parentNode
例子把父元素隐藏
<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"
}
}
}
</script>
（4） offsetParent获取某个元素用来定位的父节，这个没什么可讲，直接用代码可以获取
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{background: red;width:200px;height:200px;position:absolute;margin:100px;}
#div2{background:#999;width:100px;height:100px;position:absolute;left:50px;top:50px;}
</style>
<script>
window.onload=function()
{
var oDiv2=document.getElementById('div2');
alert(oDiv2.offsetParent)
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
（5） 首尾节点（有兼容问题）
firstChild firstElementChild
lastChild lastElementChild
代码如下
<script>
window.onload=function()
{
var oUl=document.getElementById('ul1');
oUl.firstChild.style.background='red'
</script>
这个代码是第一个子节点颜色变红，但是你执行会报错，没错浏览器问题不兼容，你的第一个子节点是文本节点，然后就用到了firstElementChild,但是。。。这个也有兼容问题，然后咋办。。用if解决
<script>
window.onload=function()
{
var oUl=document.getElementById('ul1');
oUl.firstElementChild.style.background='red'
</script>
解决兼容问题
<script>
window.onload=function()
{
var oUl=document.getElementById('ul1');
//oUl.firstChild.style.background='red';
if(oUl.firstElementChild)
{
oUl.firstElementChild.style.background='red';
}else
{
oUl.firstChild.style.background='red';
}
</script>
二 元素属性操作
第一种 oDiv.style.display=’block’
第二种 oDiv.style[‘idsplay’]=’block’
第三种 Dom方式
DOM方式操作元素属性
1， 获取 getAttribute（名称）
2， 设置 setAttribute（名称，值）能用这个方法的时候都可以用上面的第二种方式
3， 删除 removeAttribute（名称）
例子代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
var te1=document.getElementById('text1');
var te2=document.getElementById('text2');
te2.onclick=function()
{
//te1.value='aaa'//第一种
//te1['value']='aaa'//第二种
te1.setAttribute('value','aaa');
}
}
</script>
</head>
<body>
<input id="text1" type="text" />
<input id="text2" type="button" value="按钮"/>
</body>
</html>
三 DOM元素灵活查找
（1） 用className条件筛选选择元素
例子
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
var oUl=document.getElementById('ul1');
varoLi=oUl.getElementsByTagName('li')
for(vari=0;i<oLi.length;i++)
{
if(oLi[i].className=='box')
{
oLi[i].style.background='red';
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li class="box">11</li>
<li>11</li>
<li class="box">11</li>
<li>11</li>
<li class="box">11</li>
</ul>
</body>
</html>
上面代码用className查找元素是元素属性变红
（2） 也可以用className封装成一个函数，然后方便以后直接调用
写法如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function getclass(name,box)
{
var aResult=[];
var a=name.getElementsByTagName('*')//因为不知道要选择什么元素所以写*号
for(var i=0;i<a.length;i++)
if(a[i].className=='box')
{
aResult.push(a[i]);
}
return aResult;
}
window.onload=function()
{
var oUl=document.getElementById('ul1');
var abox=getclass(oUl,'box')
for(var i=0;i<abox.length;i++)
{
abox[i].style.background='red'
}
}
</script>
</head>
<body>
<ul id="ul1">
<li class="box">11</li>
<li>11</li>
<li class="box">11</li>
<li>11</li>
<li class="box">11</li>
</ul>
</body>
</html>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
