Dom基础1
2018-03-30 本文已影响0人
Monee121
DOM基础
- DOM简介、DOM标准、DOM节点
- 获取元素的子节点：childNodes、兼容性问题
火狐不兼容，可以配合nodeType使用；nodeType=1元素节点
ul的子元素变红色；获取ul的子元素li，并且nodetype=1是元素节点
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var i=0;
for(i=0;i<oUl.childNodes.length;i++)
{
if(oUl.childNodes[i].nodeType==1)
{
oUl.childNodes[i].style.background='red';
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
</ul>
</body>
- 节点类型：nodeType、文本节点、元素节点
- children的使用
children是childNodes的兼容版，获取子节点可以用这个
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
alert(oUl.children.length);
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
</ul>
</body>
- 获取元素父节点parentNode
点击隐藏把li隐藏
<script type="text/javascript">
window.onload=function ()
{
var aA=document.getElementsByTagName('a');
var i=0;
for(i=0;i<aA.length;i++)
{
aA[i].onclick=function ()
{
this.parentNode.style.display='none';
}
}
}
</script>
</head>
<body>
<ul>
<li>aass <a href="javascript:;">隐藏</a></li>
<li>5453 <a href="javascript:;">隐藏</a></li>
<li>cvxc <a href="javascript:;">隐藏</a></li>
<li>ertert <a href="javascript:;">隐藏</a></li>
</ul>
</body>
- 获取定位元素的父节点offsetParent
onclick="alert(this.offsetParent.tagName)" 寻找当前元素定位的东西 - 获取首尾子元素：firstChild、firstElementChild、lastChild、lastElementChild
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
//IE
//oUl.firstChild.style.background='red';
//FF
//oUl.firstElementChild.style.background='red';
var oFirst=oUl.firstElementChild||oUl.firstChild;
oFirst.style.background='red';
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
- 获取兄弟节点：nextSibling、nextElemnetSibling、previousSibling、previousElementSibling
同上 - 元素属性操作：“.”与“[]”回顾、setAttribute、getAttribute、removeAttribute
<script type="text/javascript">
window.onload=function ()
{
var oTxt=document.getElementById('txt1');
//1
//oTxt.value='123';
//2
//oTxt['value']='abc';
//3
//oTxt.setAttribute('value', 'rtertw');
alert(oTxt.getAttribute('id'));
}
</script>
</head>
<body>
<input type="text" id="txt1"/>
</body>
- 通过className获取元素、封装getByClass函数
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var i=0;
for(i=0;i<aLi.length;i++)
{
if(aLi[i].className=='box')
{
aLi[i].style.background='red';
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
封装函数
<script type="text/javascript">
function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
var i=0;
for(i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
}
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var aBox=getByClass(oUl, 'box');
var i=0;
for(i=0;i<aBox.length;i++)
{
aBox[i].style.background='yellow';
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
