为什么el.innerHTML能直接获取到"赞"？-慕课网

首页课程实战体系课手记专栏慕课教程

为什么el.innerHTML能直接获取到"赞"？

来源：4-1 使用JS实现分享点赞功能

12只怕有心人

2016-12-21 17:32

<!DOCTYPE html>

<html>

<head>

body { font-size: 12px; line-height: 120%; text-align: center; color:#333; padding: 20px;}

li { list-style: none}

a { color: #333; text-decoration: none;}

a:hover { text-decoration: underline;}

* { margin: 0; padding: 0; border: none;}

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden}

.clearfix { *height:1%;}

#list { margin: 0 auto; text-align: left; width: 540px;}

.box { border-top: 1px solid #eee; position: relative; width: 540px; padding: 20px 0}

.box:hover .close { display: block;}

.close { display: none; top:0px; right: 0px; width: 28px; height: 28px; border: 1px solid #eee; position: absolute; background: #f2f4f7; line-height: 27px; text-align: center;}

.close:hover { background: #c8d2e2; text-decoration: none;}

.head { float: left; width: 60px; height: 60px; margin-right: 10px;}

.content { float: left; width: 440px;}

.main { margin-bottom: 10px;}

.txt { margin-bottom: 10px;}

.user { color: #369; }

.pic { margin-right: 5px; width: 200px; border: 1px solid #eee;}

.info { height: 20px; line-height: 19px; font-size: 12px; margin: 0 0 10px 0;}

.info .time { color: #ccc; float: left; height: 20px; padding-left: 20px; background: url("images/bg1.jpg") no-repeat left top;}

.info .praise { color: #369; float: right; height: 20px; padding-left: 18px; background: url("images/bg2.jpg") no-repeat left top;}

.info .praise:hover { text-decoration: underline; background: url("images/bg3.jpg") no-repeat left top;}

.praises-total { margin: 0 0 10px 0; height: 20px; background: url("images/praise.png") no-repeat 5px 5px rgb(247, 247, 247); padding: 5px 0 5px 25px; line-height: 19px;}

.comment-box { padding: 10px 0; border-top: 1px solid #eee;}

.comment-box:hover { background: rgb(247, 247, 247);}

.comment-box .myhead { float: left; width: 30px; height: 30px; margin-right: 10px;}

.comment-box .comment-content { float: left; width: 400px; }

.comment-box .comment-content .comment-time { color: #ccc; margin-top: 3px; line-height: 16px; position: relative;}

.comment-box .comment-content .comment-praise { display: none; color: #369; padding-left: 17px; height: 20px; background: url("images/praise.png") no-repeat; position: absolute; bottom: 0px; right: 44px;}

.comment-box .comment-content .comment-operate { display: none; color: #369; height: 20px; position: absolute; bottom: 0px; right: 10px;}

.comment-box .comment-content:hover .comment-praise { display: inline-block;}

.comment-box .comment-content:hover .comment-operate { display: inline-block;}

.text-box .comment { border: 1px solid #eee; display: block; height: 15px; width: 428px; padding: 5px; resize: none; color: #ccc}

.text-box .btn { font-size: 12px; font-weight: bold; display: none; float: right; width: 65px; height: 25px; border: 1px solid #0C528D; color: #fff; background: #4679AC;}

.text-box .btn-off { border: 1px solid #ccc; color: #ccc; background: #F7F7F7;}

.text-box .word{ display: none; float: right; margin: 7px 10px 0 0; color: #666;}

.text-box-on .comment{ height: 50px; color: #333;}

.text-box-on .btn{ display: inline;}

.text-box-on .word{ display: inline;}

</style>

window.onload= function () {

var list = document.getElementById('list');

var lis = list.children;

var timer;

//定义删除节点函数

// A.5.2.点击关闭按钮则触发函数removeNode.获取节点的父节点再删除节点本身

function removeNode(node){

node.parentNode.removeChild(node);

}

// B.3.赞分享

// box即整个li

function praiseBox(box,el){

// 在整个li中获取当前总赞praises-total

var praiseElement = box.getElementsByClassName("praises-total")[0];

// B.3.1.praises-total中已有的点赞数

var oldTotal = parseInt(praiseElement.getAttribute("total"));

// B.3.2.在

var txt = el.innerHTML;

document.write(txt); //为什么直接弹出“赞” 而不是其他的文本？

}

// A.1.循环遍历每个li,并添加onclick事件

for(var i = 0; i<lis.length; i++){

lis[i].onclick = function(e){

// A.2.兼容ie下也能获取事件对象

e = e || window.event;

// A.3.用一个变量来存储触发元素

var el = e.srcElement;

//alert(el);此时的a的srcElement是href中的javascript:;

// A.4.获取a标签,判断类名

switch(el.className){

case "close":

// A.5.1.如果关闭钮被点击则触发删除节点函数

removeNode(el.parentNode);

break;

// B.1.赞分享.如果a的类名是praise

case "praise":

// B.2.通过a(点赞)获取当前整个li

praiseBox(el.parentNode.parentNode.parentNode,el);

break;

}

</script>

</head>

<body>

<span class="user">Andy：</span>轻轻的我走了，正如我轻轻的来；我轻轻的招手，作别西天的云彩。

</p>

</div>

</div>

<div class="praises-total" total="4" style="display: block;">4个人觉得很赞</div>

<p class="comment-text"><span class="user">我：</span>写的太好了。</p>

2014-02-19 14:36

</p>

</div>

</li>

</ul>

</div>

</li>

<span class="user">人在旅途：</span>三亚的海滩很漂亮。

</p>

</div>

</div>

<p class="comment-text"><span class="user">老鹰：</span>我也想去三亚。</p>

2014-02-19 14:36

</p>

</div>

</li>

</ul>

</div>

</li>

<span class="user">小Y：</span>英国艺术家 Jane Perkins 能利用很多不起眼的东西进行创作，甚至是垃圾。首饰、纽扣、玩具等等都可以作为他创作的工具并创作出惟妙惟肖的画作，丝毫不逊色于色彩丰富的颜料。

</p>

</div>

</div>

</ul>

</div>

</li>

</ul>

</body>

</html>

写回答关注

1回答

玉鸯子

2016-12-21 21:58:08

在获取或设置的内容没有HTML标签只有文本的情况下.用innerText和innerHTML 写入和获取文本的效果是一样的

0 0

人人网评论功能

仿人人网评论，让你的网页活跃起来，赶快来学习让功能的实现吧

27694 学习 · 147 问题

查看课程

相似问题

为嘛不能用狐火点赞

回答 1

为什么不直接调用remove()

回答 2

赞分享的这一块，为什么要一直寻找父节点三次，参数为什么是这两个

回答 1

点赞功能代码提问

回答 2

为什么获取回复框的时候要写getElementsByTagName('textarea')[0]?最后的那个[0]是什么意思？还有这样的话获取到的不应该算是个数组吗？

回答 1

打开慕课网App查看更多内容