2

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

  • 从每个标题中删除“.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 值（我可能错了）。

4

6 回答 6

1

很多东西已经涵盖了，但我仍然想提醒你，如果你正在寻找跨浏览器兼容性，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 是完成工作的最简单和最快的方法，但如果我可以说它就像如果您只使用和标签构建了一个完整的 HTML 页面，而不是使用有助于使一切更清晰的各种语义标签。

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

您也可以查看此链接： innerHTML 的替代品

于 2012-08-06T16:08:25.207 回答
0

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

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

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

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

document.title = "the new title";
于 2012-08-06T15:00:06.310 回答
0

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

function remove_mp4()
{
  document.title = document.title.replace(title.match(".mp4"), "");
}
于 2012-08-06T15:01:57.040 回答
0

您已从.value属性中读取元素，因此您也应该将其写回：

document.getElementsByName("title").value = new_title
于 2012-08-06T15:02:08.947 回答
0

如果您指的是更改名为 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

于 2012-08-06T15:02:17.620 回答
0

我假设您的问题仅与标题更改有关，而与其他问题无关；另外，我假设您的意思是更改文档中具有“标题”作为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>";

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

这有帮助吗？:)

于 2012-08-06T15:11:33.927 回答