获取元素
获取id元素
var timer = document.getElementById('id');//获取id元素 console.dir(timer);//打印我们返回的元素对象 更好的查看里面的属性和方法
获取标签元素
//返回的是 获取过来元素对象的集合 以伪数组的形式储存的 var lis = document.getElementsByTagName('li'); console.log(lis); //不管有没有元素 返回的都是伪数组的形式
//获取某个元素（父元素）内部所有指定标签名的子元素 element.getElementsByTagName('标签名');
通过HTML5新增方法获取
document.getElementClassName('类名');//根据类名返回元素对象集合 document.querySelector('选择器');//根据指定选择器返回第一个元素 document.querySelectorAll('选择器');//根据指定选择器返回
获取特殊元素
var bodyEle = document.body;//获取body元素 console.dir(bodyEle); var htmlEle = document.documentElement;//返回html元素
操作元素
修改元素内容
innerText 和 innerHTML
//显示时间 <body> <button>点击显示时间</button> <div>123</div> <script> var b = document.querySelector('button'); var div = document.querySelector('div'); b.onclick = function () { div.innerText = getDate(); } function getDate() { console.log('aaaa'); var date = new Date; var year = date.getFullYear(); var mouth = date.getMonth() + 1; var day = date.getDate(); return '今天是：' + year + '年' + mouth + '月' + day +'日'; } </script> </body>
innerText 和 innerHTML 的区别
- 1.innerText 不识别html标签 非标准 去除空格和换行
- 2.innerHTML 识别html标签 W3C标准 保留空格和换行
修改元素属性
图片按钮切换
<body> <button id="ph1">图片1</button> <button id="ph2">图片2</button> <br> <img width="100px" height="80px" src="photo/WallPage_Git.png" alt="" title="git图片"> <script> var p1 = document.getElementById('ph1'); var p2 = document.getElementById('ph2'); var ig = document.querySelector('img'); p2.onclick = function () { ig.src = "photo/WallPaper_Idea.jpg"; } p1.onclick = function () { ig.src = "photo/WallPage_Git.png"; } </script> </body>
案例->分时问候
<body> <img width="100px" height="80px" src="photo/WallPage_Git.png" alt="" title="git图片"> <br> <p>上午好</p> <script> var ig = document.querySelector('img'); var p1 = document.querySelector('p'); var date = new Date(); var h = date.getHours(); if(h >= 12){ ig.src = "photo/WallPaper_Idea.jpg"; p1.innerHTML = "下午好！" } </script> </body>
案例->显示隐藏密码框
//设置密码框的密码可见切换 var eye =document.getElementById('eye'); var pwd = document.getElementById('user_pwd'); var flag= 0;//点击依此eye,flag变换一次 eye.onclick = function () { if(flag == 0){ pwd.type = 'text'; eye.src = 'imgs/icon/open_eye.svg'; flag = 1; }else{ pwd.type = "password"; eye.src = "imgs/icon/close_eye.svg"; flag = 0; } }
样式属性操作
- 1.行内样式操作，修改的样式较少时适合
element.style
- 2.类名样式操作,修改样式较多时使用
element.className
