Question

我有以下html元素，我必须从中获取一些特定的文本，例如“John Doe”

我是javascript的新手，但一直在玩getElementById等，但我似乎无法正确使用。

 <div id="name">
    <p><span id="nameheading">name:&nbsp;</span> John Doe</p>
 </div>

Bellow is What I have tried:

function askInformation()
{

   var nameHeading = document.getElementById("nameheading");
   var paragraph = document.getElementsByTagName("p").item(0).innerHTML ;
   var name = paragraph[4];

   console.log(name); // prints letter (n)
}

我需要帮助

Answer 1

var paragraph = document.getElementsByTagName("p").item(0).innerHTML ;
var name = paragraph.replace('<span id="nameheading">name:&nbsp;</span>','').trim(); // John Doe

Answer 2

如果您想获得以下内容后面的文字：

<div id="name">
    <p><span id="nameheading">name:&nbsp;</span> John Doe</p>
 </div>

您可以使用以下内容：

// Get a reference to the span
var span = document.getElementById('nameheading');

// Get the following text
var text = span.nextSibling.data;

然而，这在很大程度上取决于内部结构，最好循环文本节点子节点并收集所有节点的内容。您可能还想修剪前导和尾随空格。

您还可以获取对父DIV的引用，并使用类似以下的函数来收集文本子项并忽略子元素：

// Return the text of the child text nodes of an element,
// but not descendant element text nodes
function getChildText(element) {
  var children = element.childNodes;
  var text = '';
  for (var i=0, iLen=children.length; i<iLen; i++) {
    if (children[i].nodeType == '3') {
      text += children[i].data;
    }
  }
  return text;
}

var text = getChildText(document.getElementById('name').getElementsByTagName('p')[0]);

或更简洁地支持querySelector interface的主机：

var text = getChildText(document.querySelector('#name p'));

堆栈在获取元素与javascript

2 个答案: