DOM(二)节点操作

目录

关于节点 

获取节点

案例一:下拉菜单(模仿安居客导航)

创建和删除节点

案例二:留言板

案例三:动态生成表格和输入生成表格


关于节点 

网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。HTML DOM 树中的所有节点均可通过 JavaScript 进行访问,所有 HTML 元素(节点)均可被修改,也可以创建或删除。

节点至少拥有三个属性:nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值),元素节点:nodeType:1,属性节点:nodeType:2,文本节点:nodeType:3。

获取节点

node.parentNode 返回某节点的父节点,返回最近一个父节点,如果没有父节点返回null

node.childNodes 返回包含指定节点的子节点的集合,返回所有子节点,包括文本节点,元素节点

node.children 只返回所有的子元素节点,其余节点不返回

firstChild 返回第一个子节点,找不到返回null,包含所有节点

lastChild 返回最后一个子节点,找不到返回null,包含所有节点

firstElementChild 返回第一个子元素节点,找不到返回null

lastElementChild 返回最后一个子元素节点,找不到返回null

nextSibling 获取下一个兄弟节点,包含元素节点和文本节点等等

nextElementSibling 获取下一个兄弟元素节点


案例一:下拉菜单(模仿安居客导航)

    <style>
        *{
            margin: 0;padding: 0;
        }
        .box{
            width: 1000px;
            display: flex;
            position: relative;
            left: 100px; top: 30px;
            background-color: rgb(44, 186, 39);
        }
        a{
            text-decoration: none;
            display: block;
        }
        .nav>a{
            color: #ffffff; 
            text-align: center;
            height: 40px; line-height: 40px;
            font-size: 18px;
            padding: 0 20px;
            position: relative;
        }
        .nav>div{
            border: 1px solid #959595 ;
            border-top: 0px;
            background-color: #eeeeee;
            position: absolute;
            padding: 0 10px 15px;
            display: none;
        }
        .nav>div>a{
            margin-top: 15px;
            padding: 0 15px 0 10px;
        }
        .nav:hover.nav>a::before{
            content: '';
            display: block;
            width: 14px; height: 10px;
            background: url(img/navigation.png) 0 -224px no-repeat;
            position:absolute;
            left: 42%;
            bottom: -5px;
        }
        .nav>div>div{
            padding: 0 10px;
            float: left;
        }
        .nav>div>div>a{
            margin-top: 16px;
        }
        .nav>div>div>a:hover{
            color: rgb(241, 147, 74);
        }
        .nav>div>a:hover{
            color: rgb(241, 147, 74);
        }
        .nav>div>.ditu{
            border-top: 1px solid #959595 ;
                padding:15px 15px 0 10px ;
        }
        .nav>.hover{
            background-color: rgb(66, 123, 74);
        }
    </style>
    <div class="box">
        <div class="nav">
            <a>新 房</a>
            <div>
                <a >新盘</a>
                <a >楼讯</a>
                <a >热门活动</a>
                <a >看房团</a>
                <a >房源</a>
                <a >商业产地</a>
                <a >海外产地</a>
            </div>
        </div>
        <div class="nav">
            <a>二手房</a>
            <div>
                <a >房源</a>
                <a >小区</a>
                <a class="ditu">地图找房</a>
                <a >主题找房</a>
                <a >找经纪人</a>
                <a>优秀经纪人榜</a>
            </div>
        </div>
        <div class="nav">
            <a>租 房</a>
            <div>
                <a >区域找房</a>
                <a >地铁找房</a>
                <a class="ditu">地图找房</a>
                <a >小区</a>
                <a >民宿短租</a>
            </div>
        </div>
        <div class="nav">
            <a>商铺写字楼</a>
            <div>
                <div>
                    <a>商铺</a>
                    <a>商铺出租</a>
                    <a>商铺出售</a>
                    <a>商铺新盘</a>
                </div>
                <div>
                    <a>写字楼</a>
                    <a>写字楼出租</a>
                    <a>写字楼出售</a>
                    <a>写字楼新盘</a>
                    <a>办公楼盘</a>
                </div>
                <div>
                    <a>厂房</a>
                    <a>厂房出租</a>
                    <a>厂房出售</a>
                    <a>厂房转让</a>
                </div>
                <div>
                    <a>厂房</a>
                    <a>厂房出租</a>
                    <a>厂房出售</a>
                    <a>厂房转让</a>
                </div>
                <div>
                    <a>厂房</a>
                    <a>厂房出租</a>
                    <a>厂房出售</a>
                    <a>厂房转让</a>
                </div>
            </div>
        </div>
    </div>
    <script>
        var nav = document.querySelectorAll('.nav');
        for(var i = 0; i < nav.length; i++) {
            nav[i].onmouseover = function() {
                this.children[0].className = 'hover';
                this.children[1].style.display = 'block';
            }
            nav[i].onmouseout = function() {
                this.children[0].className = '';
                this.children[1].style.display = 'none';
            }
        }
    </script>


