零基础建站培训介绍

当前位置:

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>