DOM

最新推荐文章于 2025-09-09 16:55:30 发布

转载最新推荐文章于 2025-09-09 16:55:30 发布 · 70 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/automation/p/3416385.html

文章标签：

#javascript #ViewUI

1.创建Li

<input id="btn1" type="button" value="创建Li"/>
<ul id="ul1">
    <li>aaa</li>
</ul>
JS代码：

window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oUl=document.getElementById('ul1');
    
    oBtn.onclick=function ()
    {
        var oLi=document.createElement('li');
        
        //父.appendChild(子节点)
        oUl.appendChild(oLi);
    }
}

1.2动态创建Li,并把文本框的值当做Li的值

HTML部分为：

<input id="txt1" type="text" />
<input id="btn1" type="button" value="创建Li"/>
<ul id="ul1">
    <li>aaa</li>
</ul>

JS代码为：

window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oTxt=document.getElementById('txt1');
    var oUl=document.getElementById('ul1');
    
    oBtn.onclick=function ()
    {
        var oLi=document.createElement('li');
        
        oLi.innerHTML=oTxt.value;
        
        //父.appendChild(子节点)
        oUl.appendChild(oLi);
    }
}

这里我们新插入的是放在了最后，怎么样放在最前面了

var oBtn=document.getElementById('btn1');
    var oTxt=document.getElementById('txt1');
    var oUl=document.getElementById('ul1');
    
    oBtn.onclick=function ()
    {
        var oLi=document.createElement('li');
        var aLi=oUl.getElementsByTagName('li');
        
        oLi.innerHTML=oTxt.value;
        
        oUl.insertBefore(oLi, aLi[0]);
    }

这样写有一个问题:如果以开始并没有Li就会报错，我们需要判断下

oBtn.onclick=function ()
    {
        var oLi=document.createElement('li');
        var aLi=oUl.getElementsByTagName('li');
        
        oLi.innerHTML=oTxt.value;
        
        if(aLi.length==0)
        {
            oUl.appendChild(oLi);
        }
        else
        {
            oUl.insertBefore(oLi, aLi[0]);
        }
    }

2.删除元素

<ul id="ul1">
    <li>sdfsdf <a href="javascript:;">删除</a></li>
    <li>3432 <a href="javascript:;">删除</a></li>
    <li>tttt <a href="javascript:;">删除</a></li>
    <li>ww <a href="javascript:;">删除</a></li>
</ul>

JS部分为：

var aA=document.getElementsByTagName('a');
    var oUl=document.getElementById('ul1');
    var i=0;
    
    for(i=0;i<aA.length;i++)
    {
        aA[i].onclick=function ()
        {
            oUl.removeChild(this.parentNode);
        }
    }

点击删除对应的LI就会被删除

2.ChildNodes和NodeType

<ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
</ul>

js部分：

var oUL = document.getElementById("ul1");
alert(oUL.childNodes.length);

可见在谷歌下面弹出长度为7，在IE较低版本中弹出来的却是3

我们将htm改为

<ul id="ul1"><li></li><li></li><li></li></ul>

这样弹出来的长度都是为3，可见那些空白文本也加进去了。

所以我们使用需要加上NodeType来使用

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';
        }
    }
常见的NodeType

语法:
elementNode.nodeType
 

节点数： 节点名称：
1         Element | 元素
2         Attribute | 属性
3         Text | 文本
4         CDATA Section | CDATA  断
5         Entity Reference | 实体参数
6         Entity | 实体
7         Processing Instrucion | 处理指令
8         Comment | 注释
9         Document | 文档
10        Document Type | 文档类型
11        Document Fragment | 文档片断
12        Notation | 符号

3.children

html部分不变，JS为：

 var oUL = document.getElementById("ul1");

    alert(oUL.children.length);

可见弹出的都是3.可以认为这个是上面的一个兼容性版本，用来取第一层的子节点。

4.parentNode

HTML部分为：

<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>

JS部分为：

var aA=document.getElementsByTagName('a');
    var i=0;
    
    for(i=0;i<aA.length;i++)
    {
        aA[i].onclick=function ()
        {
            this.parentNode.style.display='none';
        }
    }

点击隐藏，对应的父节点LI隐藏。

5.offsetParent

获得当前元素用来定位的那个父级

html:

<body>
    <div id="div1" style="width: 100px; height: 100px; background: red; margin: 100px;">
        <div onclick="alert(this.offsetParent.tagName)" id="div2" style="width:100px; height:100px; background:yellow; position:absolute; left:100px; top:100px;"></div>
    </div>
</body>

由于父级的DIV是相对定位，所以会弹出DIV

如果去掉position:relative，会一级级的网上找，找到BODY

6.firstElementChild和firstChild

<ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

在IE只支持firstchild，谷歌支持firstElementChild，所以我们要做兼容性模式

var oFirst = oul.firstElementChild || oul.firstChild;
oFirst.style.background = 'red';

可见第一个LI背景色变为红色

7.lastElementChild和lastChild

和上面的用法一样，最后一行LI变红色。

8.nextElementSibling和nextSibling;

用法同上，也是个兼容的两个属性，获取元素下一个节点。

9.previousElementSibling 和previousSibling;

获取元素的上一个节点

10.操作元素属性:getAttribute,setAttribute,removeAttribute

获取：getAttribute（名称）

设置：setAttribute（名称，值）

删除：removeAttribute（名称）

HTML:

<input type="text" id="txt1" />

var text = document.getElementById("txt1");
  alert(text.getAttribute('id'));
  text.setAttribute("value", "爸爸去哪儿");
  text.removeAttribute("value");

removeAttribute清空文本框

11.用CLASS选取元素

htm：

<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>

JS：

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';
        }
    }

这样有CLASS为box的LI会显示红色

我们可以做一个小小的封装

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';
    }
}