属性操作
1.1 节点属性操作
-
获取节点属性值
方式一：elem.属性
方式二：elem.getAttribute(‘属性’）
例如：li.getAttribute(‘index’,i) // 给每个 小li 添加 index 的类名，并赋值 i
-
设置修改节点属性值
方式一：elem.属性 = ‘值’ //修改属性的值
方式二：elem.setAttribute(‘属性’，‘新的属性值’)
例如：方式一： 1. myNode.src = "images/2.jpg"; //修改src的属性值 2. myNode.className = "image2-box"; //修改class的name 方式二： 1. myNode.setAttribute("src", "images/3.jpg"); 2. myNode.setAttribute("class", "image3-box"); 3. myNode.setAttribute("id", "你好"); -
删除节点的属性
方式：elem.removeAttribute(‘属性名’)
例如：- myNode.removeAttribute(“class”);
- myNode.removeAttribute(“id”);
代码演示：用setAttribute / getAttribute方式来写出 tab栏切换
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
//获取元素
var tab_list = document.querySelector('.tab_list');
var lis = documentquerySelectorAll('li');
var items = document.querySelectorAll('.item');
//循环绑定事件
for(vir i = 0; i < lis.length; i++){
//给每个小 li 添加自定义属性 属性值从 0 开始
lis[i].setAttribute('index',i);
//给每个 li 绑定点击事件 排他思想
lis[i].onclick = function(){
//1,上面的选项卡模块
for(var i = 0; i < lis.length; i+++){
//清除所有小 li 的样式
lis[i].className = '';
}
// 给点击的 li 添加属性
this.className = 'current';
}
//下面与上面选项卡相对于的选项组模块
var indexZhi = this.getAttribute('index'); //得到当前 index 的值
console.log(indexZhi); // 测试有没有得到相对应的 值
for(var i = 0; i < items.length; i++) {
//排他思想，清空 items 的样式
items[i].style.display = 'none'
}
items[indexZhi].style.display = 'block';
}
</script>
</body>
1.2 自定义属性
命名：H5规定自定义属性都要以 **date-**开头作为属性名并且赋值
获取方式：
- 兼容性获取：element.getAttribute(‘属性名’)
- H5新增: element** . dataset . 属性名** 或者 element** . dataset[‘属性名’]**
代码演示
<body>
<div getTime="20" data-index="2" data-lis-sisui="获取时记得用驼峰命名"></div>
<script>
var div = document.querySelector('div');
// console.log(div.geetTime); 这样是获取不到的，因为 getTime 是自定义属性
// getAttribute 兼容性首选
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time',20);
console.log(div.getAttribute('data-index'));
// H5新增的获取自定义属性的方法 它只能得到 data- 开头的类名
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['lisSisui']); //获取类名比较长的用驼峰命名法
console.log(div.dataset.lisSisui);
</script>
</body>
1.3 节点内容操作
1.3.1 父级节点
** parentNode** :父级节点
<div class="box">
<span class="erwine"> 父级节点获取方式： parentNode</span>
</div>
<script>
var erwine = document.querySelectou('.erwine');
console.log(erwine.parentNode);
</script>
1.3.2 所有子节点
childNodes ：所有子节点 这个不常用，因为这里面包含了空格和换行节点，
children ： 获取所有子节点， 这个常用 ，这个不会得到空格和换行之类的
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<script>
var ul =document.querySelector("ul");
var lis = ul.querySelectorAll("li");
// 第一种方法: childNodes 不常用
console.log(ul.childNodes); //这种不常用
// 第二种方法: children 经常用 返回的是一个 伪数组
console.log(ul.children);
</script>
获取 第一个子 节点： firstChild （不管文本节点还是元素节点都会获取） 或者· firstElementChild （i9版本以上的浏览器才支持）
获取 最后一个子 节点: lastChild （不管文本节点还是元素节点都会获取） 或者 lastElementChild （i9版本以上的浏览器才支持）
注意实际开发中获取第一个元素节点和最后一个元素节点的写法：
// 第一个节点索引号是 0
console.log(元素.children[0]);
//获取元素长度索引号，然后长度减去一个，就是最后一个节点名称
console.log(元素.children[元素.length - 1]);
代码例子:
<body>
<ul>
<li>四岁半1</li>
<li>四岁半2</li>
<li>四岁半3</li>
<li>四岁半4</li>
</ul>
<script>
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('li');
console.log(ul.childNodes);
console.log(ul.children); // 获取所有子节点 推荐使用这个 开发中常用这个
console.log(ul.children[0]); //获取第一个子节点 开发中常用这个
console.log(ul.children[ul.children.length-1]); //获取最后一个子节点 开发中常用这个
</script>
</body>
案例：新浪下拉菜单
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
var ul = document.querySelector('.nav');
var lis = ul.children;
for(var i=0; i < lis.length; i++){
lis[i].onmouseover = function(){
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
}
}
</script>
1.3.3 兄弟节点
上一个兄弟元素节点：previoudElementSibling
下一个兄弟元素节点：nextElementSibling
// 获取下一个兄弟元素节点 (兼容写法)
var result = li2.nextElementSibling || li2.nextSibling;
// previousElementSibiling 获取上一个 兄弟标签元素 (兼容写法)
var shangYi = li2.previousElementSibling || li2.previousSibling
代码演示：
<body>
<div class="box">
<div class="d1">内部盒子</div>
</div>
<ul>
<li>1</li>
<li class="li2">2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
// 还是 学习 如何获取 dom对象
// document.getElemeentsBy***()
// document.querySelector()
// 除了以上两种方法之外 ,也可以通过 标签之间的关系 来 获取
// 兄弟关系 和 父子关系
// 父子关系
var d1 = document.querySelector(".d1");
// parentNode 属性 可以获取到 元素的 父元素 dom对象
var box = d1.parentNode;
console.log(box);
var ul = document.querySelector("ul");
console.log(ul.children); // 获取ul 的所有 标签子节点 (常用)
console.log(ul.childNodes); // 获取ul 的所有子节点(包括换行符节点和注释节点)
// 兄弟关系
var li2 = document.querySelector(".li2");
console.log(li2);
// 下一个兄弟标签元素 nextElementSibiling
var next = li2.nextElementSibling;
console.log("下一个兄弟标签", next);
console.log(li2.nextSibling); // 不带element (都会计算换行符和注释节点) 获取下一个兄弟节点(换行符 注释也计算在内)
// 获取下一个兄弟元素节点 (兼容写法)
var result = li2.nextElementSibling || li2.nextSibling;
// previousElementSibiling 获取上一个 兄弟标签元素
var shangYi = li2.previousElementSibling || li2.previousSibling
console.log("上一个兄弟标签", li2.previousElementSibling);
// 获取单个 子节点
// el dom对象
// 第一个子节点
el.firstElementChild || el.firstChild;
// 第二个子节点;
el.lastElementChild || el.lastChild;
</script>
</body>
表单操作
语法：
- 表单元素的值由： value 属性控制
- 表单选框的状态由： checked 属性控制
- 下拉菜单的状态由： selected 属性控制
- 按钮是否禁用由： disabled属性控制
1:type = 'text' / 'password' 文本框 / 密码框
2：value='用户没输入之前预留的一些文字'
3：checked='true' / 'false'
4：selected='true' / 'false'
4：disabled ='true' / 'false'
代码演示
<body>
<button>点击</button>
<input type="text" value="四岁爱上了她">
<script>
//要求：点击后改变表单内部文字
var btn = document.querySelector('button');
var inp = document.querySelector('input');
btn.onclick = function() {
inp.value = '四岁';
//要求：点击后将点击按钮设置成禁用 disabled 禁用
//或者用 this.disabled = true;
btn.disabled = true;
}
</script>
</body>
案例练习 ：表单的密码的显示与隐藏
<body>
<div class="box">
<label for="" >
<img src="../自己练习/img/close.png" alt="" class="tup">
</label>
<input type="password" class="mima">
</div>
<script>
//要求：点击小眼睛图片，让密码呈现明文密码和隐藏密码切换
//获取元素
var inp = document.querySelector('.mima');
var eye = document.querySelector('.tup');
//绑定事件
var sisui = 0; //设置一个数，通过改变这个数来确定密码时显示还是隐藏
eye.onclick = function(){
if(sisui == 0){
inp.type = 'text';
eye.src = '../自己练习/img/open.png';
sisui = 1;
} else {
inp.type = 'password';
eye.src = '../自己练习/img/close.png';
sisui = 0;
}
}
</script>
</body>
定时器
- setTimeout() ： 延迟定时器
- setInterval() ：循环定时器
- clearTimeout() ：清除延迟定时器
- clearInterval() ：清除循环定时器
1.1 setTimeout(调用函数,[延迟的毫秒数])
setTimeout
语法： setTimeout(function(){},调用时间)
<body>
<script>
// 1. setTimeout
// 语法规范： window.setTimeout(调用函数, 延时时间);
// 1. 这个window在调用的时候可以省略
// 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
// 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
// 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
// setTimeout(function() {
// console.log('时间到了');
// }, 2000);
function callback() {
console.log('爆炸了');
}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
// setTimeout('callback()', 3000); // 我们不提倡这个写法
setTimeout(function(){
console.log('四岁爱上了她');
},3000)
</script>
</body>
代码案例： 5秒后关闭广告
<body>
<img src="../自己练习/img/qing.jpg" alt="">
<script>
var img = document.querySelector('img');
setTimeout(function(){
img.style.display = 'none';
},6000)
</script>
</body>
1.1.1 停止 setTimeout()定时器
clearTimeout
语法： ** window.clearTimeout(定时器的名字)**
<button>点击停止定时器</button>
<script>
var btn = document.querySelector('button');
// 定时器起个名字 setTimeout
var time = setTimeout(function(){
alert('爆照了');
},5000);
// 关闭定时器 clearTimeout
btn.addEventListener('click',function(){
clearTimeout(time);
})
</script>
1.2 setInterval(回调函数，调用时间) 定时器
setInterval()
语法： window.setInterval(回调函数，调用时间)；
<body>
<script>
// 1. setInterval
// 语法规范： window.setInterval(调用函数, 延时时间);
setInterval(function() {
console.log('继续输出');
}, 1000);
// 2. setTimeout 延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
// 3. setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
</script>
</body>
代码案例： 倒计时
<body>
<h1>距离光棍节，还有</h1>
<div class="item">
<span><span class="day">00</span>天</span>
<strong><span class="hour">00</span>时</strong>
<strong><span class="min">00</span>分</strong>
<strong><span class="second">00</span>秒</strong>
</div>
<button>点击停止倒计时</button>
<script>
var day = document.querySelector('.day');
var hour = document.querySelector('.hour');
var min = document.querySelector('.min');
var second = document.querySelector('.second');
var btn = document.querySelector('button');
//用户输入时间
var inputTime = +new Date('2021-11-11 00:00:00');
sisui();
// 开启 循环定时器
var daoJi = setInterval(sisui,1000);
//点击关闭定时器
btn.addEventListener('click',function(){
clearInterval(daoJi);
})
function sisui() {
//获取当前时间的毫秒数
var date = +new Date();
//用户输入时间与现在时间的差多少
var times = (inputTime - date) / 1000;
// 天数
var t =parseInt(times / 60 / 60 / 24);
t = t < 10 ? '0' + t : t;
day.innerHTML = t;
// 时
var h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
hour.innerHTML = h;
// 分
var f = parseInt(times / 60 % 60);
f = f < 10 ? '0' + f :f;
min.innerHTML = f;
// 秒
var m = parseInt(times % 60);
m = m < 10 ? '0' + m : m;
second.innerHTML = m;
}
</script>
</body>
1.2.1 停止 setInterval()定时器
clearInterval
语法： ** window.clearInterval(定时器的名字)**
<body>
手机号：
<input type="text">
<button>获取验证码</button>
<script>
var btn = document.querySelector('button');
var time = 10; //定义剩下的秒数，需要全局变量
btn.addEventListener('click',function(){
btn.disabled = true;
var timer = setInterval(function(){
if(time == 0){
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '获取验证码';
time = 10;
} else{
btn.innerHTML = '剩下'+time+'秒';
time--;
}
},1000);
})
</script>
</body>
扫一扫
1577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
