我想在获取和解析DOM树后更改特定节点内容的字体样式

i wanted to change the font style of the content of a specific node after fetching and parsing the DOM tree

本文关键字：节点 样式 字体 获取 和解 DOM      更新时间：2023-09-26

我有一个html，我想解析它的特定节点并更改其内容，同时将新节点值的字体样式设置为斜体。我可以解析到特定的nodevalue，但无法了解如何更改nodevalue的字体样式。

如果我的问题

<html>
  <head>
  <script src="potrait.js"></script>
  </head>
 <body>
    <p class="q">Here comes the count</p>
    <ul class="q">
        <li><p class="q" align="center">1</p></li>
    </ul>
</body>
</html>

我想把"1"改成一（某物），（某物）应该是斜体。

我使用下面显示的DOM方法直到1

var list=document.getElementsByTagName('ul')
list[0].firstChild.nextSibling.childNodes[0].firstChild.nodeValue = "one(something)")

我可以更改内容，但我不知道如何将（某些内容）更改为斜体。

任何指导都是非常可观的。。！！

简单地用斜体标记包装"（something）"

var list=document.getElementsByTagName('ul')
list[0].firstChild.nextSibling.childNodes[0].firstChild.nodeValue = "one<i>(something)</i>")

您可以使用.innerHTML和<i>:

var list=document.getElementsByTagName('ul'); 
var p = list[0].firstElementChild.firstElementChild;
p.innerHTML = "one<i>(something)</i>";

您可以使用jQuery轻松处理此问题。代码为：

$("ul li p:first").html("one<i>(something)</i>");

这意味着取ul中lihtml标记中的第一个p标记，并将其html内容更改为one<i>(something)</i>。我为您制作了一个Plunker演示。

请小心，因为此代码将替换网页上列表中的所有第一个元素，其中它有一个p标记。为了避免这种情况，您可以为您想要的ul分配一个类。例如，代码中的列表已经有一个名为q的类，因此代码看起来像：

$(".q :first").html("one<i>(something)</i>");

编辑：要获得特定的子项（不是第一个），可以使用:nth-child(<number of child>)而不是:first。有关演示，请参阅jQuery文档。

相关文章：