JavaScript小工具10

最新推荐文章于 2022-03-31 19:10:01 发布
最新推荐文章于 2022-03-31 19:10:01 发布
阅读量131 收藏
点赞数
分类专栏： toolsJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dh2264664169/article/details/84589372
版权

创建新的 HTML 元素 (节点) - appendChild()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。

如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:

element.insertBefore(para, child);

移除已存在的元素

要移除一个元素，你需要知道该元素的父元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

</body>
</html>

注意：早期的 Internet Explorer 浏览器不支持 node.remove() 方法。

替换 HTML 元素 - replaceChild()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

</body>
</html>

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。

HTMLCollection 对象类似 HTML 元素的一个数组。

获取文档所有的 <p> 元素：var x = document.getElementsByTagName("p");           访问第二个 <p> 元素可以是以下代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p id="demo"></p>

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style='color:red;'> " + myCollection[1].innerHTML + '</span>';
</script>

</body>
</html>

HTMLCollection 对象 length 属性

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "文档包含" + myCollection.length + " 个段落。";
</script>

 

集合 length 属性常用于遍历集合中的元素。

实例

修改所有 <p> 元素的背景颜色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p>点击按钮修改 p 元素的背景颜色。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    var myCollection = document.getElementsByTagName("p");
    var i;
    for (i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "red";
    }
}
</script>

</body>
</html>

NodeList 对象是一个从文档中获取的节点列表 (集合) 。

NodeList 对象类似 HTMLCollection 对象。

一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。

所有浏览器的 childNodes 属性返回的是 NodeList 对象。

大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p id="demo"></p>

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style='color:red;'> " + myNodelist[1].innerHTML + '</span>';
</script>

</body>
</html>

NodeList 对象 length 属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p id="demo"></p>

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = "文档包含 " + myNodelist.length + " 个段落。";
</script>

</body>
</html>

length 属性常用于遍历节点列表。

实例

修改节点列表中所有 <p> 元素的背景颜色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p>点击按钮修改所有 p 元素的背景颜色。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    var myNodelist = document.querySelectorAll("p");
    var i;
    for (i = 0; i < myNodelist.length; i++) {
        myNodelist[i].style.color = "red";
    }
}
</script>

</body>
</html>

HTMLCollection 与 NodeList 的区别

HTMLCollection 是 HTML 元素的集合。

NodeList 是一个文档节点的集合。

NodeList 与 HTMLCollection 有很多类似的地方。

NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。

NodeList 与 HTMLCollection 都有 length 属性。

HTMLCollection 元素可以通过 name，id 或索引来获取。

NodeList 只能通过索引来获取。

只有 NodeList 对象有包含属性节点和文本节点。

节点列表不是一个数组！

节点列表看起来可能是一个数组，但其实不是。

你可以像数组一样，使用索引来获取元素。

节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 

