码迷,mamicode.com
首页 > Web开发 > 详细

js中dom基础及操作dom

时间:2018-10-25 22:40:41      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:hid   ntb   ul li   父节点   内容   长度   height   load   width   

dom基础认识

  1.dom节点

  1)children,获取的是所有的孩子节点,获取的是数组

  2)parentNode,获取的是父节点,获取的是对象

  2.dom操作方法

  1)appendChild(),把节点添加到父节点后面,添加的节点是排在最后

  2)insertBefore(),把节点添加到父节点的哪个位置之前

  3)removeChild(),删除节点

下面一一通过代码来讲解,更加容易理解它们的含义

<html>

<head>
<title></title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #tab{
            margin-left:-3px;
            float:left;
            width:60px;
            //height:20px;
            background:#ccc;
            text-align:center;
        }
        #tab #div-tab{
            
            
            border:1px solid #999;
        }
        #tab ul{
            
            overflow:hidden;
            background:blue;
            
        }
        #tab ul li{
            list-style:none;
        }
    
    </style>
    <script>
        window.onload=function(){
            var oTab=document.getElementById(‘tab‘)   //获取对象
            var oUl=document.getElementsByTagName(‘ul‘)[0];//获取ul标签对象
            var oLl=document.getElementsByTagName(‘li‘)[0];//获取第一个li对象
            alert(oUl.children.length)  //获取到ul下孩子节点li,弹出数组的长度为4
            alert(typeof oLl.parentNode) //获取到li父节点ul,弹出的是object,对象
            oLi=document.createElement(‘li‘) //创建li节点
            var node=document.createTextNode("5");//创建节点内容
            oLi.appendChild(node)    //把内容添加到li节点
            oUl.appendChild(oLi)    //再把创建的li节点,添加到ul下,默认排在最后
            oDiv=document.createElement(‘div‘) //创建div节点
            var node1=document.createTextNode("tab2"); //创建节点内容
            oDiv.appendChild(node1)   //把内容添加到新建的div节点
            oTab.insertBefore(oDiv,oUl) //把创建的div添加到tab下,位置在ul之前
            //oTab.removeChild(oDiv)        //删除新建的div节点
        }
        
    </script>
<body>
    <div id="tab">
        <div id="div-tab">tab1</div>
        <ul >
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>

</html>

效果图

技术分享图片

 

js中dom基础及操作dom

标签:hid   ntb   ul li   父节点   内容   长度   height   load   width   

原文地址:https://www.cnblogs.com/superCwen/p/9853329.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!