Javascript html 元素搜索和突出显示

发布于 2024-10-01 13:37:46 字数 564 浏览 1 评论 0原文

我想通过标签名称(例如

)或类 id 在网页中搜索元素,然后突出显示它们。我想使用 3 个按钮来完成此操作:设置值、突出显示下一个和清除。使用三个函数(getValues、highlightNext、clear)

  1. 首先提示用户输入XHTML代码中标签名或类名对应的值1或2。该对话框必须要求用户输入有效值(1 或 2),否则脚本不应允许用户继续。

  2. 接下来,脚本应提示用户输入与他们想要在文档中突出显示的标签名称或类名称相对应的字符串。此对话框不得允许用户单击“取消”或输入空字符串作为输入。

  3. 当用户为标签/类名称输入正确的值时,该函数必须从浏览器检索匹配对象的数组,并通过警报框告诉用户有多少元素与其请求匹配。

  4. 每次调用highlightNext时,都会将页面上下一个匹配元素的背景颜色设置为相同的颜色。

  5. 一旦所有匹配的项目都被突出显示,函数highlightNext应该显示一个对话框,指示所有元素都被突出显示。

I want to search a webpage for elements by tag name such a <p> or <body> or by class id and then highlight them. I want to do this using 3 buttons, set values, highlight next, and clear. Using three functions (getValues, highlightNext, clear)

  1. First prompt the user to enter the value 1 or 2 corresponding to tag names or class names in the XHTML code. The dialog must require a user to input a valid value (1 or 2), and the script should not allow the user to continue otherwise.

  2. Next the script should prompt the user to enter a string corresponding to the tag name or class name they would like to highlight within the document. This dialog must not allow a user to click cancel or enter the empty string as input.

  3. When the user enters a proper value for the tag/class name, the function must retrieve the array of matching objects from the browser and tell the user how many elements matched their request with an alert box.

  4. Each time highlightNext is called it will set the background color for the next matching element on the page to the same color.

  5. Once all matching items have been highlighted, the function highlightNext should display a dialog box that indicates all elements have been highlighted.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

饭团 2024-10-08 13:37:46
var selectedElements = document.getElementsByTagName(<tagname>) 

将为您提供指定标签名称的所有 DOM 元素。 (http://www.w3schools.com/jsref/met_doc_getelementsbytagname.asp)
您可以通过应用背景颜色样式来突出显示它们,例如:

element.style.backgroundColor = 'yellow'

这应该可以帮助您开始。

var selectedElements = document.getElementsByTagName(<tagname>) 

will give you all DOM elements by specified tag name. (http://www.w3schools.com/jsref/met_doc_getelementsbytagname.asp)
You can highlight them by applying a background color style, something like:

element.style.backgroundColor = 'yellow'

This should get you started.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文