零基础建站培训介绍

当前位置:

JS学习笔记:DOM节点的删除、替换与修改

今天在学做网站论坛分享一下JS学习过程中DOM节点的删除、替换与修改的方法。

节点的删除:

removeChild [父节. removeChild(待删除的子节点)]
要站在父元素角度,先找到父元素,-----再找到子节点--------再使用removeChild()删除子元素

<script>
function t(){
var a=document.getElementsByTagName('ul')[0]; //先找到要删除的父节点
var b=a.children[1];//再找到要删除的节点
a.removeChild(b)//删除操作
}
</script>

节点的替换:

replaceChild() [父节.replaceChild(新节点,旧节点)]

先找到父元素---------再找到要替换的子节点---------再创建一个新的子节点------------再使用replaceChild()取旧替新

<script>
function t(){

var all=document.getElementsByTagName('ul')[0];//找到父元素
var old=all.children[1];//找到要替换的子元素
var xin=document.createElement('li');//创建一个li元素
var wen=document.createTextNode('中');//创建一个文本节点
xin.appendChild(wen);//将文本节点插入到li里面
all.replaceChild(xin,old); //执行替换操作
}
</script>

直接插入HTML内容:

innerHTML (它是一种属性)【它不是W3C的标准,但各大浏览器都支持,效率很高】 [插入的位置.innerHTML=插入的内容]

执行innerHTML操作时,原有节点下面的子节点会被删除。

<script>
function t(){
var a=document.getElementsByTagName('ul')[0]; //找到插入的位置
var b="<li>中</li><li>化</li><li>人</li><li>民</li>"; //将插入的内容写成一行,并赋给一个变量
a.innerHTML=b; //innerHTML是一个属性,它用=,
}
</script>

相关阅读:

JS判断是否安装app并打开否则跳转app store

Js传值赋值与引用赋值

简单易用获取当前日期时间的JS代码

JS加密与解密方法

JS学习笔记:js变量名规范与变量类型

上一课: 下一课:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

  • 学习了建网站课程的学员都知道,我们在做网站时有时需要进行页面的跳转,页面跳转方法很多,最常用的跳转就是通过JS来实现网页跳转。下面是使用js实
  • JS加密与解密方法 (15884 次学习)
    在网站制作过程中,JS是需要经常用到的,为了防止网站的JS代码被别人复制,可以对JS代码进行加密。如下图,就是将js进行了加密处理。JS加密方法JS
  • js变量名必须是字母,数字,下划线,$  开头不能为数字。 Var age=24 var name="Gates", age=56, job="CEO";变量名区分
  • Js传值赋值与引用赋值 (15165 次学习)
    JS赋值是 jQuery教程中比较基础的一章,我们学习怎么建网站时,需要了解一下JS的二种赋值方式:传值赋值与引用赋值。传值赋值:以var b=a为例,先把
  • 输出当前日期是JS中最基础的应用,今天我们说一下这些最基础的应用,学习一下JS。下面是最简单易用的获取当前日期的JS代码<script language=JavaS
  • tab切换代码介绍这是一套通过js实现的tab选项卡切换的tab选项卡代码,使用原始的JS代码,代码干净纯洁,摒弃JQUERY库的复杂代码。如果不懂代码,先学
  • 常常有这样的场景,咱们开发出来的APP需要进行推广,比如在页面顶部来一张大Banner图片,亦或一张二维码。但往往我们都是直接给推广图片加了一个下载