javascript - 用innerHTML替换HTML - Javascript

Question

我需要编写一个 JS 功能来读取整个 HTML 文档并用其他文本替换文本。

HTML -

<ul>
  <li>
    <a id="aId" href="https://www.w3schools.com" target="_blank"> Link1 </a>
  </li>
  <li>
    <a id="bId" href="https://www.w3schools.com" target="_blank"> Link2 </a>
  </li>
  <li>
    <a href="https://www.w3schools.com" target="_blank"> Link3 </a>
  </li>
</ul>

Javascript 代码 -

var strMessage1 = document.getElementById("aId") ;
var first = 'target="_blank"';
var second = 'target="_blank" rel="noopener noreferrer" onClick="alert(\'Hello World!\')"';

strMessage1.innerHTML = strMessage1.innerHTML.replace(first, second) ; 

JavaScript 应该能够运行整个 HTML，并用第二个 var(在脚本中定义)替换第一个 var，无论在哪里找到。这是第一个 id - 'aId' 的示例。

问题 - 脚本如何覆盖和替换

中的内容

• bId ID？
• Link3，没有 id 吗？

还有。

演示 - http://jsfiddle.net/nikhil_gupta/rzy3ajhx/ .

注意 - 不使用 jQuery。

Answer 1

<强> .innerHTML 改变元素的内容(开始标签和结束标签之间的内容)。您的代码尝试更改元素属性的值。这些不是同一件事。

此外，了解使用 innerHTML(和 outerHTML)的含义也很重要。

• 它们都会导致 DOM 必须重新构建然后重新绘制并回流，这在资源方面非常昂贵。
• 使用它们还将删除之前设置的所有事件处理程序。
• 它们会在您的应用程序中打开安全漏洞。
• 它们通常伴随着一串串的绳子连接和嵌套引号。

要更改元素属性的值，只需访问要作为 JavaScript 对象的属性进行修改的 HTML 属性或使用 element.setAttribute(attributeName, value) DOM 方法。

Question - How would the script cover and replace contents in

• bId id?
• Link3, which has no id?

as well.

当你想要改变多个元素时，你需要将它们放入集合或数组中，然后你可以循环它们。将它们分组可以通过许多不同的方式来完成，而这些方式根本与 id 无关(按标签名称、按 CSS 类、按文档中的位置、按属性值、 ETC。)。在您的示例中，如果我们想要修改以 target=_blank 作为其 href 值的项目符号内的所有链接，我们可以通过位置和属性值来定位它们使用 CSS 选择器和 .querySelectorAll()方法。您会注意到，在下面的示例中，我已从 HTML 中完全删除了 id 属性，并且代码仍然有效。

最后，您不应使用内联 HTML 事件属性(onclick 等)来配置事件处理回调函数。这是一项已有 25 年以上历史的技术，每个新的 Web 开发人员都会在不了解 why it shouldn't be used 的情况下复制和粘贴该技术。 。相反，请使用现代的、基于标准的代码和 .addEventListener() DOM API 。

// Get the elements you wish to work on into an Array
// Here, we're selecting <a> elements that have an href attribute with a value of _blank 
// that are direct children of <li> elements:
var elementsToChange = Array.prototype.slice.call(document.querySelectorAll("li > a[target='_blank']"));

// We only need to worry about what's going to change
var newRel = 'noopener noreferrer'

// This will be the click event callback function
function doAlert(){
  alert('Hello World!');
}

// Loop over the array
elementsToChange.forEach(function(element){
  // Just access the HTML attribute you want to modify as a property of the JavaScript object
  element.rel = newRel;
    
  // Or, use the DOM API
  element.setAttribute("rel", newRel); 
  
  // Either way the DOM API should always be used to set up event handlers
  element.addEventListener("click", doAlert);
});

<ul>
  <li><a href="https://www.w3schools.com" target="_blank">I will be modified by the code</a></li>
  <li><a href="https://www.w3schools.com">I WON'T be modified by the code!</a></li>
  <li><a href="https://www.w3schools.com" target="_blank">I will be modified by the code</a></li>
</ul>