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

您首先需要将该列表元素添加到DOM
然后，您需要将点击事件监听器附加到每个<li>元素上
使用该侦听器，您可以访问该元素的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>

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

2 个答案: