获取页面元素方法
1.根据id获取 使用getElementById('id')方法获取带有id的对象
<div id='time'>2021-03-04</div>
<script>
//因为我们文档页面从上往下加载,所以要先有标签 script写在下面
//参数是大小写敏感的字符串
//返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
//console.dir 打印我们返回的元素对象,更好的查看里面的属性和方法
console.dir(timer)
</script>
2.根据标签名获取 使用getElementsByTagName('标签名')方法可以返回带有指定标签名的对象的集合
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol id = 'ol'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<script>
//返回的是获取过来的元素对象的集合 以伪数组的方式存储
// var ls = document.getElementsByTagName('li');
// console.log(ls);
// console.log(ls[0]);
// //我们想依次打印里面的元素我们可以采取遍历的方式
// for(i=0;i<ls.length;i++) {
// console.log(ls[i]);
// }
//如果页面中只有一个li 返回的还是伪数组的形式
//如果页面一个li都没有 返回的是一个空的伪数组
// (2).还可以获取某个父元素内部所有指定标签名的子元素
// var ol = document.getElementById('ol');
// console.log(ol);
// console.log(ol.getElementsByTagName('li'));
</script>
3.通过HTML5新增的方法来获取
(1).document.querySelector 是返回指定选择器第一个元素对象 和下面的用法一样 推荐使用
<div class="box">盒子</div>
<div class="box">盒子2</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
<ol id = 'ol'>
<li>3</li>
<li>4</li>
</ol>
<script>
var boxs = document.querySelector('.box') //返回指定选择器第一个元素对象
console.log(boxs);
(2).document.querySelectorAll 返回指定选择器的所有元素集合 切记里面要加符号 类是.box id是#id
var box = document.querySelectorAll('.box');
console.log(box);
4.获取body和HTML
(4).获取body元素 document.body 返回body元素对象
(5).获取html元素 document.documentElement 返回html元素对象
事件基础
<!-- (1).事件源 事件被触发的对象 -->
<!-- (2).事件类型 如何触发 什么事件 比如鼠标点击,经过,键盘按下 -->
<!-- (3).事件处理程序 通过函数赋值的方式 完成 -->
1.执行步骤
// 1.获取事件源
var div = document.getElementById('div');
//2.绑定事件 div.onclick
//3.添加事件处理程序
div.onclick = function () {
console.log('你被选中了');
}
2.有时候也不需要添加事件
var date = new Date();
var h = date.getHours();
var p = document.querySelector('p');
p.innerHTML = h;
通过innerText 和 innerHTML 修改网页元素的内容
// innerText 和innerHtml的区别
// 1.innerText 不识别html标签 去除空格和换行
// 2.innerHTML 识别html标签 保留空格和换行
var BT = document.querySelector('button'); //这一步是获取网页元素button的元素对象
var div = document.querySelector('div'); //这一步是获取网页元素DIV的元素对象
BT.onclick //这一步是事件注册 = function () { //这一步是事件处理程序
div.innerText = '2021-03-04'
}
//同时这两个也可以读取 可以获取页面元素里面的内容
console.log(div.innerHTML);
操作元素修改元素里面的内容 修改属性 html属性
<button id = 'ldh'>刘德华</button>
<button id = 'zxy'>张学友</button><br>
<img src="jsapis_material/第一天/images/ldh.jpg" alt="" >
<script>
var ldh =document.getElementById('ldh');
var zxy =document.getElementById('zxy');
var imges = document.querySelector('img');
//这一步就是操作网页元素的scr属性和title属性的路径来实现点击不同的按钮切换不同的图片
zxy.onclick = function() {
imges.src= 'jsapis_material/第一天/images/zxy.jpg';
imges.title = '张学友大帅哥';
}
ldh.onclick = function() {
imges.src= 'jsapis_material/第一天/images/ldh.jpg';
imges.title = '刘德华';
}
课程案例：
<body>
<img src="jsapis_material/第一天/images/z.gif" alt="">
<div>早上好</div>
<script>
//获取网页元素
var imges = document.querySelector('img');
var div = document.querySelector('div');
//获取系统当前的时间
var date = new Date();
var h = date.getHours;
//判断当前时间修改里面的页面内容和属性
if(h<12) {
imges.src = 'jsapis_material/第一天/images/z.gif'
div.innerHTML = '早上好'
}else if (h<18) {
imges.src = 'jsapis_material/第一天/images/x.gif'
div.innerHTML = '下午好'
}else {
imges.src = 'jsapis_material/第一天/images/w.gif'
div.innerHTML = '晚上好'
}
</script>
</body>
表单属性修改
<body>
<button>表单</button>
<input type="text" value="输入内容">
<script>
var bt = document.querySelector('button');
var inp = document.querySelector('input');
bt.onclick = function() {
// inp.innerHTML = '输入个屁'; innerHTML只是修改普通盒子 比如div里面的内容
// 表单里的值 文字内容是通过value来修改的
inp.value = '输入个屁'
// 如果我们点击了一次这个按钮显示想要的内容后，想要禁用这个按钮，那就进行以下操作
// bt.disabled = true; 这一步的意思是这个按钮禁用 true的意思是，是的
this.disabled = true; //this指向的是这个事件函数的调用者 谁调用了函数就指向谁
}
</script>
</body>
课程案例:
<body>
<div class="box">
<label for="">
<img src="jsapis_material/第一天/images/close.png" alt="">
</label>
<input type="password">
</div>
<script>
//这个案例我们用到的算法是利用一个flag变量 通过判断flag变量的值来切换是文本框还是密码框
//获取元素
var imges = document.querySelector('img');
var inp = document.querySelector('input');
var flag = 0;
//注册事件 处理事件
imges.onclick = function () {
if (flag == 0) {
//点击一次后,flag一定要变化
inp.type = 'text';
imges.src = "jsapis_material/第一天/images/open.png";
flag = 1;
} else {
inp.type = 'password';
imges.src = "jsapis_material/第一天/images/close.png";
flag = 0;
}
}
</script>
</body>
修改样式属性
<body>
<div>
</div>
<script>
var div = document.querySelector('div');
div.onclick = function() {
// div.style里面的属性 采取驼峰命名法 fontSize
//JS修改style样式操作,产生的是行内样式,css权重比较高
div.style.backgroundColor = 'red';
div.style.width = '250px'
}
</script>
</body>
课程案例:
<style>
div {
position: relative;
width: 150px;
height: 150px;
margin: 0 auto;
background: url(jsapis_material/第一天/images/tao.png) no-repeat;
}
div span {
position: absolute;
width: 15px;
height: 15px;
top: 0;
left: -15px;
font-size: 10px;
background-color: pink;
line-height: 15px;
text-align: center;
}
</style>
<body>
<div>
<span>x</span>
</div>
<script>
var div = document.querySelector('div');
var sp = document.querySelector('span');
sp.onclick = function() {
div.style.display = 'none';
}
</script>
</body>
