JavaScript基础16-JS操作页面_获取页面标签

最新推荐文章于 2023-01-16 22:20:45 发布
最新推荐文章于 2023-01-16 22:20:45 发布
阅读量317 收藏
点赞数
分类专栏： JavaScript基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34400745/article/details/102687829
版权
本文介绍了JavaScript操作HTML元素的基础知识，特别是如何通过id、标签名和类名获取元素。强调了在页面加载顺序中可能遇到的问题，推荐将JavaScript放在页面底部或使用window.onload函数确保元素已加载。
摘要由CSDN通过智能技术生成

1、获取标签的方式

通常，通过 JavaScript操作 HTML 元素,可以使用内置对象document的方法来找到该标签。。

  • 通过 id 找到 HTML 元素（常用）
	document.getElementById（）
  • 通过标签名找到 HTML 元素
	获取出来的是列表
	getElementsByTagName()
  • 通过类名找到 HTML 元素（通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。）
	取出来的是列表
	getElementsByClassName()

2、获取标签注意问题

getElementById方法来获取页面上设置了id属性的元素，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
最低0.47元/天 解锁文章
橘九。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS新标签页打开，让你的网站访问更加便捷
Shids_的博客
06-05 5719
JS新标签页打开，让你的网站访问更加便捷
js获取浏览器信息和页面信息
caicongyang
01-06 3023
js获取浏览器信息和页面信息
js 获取浏览器的类型和页面编码
大米文子
05-24 638
function getPageCharset(){ var charSet = ""; var oType = getBrowser(); switch(oType){ case "IE": charSet = document.charset; break; case "FIR...
随笔记：获取当前页面有多少种类的标签
Wang Chengchen's Blog
05-13 392
随笔记：获取当前页面有多少种类的标签 实现思路 首先，获取当前页面的所有标签 使用 document.getElementByTagName(“*”) — HTMLCollection 实时的 或使用 document.querySelectorAll(“*”) — NodeList 快照 更多差异学习，参考 🔴 红宝书 📖 上面获取的结果都是类数组 将类数组转换为数组 扩展运算符 … 最简单方便的方法 es6 Array.from() slice 循环–2.0版本 vue.
2021-01_JAVASCRIPT_Shopping-Cart
05-24
1. **JavaScript基础**：变量、数据类型、条件语句、循环、函数和对象，这些都是编写任何JavaScript代码的基础。 2. **DOM操作**：使用`document.getElementById`、`querySelector`、`querySelectorAll`等方法找到...
Javascript-Practice::high_voltage:个人练习场
05-27
JavaScript是Web开发中不可或缺的一部分，尤其在前端领域，它提供了丰富的功能来实现动态交互和页面操作。"Javascript-Practice::high_voltage:个人练习场"是一个专门为JavaScript学习者和实践者设计的项目，它是一...
使用JS获取页面上的所有标签
10-17
在网页开发中，JavaScript（JS）是一种常用的脚本语言，用于与用户交互和处理动态内容。本文将详细探讨如何使用...希望这篇文章对您了解和使用JavaScript获取页面标签有所帮助，如果有任何问题，欢迎留言讨论。
Dynamic-Text-.rar_javascript
09-20
JavaScript代码通常会在HTML文件中内联放置（使用`<script>`标签），或者链接到外部JS文件中。 要创建一个动态文本框，首先我们需要在HTML中定义一个`<input type="text">`元素，比如： ```html 请输入内容..."> `...
ejemplo-redux_inventedrtv_javascript_page_
10-03
综上所述，这个项目可能是一个使用Redux进行状态管理的JavaScript页面，涉及前端测试，使用Git进行版本控制，依赖管理可能采用了npm或yarn，项目结构遵循了React的常见模式。为了深入了解项目，你需要查看`README.md...
JS获取页面所有的标签并分类统计标签个数
03-18 600
转载于:https://www.cnblogs.com/numbone889/p/6575326.html
js 事件委托
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
12-14 210
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
javascript常问面试题：获取浏览器页面有多少个标签数量
ck12ck12的专栏
04-06 2872
第一种：set （ES6新特新） new Set(document.getElementsByTagName('*')).size image 第二种：遍历去重 function unique(arr){ var newArr = []; for(var i = 0; i < arr.length; i++){ for(var j...
bootstrap标签页(Tab)控件js获取当前tab页
热门推荐
谢文峰的博客
02-26 1万+
1.说明 项目中遇到需求，需要通过按钮点击事件切换tab页面 2.解决思路 2.1 获取到当前激活的tab页 2.2 使用 tab('show') 控制tab的显示 3.源码 #evalBaseInfoTab 为tab控件id，通过以下函数可以获取到控件中第几个tab页激活 function getCurrentTabIndex(){ var $tabs = $('...
js获取页面上的所有标签
wyw223的博客
03-30 3226
new Set([...document.querySelectorAll('*')].map(v => v.tagName)); new Set(Array.from(document.querySelectorAll('*')).map(v => v.tagName));
js获取用户浏览器信息和ip地址以及位置
RayLyu0829的博客
01-16 5722
js获取用户浏览器信息和ip地址以及位置
JavaScript 统计当前页面标签个数和种类
03-09 1757
简单的遍历，熟悉一下dom节点的属性，用的是html Dom ,节点还可以用xml 的dom来解析比如把children 换成childNodes,文本节点便会被统计进来<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="se
关于js获取样式笔记
免惘
04-27 369
关于js获取样式
js对文字批注_HTML 页面添加批注 - JavaScript - ITeye
最新发布
06-01
您可以使用 JavaScript 和 HTML 来实现对文本的批注功能。以下是一个简单的实现思路： 1. 在 HTML 页面中，使用 `<span>` 标签包裹要批注的文本内容，并为每个 `<span>` 标签添加一个唯一的 ID，例如： ```html <p>这是一段需要批注的文本：<span id="note1">这里需要添加批注</span></p> ``` 2. 在页面中添加一个按钮或者其他触发事件，当用户点击该按钮时，触发 JavaScript 函数。 3. JavaScript 函数中，首先获取用户输入的批注内容，然后使用 DOM 操作将批注内容添加到页面中。可以使用 `<div>` 标签等元素来包裹批注内容，并为该元素添加一个唯一的 ID。然后使用 CSS 样式来设置批注框的样式，例如背景颜色、边框等。 4. 最后，将批注框添加到需要批注的文本旁边。可以使用 JavaScript 中的 `offsetTop` 和 `offsetLeft` 属性来获取文本元素的位置，然后将批注框定位到该位置。 以下是一个简单的实现示例： ```html <html> <head> <style> .note-box { background-color: #fff; border: 1px solid #ccc; padding: 5px; position: absolute; top: 0; left: 0; } </style> </head> <body> <p>这是一段需要批注的文本：<span id="note1">这里需要添加批注</span></p> <button onclick="addNote()">添加批注</button> <script> function addNote() { // 获取用户输入的批注内容 var noteText = prompt("请输入批注内容："); // 创建批注框元素 var noteBox = document.createElement("div"); noteBox.id = "note-box-" + new Date().getTime(); noteBox.className = "note-box"; noteBox.innerText = noteText; // 获取需要批注的文本元素 var noteElem = document.getElementById("note1"); // 将批注框添加到文本元素旁边 noteElem.parentNode.insertBefore(noteBox, noteElem.nextSibling); // 设置批注框的位置 var noteElemRect = noteElem.getBoundingClientRect(); var noteBoxElem = document.getElementById(noteBox.id); noteBoxElem.style.top = noteElemRect.top + noteElem.offsetHeight + "px"; noteBoxElem.style.left = noteElemRect.left + "px"; } </script> </body> </html> ``` 请注意，这只是一个简单的实现示例，实际实现中可能需要考虑更多的因素，例如批注框的样式、位置计算等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值