DH2264664169
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js javaScript 验证校验小工具包
02-25
js javaScript 验证校验小工具包
JavaScript开发工具 共享
03-15
NULL 博文链接：https://lym6520.iteye.com/blog/317547
JavaScript的压缩工具
这里是前端，是不一样的前端
02-16 2601
一、压缩工具 JavaScript 构建过程的一个重要环节就是压缩输出，剔除多余字符。这样可以保证只将最少的字节 量传输到浏览器进行解析，用户体验会更好。有不少压缩工具，它们的压缩率有所不同。 1.1 Uglify Uglify 现在是第 3 版①，是可以压缩、美化和最小化 JavaScript 代码的工具包。它可以在命令行运行， 可以接收极为丰富的配置选项，实现满足需求的自定义压缩。 1.2 Google Closure Compiler 虽然严格来讲并不是压缩工具，但 Google Closure Co
在线Javascript加密混淆工具
Linux,Java,SpringBoot,Python,Lua略知一点
03-31 3669
在线Javascript加密混淆工具 在线Javascript加密混淆工具 在线Javascript Obfuscator 使 javascript 代码更难阅读以保护它。该工具提供了四种使用工具。你可以压缩或格式化你的代码，也可以使用 eval 混淆你的代码并对其进行解码。混淆的 javascript 代码在你的工作中使用时效果很好。 在线Javascript Obfuscator 使 javascript 代码更难阅读以保护它。该工具提供了四种使用工具。你可以压缩或格式化你的代码，也可以使用 ev
微信小程序JavaScript判断值是否为空工具类方法
小歲月丶太着急
06-01 4444
因为JS 中判断一个字段是否为空非常复杂，涉及到undefined等多种情况，特此写了一个工具类方法，使用简单，判断全面，避免重复造轮子~ /** * 用于判断空，Undefined String Array Object Number boolean */ function isNull(str) { if (Object.prototype.toString.call(str) === '[object Undefined]') { //空 return true } else if
在线Javascript美化格式化工具
Linux,Java,SpringBoot,Python,Lua略知一点
03-29 3902
在线Javascript美化格式化工具 在线Javascript美化格式化工具 在线 Javascript 美化器为你提供了一种快速简便的格式化（美化器）方法，该工具将采用丑陋、混淆或压缩缩小javascript 并使其干净、可重复的代码。它为代码提供了适当的换行符、缩进、空格。 在线 Javascript 美化器为你提供了一种快速简便的格式化（美化器）方法，该工具将采用丑陋、混淆或压缩缩小javascript 并使其干净、可重复的代码。它为代码提供了适当的换行符、缩进、空格。 https://t
资深程序员推荐七大JavaScript编程工具
热门推荐
molihuaya的博客
03-15 3万+
在现实世界中，Java是最常用和使用最广泛的编程语言之一。这些JS开发工具不仅为程序员提供了更多可能，还可以帮助他们进行调试，并为HTML5提供重要支持。这些工具在几年前并不常见，但现在每个程序员都习惯使用Java编程工具来开发或编程。这个工具包可以为开发人员提供非常有用的帮助，因为它可以轻松地编写和执行代码，并找到代码中的问题。jQuery UI借助jQuery UI，程序员可以为多个网站应用程...
JavaScript常用工具函数大全
10-15
主要介绍了JavaScript常用工具函数,汇总整理了各种JavaScript常用工具函数,包括获取、判断、转换、设置等相关功能函数的定义与使用方法,需要的朋友可以参考下
JavaScript 代码压缩工具小结
01-19
UglifyJS UglifyJS是构建于nodeJS服务器端之上的一个代码压缩工具，目前jQuery使用它来压缩，压缩效果比较好。 GitHub主页：http://github.com/mishoo/UglifyJS/ 在线使用：http://marijnhaverbeke.nl/uglifyjs 使用...
JavaScript调试工具汇总
12-12
　下面这几个基于桌面和WEB的JavaScript调试工具，能让你更高效地调试JavaScript代码，这样就可以： 更有效地处理动态类型使应用程序更符合编码标准　 Firebug 　Firebug已经出现很多年了，它为那些主要在Firefox上...
node-v9.6.0-x86.msi
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Python基于机器学习的分布式系统故障诊断系统源代码，分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别
04-29
基于技术手段（包括但不限于机器学习、深度学习等技术）对分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别，实现分布式系统故障运维的智能化，快速恢复故障的同时大大降低分布式系统运维工作的难度，减少运维对人力资源的消耗。在分布式系统中某个节点发生故障时，故障会沿着分布式系统的拓扑结构进行传播，造成自身节点及其邻接节点相关的KPI指标和发生大量日志异常
JavaScript前端开发的核心语言前端开发的核心语言
最新发布
04-29
javascript 当今互联网时代，JavaScript已经成为了前端开发的核心语言它是一种高级程序设计语言，通常用于网页的交互和动态效果的实现。JavaScript的灵活性以及广泛的使用使得它变得异常重要，能够为用户带来更好的用户体验。 JavaScript的特点之一是它的轻量级，它可以在网页中运行无需单独的编译或下载。这意味着网页可以更快地加载并且用户无需安装额外的软件才能运行网页上的JavaScript代码。此外，与HTML和CSS紧密结合，可以直接在HTML文档中嵌入，使得网页的开发变得非常便捷。 JavaScript具有动态性，它可以在浏览器中实时修改页面内容和样。它可以通过操作DOM（文档对象模型来动态地修改网页的结构和布局，并且可以根据用户的行为实时地响应各种事件，如点击、标悬停、滚动等。这使得开发者可以轻松地为网页添加交互性和动态效果，提供更好的用户体验。 JavaScript也是一种面向对象的语言。它支持对象、类、继承、多态等面向对象编程的概念，使得代码结构更加清晰和可维护。开发者可以创建自定义的对象和方法，对功能进行封装和复用，提高代码的可读性和可维护性。
四则运算自动生成程序安装包
04-29
四则运算自动生成程序安装包
基于Linux的私有文件服务器(网盘).zip
04-29
基于Linux的私有文件服务器(网盘)
源代码-access 管理 系统 API 文件.zip
04-29
源代码-access 管理 系统 API 文件.zip
海康机器人智能读码器工业协议操作手册V1.0.2.pdf
04-29
海康机器人智能读码器工业协议操作手册V1.0.2.pdf
256ssm-mysql-jsp 在线捐赠系统.zip（可运行源码+数据库文件+文档）
04-29
根据需求，确定系统采用JSP技术，JAVA作为编程语言，MySQL作为数据库。整个系统要操作方便、易于维护、灵活实用。主要实现了系统用户管理、注册用户管理、信息发布管理、医疗物品分类管理、项目信息管理、捐赠项目管理、志愿者申请管理、个人求助管理、个人捐赠统计、系统管理等功能。 前台用户模块包括： 1. 首页：网站打开的第一个页面，显示网站的最新信息。 2. 用户注册/登录、3. 新闻资讯、4. 暖心故事、5. 我要求助、6. 我要捐赠、7. 我们的项目、8. 志愿者中心：实现志愿者中心的列表显示、9. 系统简介、10. 在线留言、11. 用户后台 后台管理员模块包括： 1. 系统用户管理、2. 注册用户管理、3. 信息发布管理、4. 医疗物品分类管理、5. 项目信息管理、6. 捐赠项目管理、7. 志愿者申请管理、8. 个人求助管理：管理员可以设置个人求助审核状态，可以删除个人求助审核信息。 9. 个人捐赠统计：管理员可以查看个人捐赠统计信息。 10. 系统管理：管理员可以对留言板信息进行查看、回复或删除 关键词：医药捐赠系统；JSP;MySQL
系统性文献综述的撰写（Systematic Review）-范文2.pdf
04-29
参考范文：Findings on Teaching Machine Learning inHigh School: A Ten -Year SystematicLiterature Review 用于学习研究，侵权请联系本人删除
javascript加密工具
07-20
有一些常用的 JavaScript 加密工具可以帮助你对代码进行加密处理。以下是几个比较常见的工具： 1. UglifyJS：UglifyJS 是一个广泛使用的 JavaScript 压缩工具，可以将代码进行压缩和混淆，删除空格、换行和注释等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值