JS加强学习-DOM学习05

蓝咒 提交于 2020-03-21 09:58:36

7.6 移除节点   removeChild()

是将父元素中的某个子节点移除掉;这个为彻底移除。

7.7 插入节点   insertBefore

不同于appendChild(),appendChild()为将指定的元素剪切至对象所有子元素的最后。而insertBefore(,)是将指定的元素插入到某个位置之前,第一个参数为指定的元素,第二个参数为父元素中某个子元素的位置,指定元素会插入到第二个参数位置之前。

8. JS设置样式

8.1 JS设置样式的两种方式

style:逐条获取样式属性,逐条改变对应样式。

className:只能获取页面通过style设置的类名,无法获取外联式引入的。

当然我们需要改变的样式较少时可以直接通过style的方式改变,可是如果样式较多就可以先在页面style标签中取个类名将所有的样式放在这个类名下,然后使用className的方法来调用这个类名。

8.2 JS设置样式时常有的style属性:

backgroundColor:设置背景颜色

backgroundImage:设置背景图片

color:设置字体颜色

width:设置元素宽度

height:设置元素高度

border:设置元素边框

opacity:透明度设置取值范围为0-1,IE8及以前版本的只支持filter:alpha(opacity=XX);XX为0-100之间的值。

总结:由于JS中不识别“-”,原标签style中的属性名在JS中都需要将“-”去掉后使用。

9. 动态创建元素

9.1 document.write()

document文档流中,浏览器默认的加载顺序是从上往下依次加载,等将页面加载完毕后就会将文档流关闭。

而当触发了函数中document.write()时会重新打开文档流,这样就会将文档中原有加载完的元素全部清除后再进行加载新的文档流内容。所以document.write()尽量少用或者不用。

9.2 innerHTML

innerHTML是通过赋值的方式给元素创建内容的,内容中如果有其他元素的话会完全按照HTML中的形式展现出来。

但是如果是将字符串赋值的话要注意字符串的特性,字符串具有不可变性,再遇到重复赋值的时候字符串也会在内存空间重复赋值,极大的影响了程序的运行速度。 

以上问题如果通过数组形式就可以很好的解决,具体实现方式:在重复字符串创建时,就通过将新创建的字符串放在一个数组中,最后将整个数组重新转换为字符串来赋值给innerHTML。

9.3 document.createElement

var ul = document.createElement("ul"); //创建一对标签,但是这对标签还是存储在内存中,需要通过追加或者其他方式来将创建的标准放在目标元素中。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!