DOM
文档对象模型，编程接口 document.getElementById(‘id’) 获取id元素，返回的是元素对象 document.getElementsByTagName（）获取标签名 返回的是元素对象的集合，以伪数组存储 element.getElementsTagName（）获取某个元素里的标签 document.getElementsClassName（）获取类名 document.querySelector（）获取指定选择器的第一个元素 document.querySelectorAll（）获取指定选择器的全部元素集合 特殊元素获取： body：document.body html：document.documentElement
事件
事件三要素：事件源、事件类型、事件处理程序 事件源：获取元素 事件类型：注册事件，例如点击事件 事件处理：函数赋值 鼠标事件： onclick 鼠标点击 onmouseover 鼠标经过 onmouseout 鼠标离开 onfocus 获得鼠标焦点 onblur 失去鼠标焦点 onmousemove 鼠标移动 onmouseup 鼠标弹起 onmousedown 鼠标按下
操作元素
改变元素内容： element.innerText:从起始到终止位置的全部内容，但它去除html标签，空格和换行也会去掉 element.innerHTML:从起始到终止位置的全部内容，保留html标签，空格换行也保留 修改样式： element.style 采用驼峰命名法，行内样式 element.className
案例
点击获取时间
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>Document
</title
>
<style
>
div
{
margin
: 100px auto
;
width
: 200px
;
height
: 100px
;
line
-height
: 100px
;
background
-color
: #
000;
text
-align
: center
;
color
: white
;
}
button
{
display
: block
;
margin
: 0 auto
;
}
</style
>
</head
>
<body
>
<button
>点击获取时间
</button
>
<div
>时间显示区
</div
>
<script
>
var btn
= document
.querySelector('button');
var div
= document
.querySelector('div');
btn
.onclick = function() {
div
.innerText
= getDate();
}
function getDate() {
var date
= new Date();
var year
= date
.getFullYear();
var month
= date
.getMonth() + 1;
var day
= date
.getDate();
var week
= date
.getDay();
var arr
= ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
return year
+ '年' + month
+ '月' + day
+ '日' + ' ' + arr
[week
];
}
</script
>
</body
>
</html
>
密码可见
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>Document
</title
>
</head
>
<style
>
.box
{
position
: relative
;
width
: 400px
;
margin
: 100px auto
;
border
-bottom
: 1px solid #ccc
;
}
.box input
{
width
: 370px
;
height
: 30px
;
border
: 0;
outline
: none
;
}
.box label img
{
position
: absolute
;
top
: 0;
right
: 0;
width
: 24px
;
}
</style
>
<body
>
<div
class="box">
<label
for="">
<img src
="images/close.png" alt
="">
</label
>
<input type
="password">
</div
>
<script
>
var eye
= document
.querySelector('img');
var pwd
= document
.querySelector('input');
var flag
= 0
eye
.onclick = function() {
if (flag
== 0) {
pwd
.type
= "text";
eye
.src
= "images/open.png";
flag
= 1;
} else {
pwd
.type
= "password";
eye
.src
= "images/close.png";
flag
= 0;
}
}
</script
>
</body
>
</html
>
