JavaScript基础（四）

最新推荐文章于 2024-07-21 06:45:00 发布

原创最新推荐文章于 2024-07-21 06:45:00 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

JavaWeb 同时被 2 个专栏收录

6 篇文章

订阅专栏

JavaScript

4 篇文章

订阅专栏

本文深入讲解了JavaScript如何通过DOM操作实现元素样式修改、节点创建、删除及替换，包括style属性调整、createElement与createTextNode应用，及removeChild与replaceChild方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML DOM 的样式

JavaScript通过获取节点可以操作style属性，进而改变节点对象的样式
比如：隐藏或显示节点对象、改变某个节点的背景色

<html>
<div id="div1">这是一个div</div>
<button onclick="yin()">隐藏div</button>
<button onclick="xian()">显示div</button>
<button onclick="change()">改变div背景色</button>
<script>
    var div1 = document.getElementById("div1");
    function yin() {
        div1.style.display = "none";//表示隐藏该节点对象
    }
    function xian() {
        div1.style.display = "block";//表示显示该节点对象，默认为显示
    }
    function change() {
        div1.style.backgroundColor = "pink";
    }
</script>
</html>

如图：
在这里插入图片描述
当点击隐藏div按钮时，上面的文字会消失；当点击显示div按钮时，“这是一个div”又会显示在浏览器上；当点击改变div背景色时，文字的背景色就会发生改变：

创建以及删除节点

创建节点

创建节点分为创建元素节点(createElement)，创建文本节点(createTextNode)和创建属性节点(createAttribute)：

<html>
<div id="d">Hello HTML DOM</div>
<script>
function add(){
  var hr=document.createElement("hr");
  var div1 = document.getElementById("d");
  div1.appendChild(hr);
}
</script>
<button onclick="add()">在div中追加一个hr元素</button>
</html>

运行如下图，每点击按钮一次就会添加一条分割线：
在这里插入图片描述
创建文本节点，则需要先有一个元素节点，然后通过appendChild将
文本节点添加到元素节点下；而创建属性节点不仅要有元素节点，还要通过nodeValue与setAttributeNode对创建的属性节点进行赋值然后将该属性节点添加到某元素节点下。

//创建文本节点(createTextNode)
<html>
<div id="d">Hello HTML DOM</div>
<script>
function add(){
  var p=document.createElement("p");
  var text = document.createTextNode("这是通过DOM创建出来的<p>");
  p.appendChild(text);
  var div1 = document.getElementById("d");
  div1.appendChild(p);
}
</script>
<button onclick="add()">在div中追加一个p元素</button>
</html>

//创建属性节点(createAttribute)
<html>
<div id="d">Hello HTML DOM<br></div>
<script>
function add(){
  var a=document.createElement("a");//先创建一个元素节点<a>
  var content = document.createTextNode("http://12306.com");//创建一个文本节点，文本为"http://12306.com"
  a.appendChild(content);//将文本添加到<a>下
 
  var href = document.createAttribute("href");//创建一个属性节点'href'
  href.nodeValue="http://12306.com";///对'href'属性赋值"http://12306.com"
  a.setAttributeNode(href);//给<a>设置属性'href',该'href'指向http://12306.com
 
  var div1 = document.getElementById("d");
  div1.appendChild(a);
}
</script>
<button onclick="add()">在div中追加一个超链</button> 
</html>

删除节点

删除节点和创建节点一样也分为三个，删除元素节点(removeChild)、删除属性节点(removeAttribute)、删除文本节点。

//删除元素节点
<script>
function removeDiv(){
  var parentDiv = document.getElementById("parentDiv");
  var div2= document.getElementById("div2");
  parentDiv.removeChild(div2);
}
</script>
 
<div id="parentDiv">
  <div id="div1">安全的div</div>
  <div id="div2">即将被删除的div</div>
</div>
 
<button onclick="removeDiv()">删除第二个div</button>

运行结果如图：
在这里插入图片描述
当点击按钮，

下面的节点则被移除。

//删除属性节点
<script>
function removeHref(){
  var link= document.getElementById("link");
  link.removeAttribute("href");
}
 
</script>
 
<a id="link" href="http://12306.com">http://12306.com</a>
 
<br>
<button onclick="removeHref()">删除超链的href属性</button>

如图：
在这里插入图片描述
当点击按钮：

原本文字中的超链接属性被移除。

//删除文本节点
//删除文本节点有两种方式，1：通过移除子节点来删除，和删除元素节点一样
<div id="div1">这是一个div</div>
<button onclick="rem1()">删除div文本</button>
<script>
    var div1 = document.getElementById("div1");
    function rem1() {
        var textNode = div1.childNodes[0];//获取div的第一个子节点也就是文本节点
        div1.removeChild(textNode);//移除该文本节点
    }
</script>

如图：
在这里插入图片描述
当点击按钮，文本消失：

//第二种方式：通过改变innerHTML删除文本
<div id="div1">这是一个div</div>
<button onclick="rem1()">删除div文本</button>
<script>
    var div1 = document.getElementById("div1");
    function rem1() {
       div1.innerHTML = "";
    }
</script>

效果与使用removeChild一样。

替换节点(replaceChild)

与删除节点一样，替换节点也需要先获取父节点，然后通过父节点替换子节点。

获取父节点
创建子节点
获取被替换子节点
通过replaceChild进行替换

<div id="div1">要被替换div</div>
<button onclick="rep()">replace</button>
<script>
    function rep() {
        var child = document.createElement("div");
        var text = document.createTextNode("被替换的div");
        child.appendChild(text);
        var div1  = document.getElementById("div1");
        var parediv = document.getElementById("div1").parentNode;
        parediv.replaceChild(child,div1);
    }
</script>

替换前：
在这里插入图片描述替换后：