Question

怎么用JS获取<p><span>dsadas</span><span>eqweq</span>欧洲杯</p>的“欧洲杯”这个文本节点？？

Answer 1

贴出更完整一些的代码，看下DOM结构的上下文。

如果你能定位到这个<p>标签，而且此<p>标签内部DOM结构稳定如你示例所示，那么可以用如下正则表达式提取：

// 假设<p>标签为变量p所引用
p.innerHTML.match(/>([^<>]*)$/)[1];    // 获取到“欧洲杯”文本

追问

fdsaf 我是span欧洲杯

我想写个函数，就是点击一下按钮，“欧洲杯”这几个文本的颜色可以改变为红色，请问怎么定位并获取到“欧洲杯”这个文本的节点，并改变其CSS的字体颜色属性为红色？只改变"欧洲杯"，其他文本不变，怎么写？

追答

因为你的“欧洲杯”是位于<p>节点内与其他几个<span>混杂在一起，且没有任何id或者class这样易于选择的属性，所以单独选择这个文本节点并不容易（个人感觉也不值得费那么一大坨代码）。看情况你应该能够修改代码，那么可以按如下方式来实现你的需求：

给“欧洲杯”加上<span>容器，则：

<p id="pNode"><span>fdsaf</span><span> 我是span</span><span>欧洲杯</span></p>
<input type="button" onclick="t();" />

function t(){
  document.getElementById('pNode').getElementsByTagName('span')[2].style.color = 'red';
}

或者点击时给此<p>节点添加新的样式“red”：

<p id="pNode"><span>fdsaf</span><span> 我是span</span>欧洲杯</p>
<input type="button" onclick="t();" />

function t(){
  document.getElementById('pNode').className = 'red';
}

.red{
  color: red;
}
.red span{
  color: #000;
}

Answer 2

就是<p>节点吧