创建和删除节点

document.createElement(‘tagName’) 创建指定的HTML元素

<ul></ul>
<script>
		  var li  = document.createElement("li");//先创建节点
		  var ul = document.querySelector("ul");
		  ul.appendChild(li);//在添加节点到指定元素的末尾
		  li.innerHTML="123";

          lili = document.createElement('li');
		  ul.insertBefore(lili, ul.children[0]);//添加一个元素在指定子元素之前
</script>

node.removeChild() 方法从 node节点中删除一个子节点,返回删除的节点

    <input type="button" name="" value="删除节点"/>
	<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
	</ul>
		
	<script>
			var btn  = document.querySelector("input");
			var ul   = document.querySelector("ul");
			btn.onclick = function(){
				if(ul.children.length==0){
					this.disabled = true;
				}else{
					ul.removeChild(ul.children[0]);
				} 
			}
	</script>

案例二:留言板

    <style>
        .txt{
            width: 300px;
            height: 200px;
            border: 1px solid black;
            
        }
        li{
            background-color: antiquewhite;
            margin-top: 10px;
            width: 500px;
        }
        span{
            float: right;
        }
        a{
            float: right;
            padding-left: 10px;
        }
    </style>
    <textarea cols="30" rows="10" class="txt"></textarea>
    <button>发布</button>
    <ul class="lis">
    </ul>
    
    <script>
        function nowTime() {
            var time = new Date();
            var year = time.getFullYear();
            var month = time.getMonth()+1;
            var day = time.getDate();
            var h = time.getHours();
            var m = time.getMinutes();
            var s = time.getSeconds();
            return year+'/'+month+'/'+day+'/'+h+':'+m;
        }
        
        var txt = document.querySelector('.txt');
        var lis = document.querySelector('.lis');
        var btn = document.querySelector('button');
        btn.onclick = function() {
            var now = nowTime();
            if(txt.value.trim() == ''){
                alert('输入内容不能为空');
            } else {
                var li = document.createElement('li');
                lis.insertBefore(li,lis.children[0]);
                li.innerHTML = txt.value + '<a href="javascript:;">删除</a>' + '<span>'+now+'</span>';
            }
            var del = document.querySelectorAll('a');
            for(var i = 0; i < del.length; i++) {
            del[i].onclick = function() {
                lis.removeChild(this.parentNode);
            }
        }
        }
        

    </script>

案例三:动态生成表格和输入生成表格

动态生成表格

   
   <style>
        table{
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        thead{
            background-color: #ccc;
        }
        th,td{
            border: 1px solid #666;
        }
        tr{
            height: 40px;
        }
    </style>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <script>
        function Students(name,subject,grade){
            this.uname = name;
            this.subject = subject;
            this.grade = grade;
        }
        var stu1 = new Students('李一','javascript','40');
        var stu2 = new Students('李二','javascript','60');
        var stu3 = new Students('李三','javascript','80');
        var stu4 = new Students('李四','javascript','100');
        var stus = [stu1,stu2,stu3,stu4];
        var tbody = document.querySelector('tbody');

        //动态生成表格
        for(var i = 0; i < stus.length; i++) {
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            for(var k in stus[i]) {
                var td = document.createElement('td');
                tr.appendChild(td);
                td.innerText = stus[i][k];
            }
            var td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = '<a href="javascript:;">删除</a>';
        }
        var del = document.querySelectorAll('a');
        for(var i = 0; i < del.length; i++) {
            del[i].onclick = function() {
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
    </script>

按键输入生成表格 

    <-- 表格样式代码同上 -->
    <style>
        button{
            position: absolute;
            right: 400px;
        }
    </style>
    <button>添加信息</button>
    <script>
        function Students(name,subject,grade){
            this.uname = name;
            this.subject = subject;
            this.grade = grade;
        }

        function info(){
            var uname = prompt('输入姓名');
            var subject = prompt('输入科目');
            var grade = prompt('输入成绩');
            var stu = new Students(uname,subject,grade);
            return stu;
        }

        var tbody = document.querySelector('tbody');

        // 按键生成表格
        var btn = document.querySelector('button');
        btn.onclick = function() {
            var stu = info();
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            for(var k in stu) {
                var td = document.createElement('td');
                td.innerText = stu[k];
                tr.appendChild(td);  
            }
            var td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = '<a href="javascript:;">删除</a>';
            var del = document.querySelectorAll('a');
            for(var i = 0; i < del.length; i++) {
            del[i].onclick = function() {
                tbody.removeChild(this.parentNode.parentNode);
            }
            }
        }
        
    </script>

  • 6
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值