DOM基础操作(三)

时间:2023-12-21 20:31:20

DOM剩余的两个操作一并带来!

1.删除操作

removeChild

这个方法依然是父级调用的,参数就是要删除的子节点,其实实际上是剪切,这个方法会把我们删除掉的元素给返回,我们可以用一个变量去保存这个被删除的元素。


  var div = document.body.remove(div); 
  
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

这样我们的div变量就可以保存刚才被删除的div这个元素。

2.替换操作

replaceChild(new, origin)

这个方法同样是父级调用,用新的元素new来替换原来的origin元素,原来的被替换掉的元素可以被返回,我们可以像删除操作那样用一个变量来保存。

现在我们就可以通过以上这些方法来动态创建一棵DOM树了哟~

下面介绍一些Element节点的属性和方法。

属性

1.innerHTML

这个属性可以用字面意思来理解,元素里面的HTML结构

  div.innerHML = ‘<div>123</div>’;    
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

我们可以直接通过这个属性来改变元素内部的结构和内容,不过注意它会直接删除掉以前的所有结构,如果以前内容还有其他的节点的话,使用的时候就要小心了。

2.innerText/textContent

innerText老版本的火狐浏览器不兼容,textContent老版本的IE浏览器不兼容。

这个属性可以直接调出来元素内部的文本信息,若果这个元素还有很多的子元素的话,那么会把子元素里面的文本信息一起返回。

不过需要注意的是,如果我们要改写innerText或者textContent的话,它会像innerHTML一样,先把内部的所有html结构先删除掉,然后再写入text文本,因此里面有html结构的时候写入也要小心。

• 这里提一下,如果我们有很多字符串要添加到一个元素的内部的话,虽然用innerHTML或者innerText方法,但是却不是用innerHML += str的方法,因为+=操作符的效率极低,当字符串很多的时候会非常非常消耗性能。

遇到这种情况我们一般是用数组的join方法将字符串全部连接成一个字符串,然后一次性写入innerHTML。

方法

1.ele.setAttribute();

这个方法可以设置元素的属性(特性),比如class、id等一些行间属性。

  div.setAttribute(‘id’, ‘demo’);    
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

这个操作就可以给div这个元素设置一个叫做demo的id。

2.ele.getAttribute();

这个方法是获取元素的行间属性。

• 同样这里需要提一下,每个元素自带的行间属性都有自己特殊的功能,而我们通过自己给他们设置的属性并没有任何功能,因此我们可以来赋予他们功能和用处。

• 还有一点,我们在后面改变元素的样式的时候,通常不是直接修改他的css样式,而是事先写好它应该变成的样式,然后装进一个class里面,我们直接修改他的类名而不是css样式。

到这里,所有的DOM基本操作就都教给大家了,关于DOM大家是不是完全理解了呢?当然还要加强练习哦!