JS基础 元素的 DOM 操作

 

对元素的操作

1、定位 

      var a = document.getElementByIt( "id" )

2、同辈元素 

　　var b = a.nextSibling;            // 找 a 的下一个同辈元素， 

　　var b = a.previousSibling;    // 找 a 的上一个同辈元素，

<html >
<head>
    <title></title> 
   <style type ="text/css">
        .div1{
            width:100px;
            height:100px;
            background-color:red;
            margin-right:10px;
            font-size:35px;
            color:white;   
            float:left ;           
        }
    </style> 
</head>
<body> 
 <div class="div1">1</div><div class="div1" id="div2">2</div><div class="div1">3</div>  
</body>
</html> 
<script type="text/javascript" >
    var odiv2 = document.getElementById("div2");
    odiv2.onclick = function () {
        alert(odiv2.previousSibling.innerText);
    } 
</script>

 

中间隔一个取上一个

　　odiv2.previousSibling.previousSibling.innerText

　　空格和换行也算一个元素，不管多少空格都算一个，不管多少换行都算一个

<html >
<head>
    <title></title> 
    <style type="text/css">
        .div1 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-right: 10px;
            font-size: 35px;
            color: white;
            float: left;
        }
    </style> 
</head>
<body> 
    <div class="div1">1</div>
    <div class="div1" id="div2">2</div>
    <div class="div1">3</div>
    <div class="div1">4</div> 
</body>
</html> 
<script type="text/javascript">
    var odiv2 = document.getElementById("div2");
    odiv2.onclick = function () {
        alert(odiv2.nextSibling.nextSibling.nextSibling.nextSibling.innerText);
    } 
</script>

 

制作一个下拉菜单（仿qq）

<html >
<head>
        <title></title>
    <style type="text/css">
        .div1 {
            width: 100px;
            height: 30px;
            border: 2px solid black;
            margin-top: 2px;
            background-color: blue;
            text-align: center;
            line-height: 30px;
        } 
        .div2 {
            width: 100px;
            height: 150px;
            border: 2px solid black;
            display: none;           // 隐藏菜单不留位置
        }
    </style> 
</head>
<body> 
    <div class="div1">好友</div>
    <div class="div2"></div>
    <div class="div1">家人</div>
    <div class="div2"></div>
    <div class="div1">同学</div>
    <div class="div2"></div>
    <div class="div1">二货</div>
    <div class="div2"></div>
    <div class="div1">陌生人</div>
    <div class="div2"></div> 
</body>
</html> 
<script type="text/javascript">
    var odiv1 = document.getElementsByClassName("div1");
    for (var i = 0; i < odiv1.length; i++) {
        odiv1[i].onclick = function () {
                                                               //关上下拉菜单
            if (this.nextSibling.nextSibling.style.display != "none") {
                this.nextSibling.nextSibling.style.display = "none";
            }
            else {
                for (var j = 0; j < odiv1.length; j++) {       //一次只能打开一个下拉菜单
                    odiv1[j].nextSibling.nextSibling.style.display = "none"
                }
                this.nextSibling.nextSibling.style.display = "block"
            }                                                  //打开下拉菜单
        }
    } 
</script>

 

效果图

3、父级 、子集元素

　　var b = a.parentNodes;     // 找 a 的上一级父级元素

　　var b = a.childNodes;        // 找出 a 的下一级子元素， 是一个数组

var b = a.childNodes;                  //第一个子元素

var b = a.lastChild;                   //最后一个

var b = a.childNodes[ n ]              //找第n个子元素

alert( nodes)[ i ] instanceof Text );  //判断是不是文本，是 true  不是 flase。

 

 4、创建添加元素

var  obj  =  document.createElement( "标签名" )    //  动态创建一个 Dom对象，创建一个元素。

var  obj  =  document.createElement( "div" )
 
a.appendChild( obj )      //向 a 中添加一个元素，添加在末尾

a.removeChild( obj )      //删除一个子元素。

 

posted @ 2017-04-02 01:20  唐宏昌  阅读(265)  评论(0)    收藏  举报