dom就是document
兼容情况
-IE6~8 10%
-chrome 60%
-FF 99%
DOM节点
子节点
-childNodes 包含文本节点和元素节点 //IE6-8
abcde文本节点 <span>abcd元素节点</span>
-nodeType 返回节点类型
nodeType == 3 文本节点
nodeType == 1 元素节点
<script>
window.onload = function(){
var oUl=document.getElementById(‘ul1‘);
for(var i=0;i<aLi.length;i++){
if(oUl.childNodes[i].nodesType == 1){
oUl.childNodes[i].style.background = ‘red‘;
}
}
}
</script>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
</body>
-children 只包括元素，不包括文本
父节点
-parentNode
<script>
window.onload = function(){
var aA=document.getElementsByTagNaame(‘a‘);
for (var i=0;i<aA.length;i++){
aA[i].onclick = function(){
this.parentNode.style.display = ‘none‘;
}
}
}
</script>
<body>
<ul>
<li>111<a href="javascript">隐藏</a></li>
<li>222<a href="javascript">隐藏</a></li>
<li>333<a href="javascript">隐藏</a></li>
<li>444<a href="javascript">隐藏</a></li>
<li>555<a href="javascript">隐藏</a></li>
</ul>
</body>
-offsetPerent 获取元素在页面上的实际位置
-firstChild 获取第一个子节点 //IE6-8
-firstElementChild //chrome、FF
兼容问题解决
<script>
windows.onload = function(){
var oUl = document.getELementById(‘ul1‘);
if(oUl.firstElementChild){
oUl.firstElementChild.style.background = ‘red‘;
}
else(oUL.firstChild){
oUl.firstChild.style.background = ‘red‘;
}
}
</script>
<body>
<ul id = "ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<ul>
</body>
元素属性操作
-getAttribute(名称) 获取
-setAttribute(名称,值) 设置
-removeAttribue(名称) 删除
用className获取元素
<script>
function getByClass(oParent,sClass){
var aEle = oParent.getElementsByTagName(‘*‘);
var aResult = [];
for(var 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‘);
for(var i=0;i<aBox.length;i++){
aBox[i].style.background = ‘red‘;
}
}
</script>
</head>
<body>
<ul id="ul1">
<li class="box">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="box">1</li>
<li class="box">1</li>
<li class="box">1</li>
</ul>
</body>
时间： 2024-08-08 21:55:07