标签：btn JavaScript var getElementById 按钮 91 document 95 节点
文章目录
91 DOM
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<button id="btn">一个按钮</button>
<script type="text/javascript">
/*
DOM，全称Document Object Model文档对象模型
JS中通过DOM操作HTML文档
文档：整个HTML网页文档
对象：将网页中的每一个部分都转换为了一个对象
模型：表示对象之间的关系，方便我们获取对象
节点Node：构成HTML文档最基本的单元
常用节点分为四类：
1. 文档节点：整个HTML网页文档
2. 元素节点：HTML文档中的HTML标签
3. 属性节点：元素的属性（id）
4. 文本节点：HTML标签中的文本内容
nodeName nodeType nodeValue
文档节点：#document 9 null
元素节点：标签名 1 null
属性节点：属性名 2 属性值
文本节点：#text 3 文本内容
浏览器已经为我们提供文档节点对象，这个对象是window属性，
可以在页面中直接使用，文档节点代表的是整个网页
*/
console.log(document); // object HTMLDocument
// 获取到button对象
var btn = document.getElementById("btn");
console.log(btn); // object HTMLDocument
// 修改按钮的文字
btn.innerHTML = "I'm button";
</script>
</body>
</html>
92 事件
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<!--
我们可以在事件对应的属性中设置一些js代码，
这样当事件被触发时，这些代码会执行
这种写法称为结构和行为耦合，不方便维护，不推荐使用
-->
<button id="btn" onclick="alert('别点我');">我是一个按钮（单击）</button>
<button id="btn" ondblclick="alert('别点我');">我是一个按钮（双击）</button>
<button id="btn" onm ousemove="alert('别点我');">我是一个按钮（鼠标移动）</button>
<script type="text/javascript">
/*
事件，就是用户和浏览器之间的交互行为，
比如：点击按钮，鼠标移动，关闭窗口
*/
/*
可以为按钮的对应事件绑定处理函数的形式来响应事件，
这样，当事件被触发时，其对应的函数将会被调用
*/
// 获取按钮对象
var btn = document.getElementById("btn");
// 绑定一个单击事件
// 像这种为单击事件绑定的函数，我们称为单击响应函数
btn.onclick = function(){
alert("你还点");
};
</script>
</body>
</html>
93 文档的加载
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
/*
浏览器在加载一个页面时，是按照自上向下的顺序加载的，
读取到一行就运行一行，如果将script标签写到页面的上边，
在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，
会导致无法获取到DOM对象
*/
// 获取按钮对象
var btn = document.getElementById("btn");
// 报错
btn.onclick = function(){
alert("hello");
};
console.log(btn); // null
/*
onload事件会在整个页面加载完成之后才触发，
为window绑定一个onload事件，
该事件对应的响应函数将会在页面加载完成之后执行，
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
*/
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("hello");
};
console.log(btn);
};
</script>
</head>
<body>
<button id="btn" onclick="alert('别点我');">我是一个按钮（单击）</button>
<script type="text/javascript">
/*
将js代码编写到页面下边就是为了，可以在页面加载完毕以后再执行js代码（推荐）
*/
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("hello");
};
console.log(btn);
</script>
</body>
</html>
94 DOM查询(1)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
// 为id为btn01的按钮绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
// 查找#bj节点
var bj = document.getElementById("bj");
// 打印bj
// innerHTML，通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML);
};
// 为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
// 查找所有li节点
// getElementsByTagName()可以根据标签名来获取一组元素节点对象
// 这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
// 即使查询到的元素只有一个，也会封装到数组中返回
var lis = document.getElementsByTagName("li");
// 打印lis
//alert(lis.length);
// 变量lis
for(var i = 0; i < lis.length; i++){
alert(lis[i].innerHTML);
}
};
// 为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
// 查找name=gender的所有节点
var inputs = document.getElementsByName("gender");
for(var i = 0; i < inputs.length; i++){
/*
innerHTML用于获取元素内部的HTML代码，
对于自结束标签，这个属性没有意义
*/
//alert(inputs[i].innerHTML);
/*
如果需要读取元素节点属性，直接使用"元素.属性名"
例子：元素.id，元素.value，元素.name
注意：class属性不能采用这种方式，读取class属性时需要使用元素.className
*/
alert(inputs[i].className);
}
};
};
</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>
<p>你喜欢哪款游戏</p>
<ul id="game">
<li id="cj">绝地求生</li>
<li>王者荣耀</li>
<li>金铲铲</li>
<li>保卫萝卜</li>
</ul>
<br>
<p>你收集的操作系统是</p>
<ul id="phone">
<li id="android">Android</li>
<li>IOS</li>
<li>鸿蒙</li>
</ul>
</div>
<div class=""inner>
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
</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>
</body>
</html>
95 图片切换的练习
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
/*
点击按钮切换图片
*/
// 获取两个按钮
var pre = document.getElementById("pre");
var next = document.getElementById("next");
/*
切换图片：修改img标签中src属性
*/
// 获取img标签
var img = document.getElementsByTagName("img")[0];
// 创建一个数组，用来保存图片的路径
var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"];
// 创建一个变量，保存当前正在显示的图片的索引
var index = 0;
// 设置提示文字
// 获取id为infor的p元素，一共4张图片，当前是第n张
var infor = document.getElementById("infor");
pre.onclick = function(){
index--;
if(index < 0){
index = imgArr.length - 1;
}
img.src = imgArr[index];
infor.innerHTML = "一共" + imgArr.length + "张图片，当前是第" + (index + 1) + "张";
};
next.onclick = function(){
index++;
if(index > imgArr.length - 1){
index = 0;
}
img.src = imgArr[index];
infor.innerHTML = "一共" + imgArr.length + "张图片，当前是第" + (index + 1) + "张";
};
};
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
width: 400px;
padding: 30px;
}
#outer {
width: 500px;
margin: 50px auto;
padding: 10px;
background-color: grey;
text-align: center;
}
</style>
</head>
<body>
<div id="outer">
<p id="infor">一共4张图片，当前是第1张</p>
<img src="img/1.jpg" alt="古风"/>
<button id="pre">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
标签：btn,
JavaScript,
var,
getElementById,
按钮,
91,
document,
95,
节点
From： https://blog.csdn.net/weixin_45980065/article/details/140632452