将 JavaScript 变量添加到 HTML 元素

Adding Javascript variables to HTML elements

本文关键字：HTML 元素 添加 JavaScript 变量      更新时间：2023-09-26

所以，我有一些代码应该做四件事：

  • 从每个标题中删除".mp4"扩展名
  • 更改我的视频类别
  • 在所有视频中使用相同的描述
  • 在所有视频中使用相同的关键字

注意：所有这些都将在YouTube上传页面上完成。我在Mozilla Firefox中使用Greasemonkey。

我写了这个，但我的问题是：如何将实际 HTML 页面中的 HTML 标题更改为新标题（这是一个 Javascript 变量）？

这是我的代码：

function remove_mp4()
{
   var title = document.getElementsByName("title").value;
   var new_title = title.replace(title.match(".mp4"), "");
}
function add_description()
{
   var description = document.getElementsByName("description").value;
   var new_description = "Subscribe."
}
function add_keywords()
{
   var keywords = document.getElementsByName("keywords").value;
   var new_keywords = prompt("Enter keywords.", "");
}
function change_category()
{
   var category = document.getElementsByName("category").value;
   var new_category = "<option value="27">Education</option>"
}
remove_mp4();
add_description();
add_keywords();
change_category();

注意：如果您在 JavaScript 代码中看到任何错误，请告诉我。

注意2：如果你想知道为什么我将当前的HTML值存储在变量中，那是因为我认为我将不得不使用它们来替换HTML值（我可能是错的）。

很多事情已经涵盖了，但我仍然想提醒你，如果你正在寻找跨浏览器兼容性innerHTML是不够的，因为你可能需要innerText或textContent来处理一些旧版本的IE，甚至使用其他方式来修改元素的内容。

作为旁注，绝大多数人认为innerHTML已被弃用，尽管其他人仍在使用它。（我不是来争论使用它好不好，但这只是一个小评论，供你检查）

关于备注，我建议通过创建一些更通用的版本来编辑或添加目的，从而最大限度地减少您创建的函数数量，例如您可以执行以下操作：

/*
*  @param $affectedElements the collection of elements to be changed      
*  @param $attribute here means the attribute to be added to each of those elements
*  @param $attributeValue the value of that attribute
*/
function add($affectedElements, $attribute, $attributeValue){
  for(int i=0; i<$affectedElements.length; i++){
    ($affectedElements[i]).setAttribute($attribute, $attributeValue);
  }
}

如果你使用全局函数为你完成工作，不仅你的coce会更容易维护，而且你会避免多次获取DOM中的元素，这将大大增加你的脚本运行速度。例如，在你以前的代码中，你先获取一组特定元素的 DOM，然后才能向它们添加值，换句话说，每次执行函数时，你都必须遍历整个 DOM 来检索你的元素，而如果你只获取一次元素然后存储在一个 var 中，然后将它们传递给一个只专注于添加或更改的函数， 你显然在避免一些重复性的任务。

关于最后一个函数，我认为代码仍然不完整，但我建议您使用内置方法来操作 HTMLOption 内容，如果我记得不错，使用纯 JavaScript 您会发现自己键入以下内容： 

var category = document.getElem.... . options[put-index-here];
//JavaScript also lets you create <option> elements with the Option() constructor

无论如何，我的观点是，你最好使用 JavaScript 的可用方法来完成工作，而不是依赖 innerHTML fpr 任何你可能需要的东西，我知道 innerHTML 是完成工作的最简单、最快的方法，但如果我可以说这就像你只使用 and 标签构建整个 HTML 页面，而不是使用各种语义标签，这将有助于使一切更清晰。

作为将来使用的最后一点，如果你对jQuery感兴趣，这将给你一种不同的方式，通过CSS选择器以比普通JavaScript更高级的方式操作你的DOM。

您也可以查看此链接：替换innerHTML

我假设您的问题只是关于标题更改，而不是关于其余部分; 另外，我假设您的意思是更改文档中将"title"作为属性的所有元素name而不是文档标题。

在这种情况下，您确实可以使用 document.getElementsByName("title") .

要处理name="title"元素，您可以执行以下操作：

titleElems=document.getElementsByName("title");
for(i=0;i<titleElems.length;i++){
    titleInner=titleElems[i].innerHTML;
    titleElems[i].innerHTML=titleInner.replace(titleInner.match(".mp4"), "");
}

对于 name="description" 元素，请使用以下命令：（假设页面上只有一个 name="description" 元素，或者您想要第一个元素）

document.getElementsByName("description")[0].value="Subscribe.";

我不太确定关键字（我现在面前没有YouTube页面），所以这假设它是一个文本字段/区域，就像描述一样：

document.getElementsByName("keywords")[0].value=prompt("Please enter keywords:","");

同样，根据您的问题，该问题只是设置了类别的.value：

document.getElementsByName("description")[0].value="<option value='27'>Education</option>";

但是，在最后一个中，请注意我将"27"更改为'27'：您不能将双引号放在双引号字符串中，假设它们的处理方式与任何其他字符一样:)

这有帮助吗？:)

Sry，但你的问题不是很清楚。您指的是您的 HTML 标题到底是什么？

如果它是您要修改的元素，请使用以下命令： 

element.setAttribute('title', 'new-title-here');

如果要修改窗口标题（显示在浏览器选项卡中），可以执行以下操作： 

document.title = "the new title";

你已经从.value属性中读取了元素，所以你也应该写回它：

document.getElementsByName("title").value = new_title

如果您指的是更改名为 title 的元素中的文本内容，请尝试使用 innerHTML 

 var title = document.getElementsByName("title").value;
 document.getElementsByName("title").innerHTML = title.replace(title.match(".mp4"), "");

来源： https://developer.mozilla.org/en-US/docs/DOM/element.innerHTML

<title> 元素是不可见的，它仅间接显示 - 在窗口或选项卡标题中。这意味着您要更改窗口/选项卡标题中显示的任何内容，而不是 HTML 代码本身。您可以通过更改document.title属性来执行此操作：

function remove_mp4()
{
  document.title = document.title.replace(title.match(".mp4"), "");
}
相关文章：