学习任务

    1.了解节点的层级

    2.熟悉对节点的常见操作

    3.实现发表评论(留言)效果

观看视频

课件下载

  《节点操作》课件

内容概要

1.节点层级

（1）父节点（parentNode）、子元素节点（children）、

（2）示例：

        obj.children[0]                   // 获取第一个子元素节点

        obj.children[obj.children.length - 1           //获取最后一个子元素节点

2.节点操作

（1）创建元素节点     createElement(tagName)   //创建一个标签名为tagName的新节点元素

（2）追加元素节点    父.appendChild（子）        //把子节点追加至父元素节点的末尾

（3）插入元素节点    父.insertBefore（A，B）     //把A节点插入到B节点之前

（4）克隆节点          cloneNode（true）            //复制某个指定的节点，参数为true，深度克隆

（5）删除节点          removeChild( node)            //删除指定的节点

（6）替换节点          replaceChild(new, oldNode)  //用其他的节点替换指定的节点

3.实例-发表评论

  编程思路：

（1）如果内容为空，直接返回

（2）如果内容不为空，创建<li>元素节点，获取输入的内容赋值给刚创建的<li>节点，然后使用insertBefore()插入到第一个子元素前面；还需要生成“删除”超链接，点击“删除”时，使用removeChild( this.parent) 删除<li>节点

参考代码

1.“发表评论”的HTML代码（点击查看）

2.“发表评论”的javascript代码（点击查看）

3.“发表评论”的CSS代码（可直接复制）

<style type="text/css">

* {

padding: 0;

margin: 0;

}

#comment {

width: 600px;

margin: 10px auto;

}

#txt {

width: 100%;

height: 90px;

overflow: auto;

outline: none;

}

div.fr {

overflow: hidden;

margin-bottom: 20px;

}

#btn {

width: 80px;

height: 30px;

float: right;

}

li {

list-style: none;

margin-bottom: 1rem;

min-height: 60px;

word-break: break-all;

}

li a {

float: right;

text-decoration: none;

}

</style>