如何在JavaScript中获取子元素？调用函数返回undefined问题排查

首先来说你遇到的第一个问题：为什么pFilter函数里输出undefined。

问题原因分析 #

你在代码里生成的是<a>标签，而<a>标签本身并没有value属性——这个属性是给<input>、<select>这类表单元素用的。所以当你调用document.getElementById('1').value时，自然会返回undefined。另外还有一个小问题：你现在的onclick事件没有传递当前点击的元素，不管点哪个下拉项，都会固定去取id="1"的元素，这显然不是你想要的效果。

修复方案 #

先修改生成<a>标签的代码，把当前元素传递给pFilter函数：

// 生成奇数项的代码，修改onclick传递当前元素
document.getElementById('dropdownplace').innerHTML += '<a class="dropdown-item font_size_x1" ' + 
'href="#" onclick="pFilter(this)" id="' + k + '"><span>- </span>' + place_obj[k].Type + '</a>';

// 偶数项同理，修改onclick部分
document.getElementById('dropdownplace').innerHTML += '<a class="dropdown-item font_size_x1" style="background-color:#d9d9d947" ' + 
'href="#" onclick="pFilter(this)" id="' + k + '"><span>- </span>' + place_obj[k].Type + '</a>';

然后修改pFilter函数，获取<a>标签里的文本内容：

function pFilter(el) {
  // 获取a标签的全部文本，用trim去掉首尾空格和前面的"- "
  var place = el.textContent.trim();
  console.log(place);
  
  // 如果只想获取纯Type内容（去掉前面的"- "），也可以这样写：
  // var place = el.querySelector('span').nextSibling.textContent.trim();
}

接下来回答你第二个问题：如何在JavaScript中获取子元素的内容

这里给你几种常用的方法，根据你的场景选择：

• 方法1：用querySelector/querySelectorAll精准定位子元素
  如果知道子元素的选择器（比如class、标签名），可以直接在父元素上调用这两个方法：

// 获取父元素
const parentEl = document.getElementById('dropdownplace');
// 获取第一个class为dropdown-item的子元素
const childEl = parentEl.querySelector('.dropdown-item');
// 获取该子元素的文本内容
console.log(childEl.textContent.trim());

// 如果要获取所有符合条件的子元素，用querySelectorAll
const allChildEls = parentEl.querySelectorAll('.dropdown-item');
allChildEls.forEach(el => console.log(el.textContent.trim()));

• 方法2：用children属性获取直接子元素集合
  children会返回父元素的所有直接子元素（仅元素节点，不包括文本节点），是一个HTMLCollection，可以通过索引访问：

const parentEl = document.getElementById('dropdownplace');
// 获取第一个直接子元素
const firstChild = parentEl.children[0];
console.log(firstChild.textContent.trim());

• 方法3：用firstElementChild/lastElementChild快速获取首尾子元素
  如果只需要第一个或最后一个直接子元素，可以用这两个属性：

const parentEl = document.getElementById('dropdownplace');
// 获取第一个直接子元素
const firstChild = parentEl.firstElementChild;
// 获取最后一个直接子元素
const lastChild = parentEl.lastElementChild;
console.log(firstChild.textContent.trim());

• 方法4：用childNodes获取所有子节点（需要筛选元素节点）
  childNodes会返回父元素的所有子节点，包括空白文本节点，所以需要筛选出元素节点（nodeType为1）：

const parentEl = document.getElementById('dropdownplace');
// 筛选出所有元素子节点
const childElements = Array.from(parentEl.childNodes).filter(node => node.nodeType === 1);
childElements.forEach(el => console.log(el.textContent.trim()));

内容的提问来源于stack exchange，提问作者Farzin Bidokhti