整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在JS中，浏览器已经为我们提供了document对象
document对象代表整个网页，该对象由浏览器提供，可以直接使用
<body>
<button id="btn">我是一个按钮</button>
<script>
// 在JS中，浏览器已经为我们提供了document对象
// document对象代表整个网页，该对象由浏览器提供，可以直接使用
// getElementById()是document的方法，通过方法可以根据元素的id属性获取一个元素
var btn = document.getElementById('btn');
// 修改btn的innerHTML属性
btn.innerHTML = "I'm Button";
// alert(btn.innerHTML);
// alert(btn);
// 通过JS来修改button中的文字
</script>
</body>JS中，可以将对象分为“内部对象”、“宿主对象”和“自定义对象”三种。
1，内部对象
js中的内部对象包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误类对象，包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。
其中Global和Math这两个对象又被称为“内置对象”，这两个对象在脚本程序初始化时被创建，不必实例化这两个对象。
2.宿主对象
宿主对象就是执行JS脚本的环境提供的对象。对于嵌入到网页中的JS来说，其宿主对象就是浏览器提供的对象，所以又称为浏览器对象，如IE、Firefox等浏览器提供的对象。不同的浏览器提供的宿主对象可能不同，即使提供的对象相同，其实现方式也大相径庭！这会带来浏览器兼容问题，增加开发难度。
浏览器对象有很多，如Window和Document，Element，form，image，等等。
3.自定义对象
顾名思义，就是开发人员自己定义的对象。JS允许使用自定义对象，使JS应用及功能得到扩充
事件（event）
- 事件指用户和浏览器的交互瞬间
- 在网页中，像点击鼠标、缩放窗口、点击键盘、移动鼠标...
- 可以在事件时来对事件做一些处理，对其进行响应
<body>
<!-- 设置事件响应的方式一:
- 可以通过在元素的事件属性中设置js代码的形式来响应事件
https://developer.mozilla.org/zh-CN/docs/Web/Events -->
<!--<button id="btn" onmouseenter="alert('你点我干嘛！');">点我一下</button>-->
<button id="btn">点我一下</button>
<script>
/*设置事件响应的方式二:
- 可以在script标签来设置事件的响应*/
// 获取要设置事件的对象
var btn = document.getElementById('btn');
// 可以为元素对应的事件属性设置响应函数形式来处理事件
btn.onclick = function () {
alert('哈哈哈');
};
</script>
</body>网页的加载是按照自上向下的顺序一行一行加载的
Window.onload 函数只能绑定一个!
如果将script标签写在网页的上方，它会优先于body加载
编写DOM相关的代码时，有两个编写位置：
1.编写在body标签的最后
2.编写在window.onload = function(){}的响应函数中
// 希望还是将代码写在网页上边
// 希望这些代码，可以在网页加载完毕之后在执行
// load事件表示资源加载，当资源加载完毕后事件会触发
window.onload = function () {
// window的load事件，会在网页加载完毕后触发
// 可以将希望在网页加载完才执行的代码，统一设置在load事件的响应函数中
// 这样即可确保代码在网页加载完成后才执行
//获取id为btn的元素
var btn = document.getElementById('btn');
//为btn绑定单击响应函数
btn.onclick = function () {
alert('哈哈哈哈');
};
};<script>
//定义一个函数，用来解决绑定代码重复的问题
/*
参数：
id 要绑定单击事件的按钮的id
callback 事件的响应函数
*/
function myClick(id, callback){
var btn = document.getElementById(id);
btn.onclick = callback;
}
window.onload = function () {
//为id为btn01的按钮绑定一个单击响应函数
//获取按钮对象
var btn01 = document.getElementById('btn01');
// 为其绑定单击响应函数
btn01.onclick = function () {
// getElementById()用来根据id属性来获取一个元素
// 查找#bj节点
var bj = document.getElementById('bj');
// innerHTML 可以用来查看和设置元素内部的html代码
alert(bj.innerHTML);
};
// 为btn02绑定一个单击响应函数
var btn02 = document.getElementById('btn02');
btn02.onclick = function () {
// 查找所有li节点
// getElementsByTagName() 用于根据标签名来获取一组元素节点对象
// 返回是一个类数组对象，所有符合条件的元素都会一起返回
var lis = document.getElementsByTagName('li');
// 遍历数组
for(var i=0; i<lis.length; i++){
alert(lis[i].innerHTML);
}
};
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById('btn03');
btn03.onclick = function () {
// 查找name=gender的所有节点
// getElementsByName() 根据元素的name属性来获取一组元素节点对象
var inps = document.getElementsByName('gender');
// 遍历inps
for(var i=0; i<inps.length; i++){
// 获取自结束标签的innerHTML，会返回空串
// alert(inps[i].innerHTML);
/*
读取一个元素的属性：
元素.属性名
例子：
name属性 元素.name
value属性 元素.value
id属性 元素.id
特殊：
class属性 元素.className
修改属性：
元素.属性名 = 属性值
*/
// alert(inps[i].className);
alert(inps[i].value);
}
};
//为btn04绑定一个单级响应函数
var btn04 = document.getElementById('btn04');
btn04.onclick = function () {
// 获取id为city的节点
var city = document.getElementById('city');
// 查找#city下所有li节点
var li = city.getElementsByTagName('li');
// li = document.querySelectorAll('#city li');
alert(li.length);
};
// 为btn05绑定一个单击响应函数
var btn05 = document.getElementById('btn05');
btn05.onclick = function () {
// 获取id为city的元素
var city = document.getElementById('city');
// 返回#city的所有子节点
// childNodes 是元素的属性，可以用来获取当前元素的所有子节点
// childNodes会返回当前元素的所有子节点（包括元素和文本）
// IE8以下的浏览器不会将空白的文本节点当成子节点
var cns = city.childNodes;
//遍历cns
// for(var i=0; i<cns.length; i++){
// alert(cns[i]);
// }
// alert(cns.length);
/*
children 是元素的属性，用来获取当前元素的子元素
*/
var cr = city.children;
alert(cr.length);
};
// 为id为btn06的按钮绑定一个单击响应函数
myClick('btn06', function () {
// 获取id为phone的元素
var phone = document.getElementById('phone');
// 返回#phone的第一个子节点
// firstChild用于获取元素的第一个子节点（包括空白的文本节点）
// lastChild 用于获取当前元素的最后一个子节点
// firstElementChild 用来获取当前元素的第一个子元素
// lastElementChild 用来获取当前元素的最后一个子元素
var fc = phone.firstChild;
var fec = phone.firstElementChild;
alert(fec);
});
myClick('btn07',function () {
//获取id为北京元素
var bj = document.getElementById('bj');
// 返回#bj的父节点
// parentNode 用来获取一个元素的父节点
var pn = bj.parentNode;
// innerText用来获取标签内部的文本内容，会自动去除html标签
alert(pn.innerText);
});
myClick('btn08',function () {
// 获取id为android的元素
var and = document.getElementById('android');
// 返回#android的前一个兄弟节点
// previousSibling 用来获取当前元素的前一个兄弟节点
// previousElementSibling 用来获取当前元素的前一个兄弟元素
// nextSibling 获取当前元素的下一个兄弟节点
// nextElementSibling 获取当前元素的下一个兄弟元素
var prev = and.previousSibling;
prev = and.previousElementSibling;
// and.nextElementSibling
alert(prev);
});
// 返回#username的value属性值
myClick('btn09',function () {
// 获取id为username的元素
var um = document.getElementById('username');
alert(um.value);
});
// 设置#username的value属性值
myClick('btn10',function () {
var um = document.getElementById('username');
um.value = "老弟可真帅啊！";
});
// 返回#bj的文本值
myClick('btn11',function () {
// 获取id为bj的元素
var bj = document.getElementById('bj');
// alert(bj.innerHTML);
// alert(bj.innerText);
// bj.innerHTML = '深圳';
// 获取bj的第一个子节点
// var fc = bj.firstChild;
// 文本节点的nodeValue，表示的是文本节点中的文字
// alert(fc.nodeValue);
alert(bj.firstChild.nodeValue);
});
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone">
<li>IOS</li>
<li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input class="haha" type="radio" name="gender" value="male" >
Male
<input class="haha" type="radio" name="gender" value="female">
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde">
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body><style>
#outer{
width: 520px;
background-color: #bfa;
margin: 50px auto;
text-align: center;
}
img{
vertical-align: bottom;
margin: 10px;
}
</style>
<script>
window.onload = function () {
// 点击按钮切换图片，点击上一张切换到上一张，点击下一张切换到下一张
// 获取图片标签
var img = document.getElementsByTagName('img')[0];
// 切换图片实际上就是修改img的src属性
// img.src = "img/3.jpg";
// 创建一个数组，用来存储图片的路径
var imgPath = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
//创建一个变量用来存储当前显示的图片的索引
var current = 0;
// 设置图片的信息
var info = document.getElementById('info');
info.innerHTML = '一共 '+imgPath.length+' 张图片，当前第 '+(current+1)+' 张';
//为两个按钮绑定单击响应函数
var prev = document.getElementById('prev');
var next = document.getElementById('next');
// 如何做到在五张图片之间切换？
prev.onclick = function () {
// 上一张
// 索引自减
current--;
//判断current是否小于0
if(current < 0){
current = imgPath.length - 1;
}
// 修改img的src来切换图片
img.src = imgPath[current];
// 图片切换完毕，修改信息
info.innerHTML = '一共 '+imgPath.length+' 张图片，当前第 '+(current+1)+' 张';
};
next.onclick = function () {
// 下一张
// 索引自增
current++;
//判断current是否大于4
if(current > imgPath.length - 1){
current = 0;
}
img.src = imgPath[current];
info.innerHTML = '一共 '+imgPath.length+' 张图片，当前第 '+(current+1)+' 张';
};
};
</script>
</head>
<body>
<div id="outer">
<p id="info">一共 5 张图片，当前第 1 张</p>
<img src="img/1.jpg" alt="冰棍">
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>getElementsByName()它返回的是一个实时更新的数组 所有的getElementsXxx的方法都是这个特点==页面代码加载完成后才更新添加
querySelector()- 可以根据选择器的字符串去页面中查询元素
- 会返回满足选择器的第一个元素
querySelectorAll() //两种都是静态获取
- 根据选择器获取一组元素节点对象
<script>
//getElementsByName()它返回的是一个实时更新的数组 所有的getElementsXxx的方法都是这个特点==页面代码加载完成后才更新添加
// 如果在网页中添加新的符合条件的元素，它会自动被添加到数组中
window.onload = function () {
// getElementsByClassName() 用于根据元素的class属性值来获取一组元素节点对象
var box1 = document.getElementsByClassName('box1');
// alert(box1.length);
// for(var i=0; i<box1.length; i++){
// box1[i].innerHTML = '哈哈哈哈哈哈';
// }
/*
querySelector()- 可以根据选择器的字符串去页面中查询元素
- 会返回满足选择器的第一个元素
querySelectorAll() //两种都是静态获取
- 根据选择器获取一组元素节点对象
*/
var result = document.querySelector('.box1');
result = document.querySelectorAll('.box1');
result = document.querySelector('[class=box1]');
result = document.querySelector('div');
result = document.querySelector('div:nth-child(2)');
// alert(result.innerHTML);
/*
document.all 是一个过时的属性
它表示页面中的所有元素
可以使用 document.getElementsByTagName('*') 来代替
document.body 获取页面中的body元素
document.documentElement 获取页面的根元素html
*/
// alert(document.all.length);
// var all = document.getElementsByTagName('*');
// alert(all.length);
// alert(document.body);
// alert(document.getElementsByTagName('body')[0]);
alert(document.documentElement);
};
</script>
</head>
<body>
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box1">3</div>
<div class="box1">4</div>
</body>欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。
学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。
在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。
此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。
我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。
如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！
#2023年度创作挑战#
于安全和隐私的原因，web 应用程序不能直接访问用户设备上的文件。如果需要读取一个或多个本地文件，可以通过使用input file和FileReader来实现。在这篇文章中，我们将通过一些例子来看看它是如何工作的。
由于浏览器中的 JS 无法从用户的设备访问本地文件，我们需要为用户提供一种方法来选择一个或多个文件供我们使用。这可以通过文件选择器<input type='fule' />来完成。
<input type="file" id="fileInput">如果想允选择多个文件，可以添加multiple属性:
<input type="file" id="fileInput" multiple>我们可以通过change事件来监听文件的选择，也可以添加另一个 UI 元素让用户显式地开始对所选文件的处理。
input file 具有一个files属性，该属性是File对象的列表（可能有多个选择的文件）。
File对象如下所示：
读取文件，主要使用的是[FileReader][1]类。
「该对象拥有的属性：」
「FileReader.error」 ：只读，一个DOMException，表示在读取文件时发生的错误 。
「FileReader.readyState」：只读 表示 FileReader 状态的数字。取值如下：
常量名值描述EMPTY0还没有加载任何数据LOADING1数据正在被加载DONE2已完成全部的读取请求
「FileReader.result」：只读，文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。
「该对象拥有的方法：」
readAsText(file, encoding)：以纯文本形式读取文件，读取到的文本保存在result属性中。第二个参数代表编码格式。
readAsDataUrl(file)：读取文件并且将文件以数据URI的形式保存在result属性中。
readAsBinaryString(file)：读取文件并且把文件以字符串保存在result属性中。
readAsArrayBuffer(file)：读取文件并且将一个包含文件内容的ArrayBuffer保存咋result属性中。
FileReader.abort()：中止读取操作。在返回时，readyState属性为DONE。
「文件读取的过程是异步操作，在这个过程中提供了三个事件：progress、error、load事件。」
progress：每隔50ms左右，会触发一次progress事件。
error：在无法读取到文件信息的条件下触发。
load：在成功加载后就会触发。
在下面的示例中，我们将使用readAsText和readAsDataURL方法来显示文本和图像文件的内容。
为了将文件内容显示为文本，change需要重写一下：
首先，我们要确保有一个可以读取的文件。如果用户取消或以其他方式关闭文件选择对话框而不选择文件，我们就没有什么要读取和退出函数。
然后我们继续创建一个FileReader。reader的工作是异步的，以避免阻塞主线程和 UI 更新，这在读取大文件(如视频)时非常重要。
reader发出一个'load'事件(例如，类似于Image对象)，告诉我们的文件已经读取完毕。
reader将文件内容保存在其result属性中。此属性中的数据取决于我们使用的读取文件的方法。在我们的示例中，我们使用readAsText方法读取文件，因此result将是一个文本字符串。
如果我们想要显示图像，将文件读取为字符串并不是很有用。FileReader有一个readAsDataURL方法，可以将文件读入一个编码的字符串，该字符串可以用作<img>元素的源。本例的代码与前面的代码基本相同，区别是我们使用readAsDataURL读取文件并将结果显示为图像:
1）由于安全和隐私的原因，JavaScript 不能直接访问本地文件。
2）可以通过 input 类型为 file 来选择文件，并对文件进行处理。
3） file input 具有带有所选文件的files属性。
4） 我们可以使用FileReader来访问所选文件的内容。
作者: Martin Splitt 译者：前端小智 来源：dev
原文：https://dev.to/g33konaut/reading-local-files-with-javascript-25hn
司最近一个需求 需要通过变量实现复制。
window.copyText = item => {//挂载到全局
var textArea = document.createElement('textArea');
textArea.innerHTML = item;
textArea.value = item;
document.body.appendChild(textArea);
textArea.select();
try{
if(document.execCommand("Copy")){
alert(`${item} 复制成功！`)
}else{
alert('复制失败！请手动复制！')
}
}
catch(err){
alert('复制错误！请手动复制！')
}
document.body.removeChild(textArea);
} window.copyText('！')*请认真填写需求信息，我们会在24小时内与您取得联系。
