获取<li>文字内容

Question

我将控件（输入和选择）嵌套到<li>：

<li>type<select><option>type1</option><option>type2</option></select></li>

当控件被更改时，我需要读取属性名称<li>文本内容，但在上面的情况下（使用select）li.textContent检索以下字符串：

  

typetype1type2

我尽量避免li.innerHTML（使用select检索整个内容），但获取<li>文本内容的最佳方式是什么？

Answer 1

在您的示例中，属性名称是<select>元素之前的文本吗？

如果是这样，属性名称是textContent元素的第一个childNode的{​​{1}}。

  

N.B。就是这么明确 - 您的li有两个 <li>：

     

  
• childNodes的第一个childNode是li
  
• textNode的第二个childNode是li
  

<select>会抓住第一个li.childNodes[0]。

示例：

childNode

var li = document.getElementsByTagName('li')[0];
var p = document.getElementsByTagName('p')[0];

var propertyName = li.childNodes[0].textContent;

p.innerHTML = 'The label of <li> is... ' + propertyName;

Answer 2

如果您可以处理ID和名称属性，那么最好不要获取标签或文本内容。通过这种方式，您可以随意使用任何文本标签

  <li>type label here<select id="type"><option>type1</option><option>type2</option></select></li>

JS（jquery）

  $(select).change(function(){
       alert ($(this).attr("id"));
  });