我可以从IBM WATSON中用JSON字符串编写的HTML代码中获取HTML id [关闭]

Question

我已经将JSON对象中的HTML代码写为字符串，有没有一种方法可以从那里访问HTML id。

{

  "text":"<ol><li id='it_1'>Item1</li><li id='it_2'>Item2</li><li id='it_3'>Item3</li></ol>"

}

我希望每当用户点击内部列表中的任何链接时，我都应该获得它的ID。在这种情况下，我已经在IBM Watson中定义了这个案例，现在我的动机是每当用户点击我需要触发另一个案例的任何链接时。但为此我需要检查他选择了哪一个。

Answer 1

你可以像下面这样使用DOMParser()，querySelectorAll()和map()：

var json = {
"text":"<ol><li id='it_1'>Item1</li><li id='it_2'>Item2</li><li id='it_3'>Item3</li></ol>"
}
var doc = new DOMParser().parseFromString(json.text, "text/html");
var ids = [...doc.querySelectorAll('li')].map(el => el.id);
console.log(ids);

Answer 2

1. 首先需要将该列表元素添加到DOM中
2. 然后，您需要将click事件侦听器附加到每个<li>元素
3. 使用该侦听器，您可以访问该元素的id和其他属性

var obj = {
  "text": "<ol><li id='it_1'>Item1</li><li id='it_2'>Item2</li><li id='it_3'>Item3</li></ol>"
};
document.getElementById('container').innerHTML = obj.text;

var liElems = document.querySelectorAll('ol li');
for(var i=0; i<liElems.length; i++){
  liElems[i].addEventListener('click', function(e){
    console.log(e.target.id);
  });
}

<div id="container"></div>