近期项目中遇到了这样的场景, 接口返回的是html, 我通过v-html渲染到页面中, 但是有个需求是修改a标签的打开方式, 这时候需要去操作dom节点去进行修改及使用我们制定的跳转方式打开a标签中的url~代码如下
this.$nextTick(() => {
// 1. 获取到所有p标签内的a标签节点
Array.prototype.slice.call(document.querySelectorAll(.readScroll p a)).map(item => {
// 2.禁止a标签默认跳转事件
item.setAttribute('onclick', 'return false')
// 3.监听点击事件, 获取url修改点击事件
item.addEventListener('click', function () {
console.log(item.getAttrubute('href'), 'a标签的url')
})
})
}