您的位置：首页 > Web前端 > JavaScript

[javascript]DOM基础

2015-11-25 10:55 573 查看

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>

创建元素

-createElement 创建一个元素 //创建完的元素存在内存里不显示出来所以需要一个appendChild来显示内容

-appendChild

<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');

oBtn.onclick = function(){
var oLi = document.createElement('li');

oUl.appendChild(oLi);
}
}
</script>
</head>

<body>
<input id="btn1" type="button" value="创建" />
<ul id="ul1" >
</ul>
</body>

插入元素

-insertBefore //父级.insertBefore(节点，原有节点)

由于IE兼容性问题需要在这里做一个判断

if(aLi.length>0){
oUl.insertBefore(oLi,aLi[0]);
}
else{
oUl.appendChild(oLi); //如果没有元素 先创建一个元素
}

删除元素

-removeChild

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航