发布

兼容性 。

元素没有子节点,ie低版本会读取不到,而标准浏览器会。

因为标准浏览器会把文本节点当作子节点,而ie6-8不会。

超链接a的属性href分析

<a href=””> 点击会刷新页面,相当于向后台发送一次请求。

<a href=”#s”> 锚点跳转 跳转到某一个id叫s的位置上

<a href=”javascript:;”> 取消刷新页面的功能

 

拓展

字符串拼接和Dom创建都是渲染的方式

字符串拼接

优点 简单,层次感强,可以处理大量数据

缺点:字符串拼接会影响到原有子元素的事件

 

Dom创建

优点:是一个独立的个体,不会影响到原有的元素

缺点:处理数据量过大会比较麻烦,会造成DOM回流。

Dom回流

页面渲染时,我们对html结构简单的增删查改时,浏览器会对所有的dom进行重新排列,这就是Dom回流,严重影响浏览器的性能。

window.onload=function(){
// 文档加载完成之后才执行

var textareas=document.getElementById("textarea");
var arc=document.getElementById("arc")
var btn=document.getElementById("btn")

btn.onclick=function(){
var st="";
var val=textareas.value;
var li=document.createElement("li")
st+="<div>"
st+="<img src='9.jpg'/>"
st+="<h3>"
st+="No-problem"
st+="</h3>"
st+="<p>"
st+="来自于20秒前"
st+="</p>"
st+="</div>"
st+="<div>"
st+=val
st+="</div>"
li.innerHTML=st;
var a=document.createElement("a");
a.href="javascript:;"
a.innerHTML="删除"
a.onclick=function(){
arc.removeChild(this.parentNode)
}
li.appendChild(a)

if(arc.children[0]){
arc.insertBefore(li,arc.children[0])
}else{
arc.appendChild(li)

posted @ 2018-11-15 19:49  前端开创者123  阅读(189)  评论(0编辑  收藏  举报