1.DOM
1.1DOM简介
文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过这些DOM接口可以改变网页的内容结构和样式
文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用elemrnt表示
节点：网页中的所有内容都是节点（标签。属性。文本。注释等）DOM中用node表示
DOM中把以上内柔都看作是对象！
1.2获取元素
1.根据ID获取
getElementByld（）方法可以获取带有ID对象的类型
根据标签名获取
//1.因为我们文档页面从上往下加载，所以先得有标签，所以我们script写到标签的下面
//2.get 获得 elemrnt元素 by通过 驼峰命名法
//3.参数 id是大小写敏感的字符串
//4.返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
//5.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
2.根据标签名获取元素
getElementByTagName()方法可以返回带有指定标签名的对象的集合
//返回的是 获取过来的元素对象的集合 ，以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
//2.我们想要依次打印里面的元素对象我们可以采取遍历
for (var i = 0; i < lis.length; i++) {
console.log(lis[0]);
}
//3.如果页面中只有一个li 返回的还是伪数组的形式
//4.如果页面中没有这个元素则返回一个空的伪数组
//5.element.getgetElementsByTagName('标签名')；
//6.获取父元素内部所有指定标签名的子元素
//注意：父元素必须是单个对象（必须指明是哪一个元素对象）获取的时候不包括父元素自己
// var ol = document.getElementsByTagName('ol');
// console.log(ol[0].getElementsByTagName('li'));
// 常用以下：
var ol = document.getElementById('ftl');
console.log(ol.getElementsByTagName('li'));
3.H5新增获取元素
根据类名获取元素
//1.getElementsByClassName 根据类名获得某些元素集合
var box = document.getElementsByClassName('box');
console.log(box);
//2.querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器要加符号
var firstbox = document.querySelector('.box');
console.log(firstbox);
//3.document.querySelectorAll()返回指定选择器的所有元素
var allbox = document.querySelectorAll('.box');
4.获取特殊标签 body html
//1.获取body元素
var bodyEle = document.body;
//2.获取html元素
var htmlEle = document.documentElement;
console.log(htmlEle);
1.3事件基础
<button id="btn">唐伯虎</button>
<script>
//点击一个按钮，弹出对话框
//1.事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//（1）事件源 事件被触发的对象
var btn = document.getElementById('btn');
// (2) 事件类型 如何触发 什么事件 比如鼠标点击（onclick） 还是鼠标经过 还是键盘摁下
//（3）事件处理程序 通过一个函数赋值的方式完成
btn.onclick = function() {
alert('点秋香');
}
</script>
执行事件的步骤
1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采取函数处理程序）
<div>123</div>
<script>
//1.获取事件源
var div = document.querySelector('div');
//2.绑定事件
//div.onclick
//3.添加事件处理程序
div.onclick = function() {
alert('我被选中了');
}
</script>
1.4操作元素
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1123</p>
<script>
//当我们点击了按钮，div里面的文字会发生变化
//1.获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
//2.注册事件
btn.onclick = function() {
div.innerText = getDate();
}
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day];
}
//我们元素可以不用添加事件
var p = document.querySelector('p');
p.innerText = getDate();
</script>
//innerText和innerHTML的区别
//1.innerText不识别html标签 非标准 读写是去除空格和换行
var div = document.querySelector('div');
// div.innerText = '今天是2020';
//2.innerHTML 识别html标签 W3C标准 保留空格和换行
div.innerHTML = '<strong>今天是：</strong>2019';
//这两个属性是可读写的 ，可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
1.5操作元素属性
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
//2.注册事件
zxy.onclick = function() {
img.src = 'images/zxy.jpg';
img.title = '张学友';
}
ldh.onclick = function() {
img.src = 'images/ldh.jpg';
img.title = '刘德华';
}
1.6操作表单元素的属性操作
<button>按钮</button>
<input type="text" value="输入内容">
<script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function() {
// input.innerHTML 这是普通盒子才有
// 表单里面的值，文字内容是value修改
input.value = '被点击了';
btn.disabled = true; //禁用按钮
this.disabled = true;
// this指向的是事件函数的调用者
}
<!-- 1.核心思路 点击按钮把密码框改成文本框
2.一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
3.算法：利用一个flag变量，来判断flag的的值，如果是1就切换为文本框，flag设置为0，如过是0就切换为密码框，flag设置为1； -->
<div class="box">
<label for="">
<img src="images/close.png" alt="" id="eye">
</label>
<input type="password" name="" id="password">
</div>
<script>
//1.获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('password');
//2.注册事件
var flag = 0;
eye.onclick = function() {
//点击一次之后flag一定要变化
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>
1.7修改样式属性
var div = document.querySelector('div')
div.onclick = function() {
div.style.backgroundColor = 'purple';
div.style.width = '500px';
}
//JS修改style样式操作，产生的是行内样式，所以会覆盖原有样式
var text = document.querySelector('input');
//2.注册事件 获得焦点事件 onfocus
text.onfocus = function() {
if (text.value === '手机') {
text.value = '';
}
//获得焦点需要把文本框里面的文字颜色变黑
text.style.color = '#333'
}
//3.失去焦点事件 onblur
text.onblur = function() {
if (text.value === '') {
text.value = '手机';
}
//获得焦点需要把文本框里面的文字颜色变浅
text.style.color = '#999';
}
1.8使用calssName修改样式属性
修改样式过多的时候使用 ：类名样式操作
可以通过修改元素的className更改元素的样式，适合于样式比较多的时候，
注意：会直接覆盖原先的类名
如果我们想要保留原先的类名，我们可以这么做：多类名选择器
this.className = 'first change';
div {
width: 100px;
height: 100px;
background-color: pink;
}
.change {
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class='first'>文本</div>
<script>
var test = document.querySelector('div');
test.onclick = function() {
this.className = 'change';
}
</script>
div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url(images/mess.png) no-repeat left center;
padding-left: 20px;
}
.wrong {
color: red;
background-image: url(images/wrong.png);
}
.right {
color: green;
background-image: url(images/right.png);
}
</style>
</head>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
//首先判断的事件是表单失去焦点onblur
//1.获取元素
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
//2.注册事件 失去焦点
ipt.onblur = function() {
//根据表单里面值的长度ipt.value.length
if (ipt.value.length < 6 || ipt.value.length > 16) {
message.className = 'message wrong';
message.innerHTML = '您输入的位数不对,要求6-16位';
} else {
message.className = 'message right';
message.innerHTML = '您输入正确';
}
}
</script>
1.9排他思想（算法）
1.先干掉其他人
2.再设置自己
首先排除其他人，然后再设置自己的样式，这种排除他人的思想我们称为排他思想
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<script>
//1.获取所有按钮元素
var btns = document.getElementsByTagName('button');
//btns得到是伪数组
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
//(1)我们先把所有的按钮背景颜色去掉
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
//（2）然后才让当前的颜色变为pink
this.style.backgroundColor = 'pink';
}
}
1.10 自定义属性操作
一。获取属性
1.获取属性值
element.属性
只能获得内置属性的值
2.element.getAttribute('属性')
可以获取自定义属性 ，我们程序员自定的属性称为自定义属性
二。设置元素属性
1.element.属性=‘值’；
2.element.setAttribute('属性'，‘值’)；
主要针对于自定义属性
三。移除属性
element.removAttribute('');
案例见tab栏切换
1.11H5自定义属性
自定义属性目的：是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中
H5规定自定义属性data-开头
H5新增的获取自定义属性的方法
element.dataset.属性或者element.dataset['属性']
2.节点操作
2.1利用节点层级关系获取元素
利用父子兄节点关系获取元素
父级节点：node.parentNode
得到的是离元素最近的父级节点，如果找不到父节点返回null
子节点：parentnode.childNodes;
得到是所有的子节点 包括文本节点 元素节点
如果只想要获得元素节点则需专门处理，所以我们不提倡
子节点2.parentnode.children;
获取所有的子元素节点：实际开发常用的
获取第一个子节点：parentNode.firstChild
firstchild 第一个子节点 不管是文本节点还是元素节点
获取最后一个子节点：parentNode.lastChild
常用：parent.firstElementChild; 获取第一个元素节点
parent.lastElementChild；获取最后一个元素节点
实际开发的写法：既没有兼容性也返回第一个子元素：
parentNode.children[0];
返回最后一个元素：parentNode.children[i-1];
兄弟节点：node.nextElementSibling 返回当前元素的下一个元素节点
node.previousElentSibling 返回当前元素前一个元素节点
2.1创建节点和添加节点
创建节点：document.creatElement('tagname');
后面追加元素，类似于数组中的push（）；
添加节点：node.appendChild(child); node 父级 child 是子级
添加节点：node.insertBefor(child,指定元素)；
我们想要页面添加一个新的元素：1.创建元素 2.添加元素
2.2删除节点
node.removeChild(child);
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</li>
</ul>
<script>
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
// ul.removeChild(ul.children[0]);
//点击按钮一次删除里面的孩子
btn.onclick = function() {
if (ul.children.length == 0) {
this.disabled = 'true';
} else {
ul.removeChild(ul.children[0]);
}
}
</script>
阻止连接跳转：javascript：;
2.3复制节点
node.clonNode();
注意：1.如果括号参数为空或者false，则是浅拷贝，即只是复制节点本身，不复制里面的子节点
深拷贝：括号里加true；
2.4三种动态创建元素区别
1.document.write 是直接将内柔写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
2.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
3.innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4.ceratElement（）创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML效率比creatElement高
3.事件高级
3.1注册事件
给元素添加事件，称为注册事件或者绑定事件
注册事件有两种方式：传统方式和方法监听注册方式
传统注册方式：利用on开头的事件onclick，特点：注册事件的唯一性
方法监听注册方式：addEvenListener()它是一个方法
addachEvent（）IE9之前的IE不支持，可以用此代替
特点：可以注册多个事件
eventTarget.addEventListener(type,listener[,useCapture]);
该方法接受三个参数
type：事件类型字符串，比如click mouseover 注意不带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture :可选参数，是一个布尔值，默认是fasle
<button>传统注册方式</button>
<button>方法监听注册事件</button>
<script>
var btns = document.querySelectorAll('button');
btns[0].onclick = function() {
alert('hi');
}
//2.事件侦听注册事件 addEventListener里面的时间类型是字符串 必定加引号，不带on
//同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
btns[1].addEventListener('click', function() {
alert(22);
});
btns[1].addEventListener('click', function() {
alert(33);
});
</script>
3.2删除事件的方式
1.传统注册 方式 onclick=null；
2.侦听器方式 eventTarget.removeEventListener('click',fn);
//传统方式删除事件
var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
alert('11');
divs[0].onclick = null;
}
//2.侦听器注册
divs[1].addEventListener('click', fn); //里面的fn不需要调用
function fn() {
alert(22);
divs[1].removeEventListener('click', fn);
}
//删除侦听器的时候就不能用匿名函数了，要加函数名利于删除
3.3DOM事件流
事件流描述的是从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
DOM事件流分为3个阶段：
1.捕获阶段
2.当前目标阶段
3.冒泡阶段
实际开发更注重事件冒泡
有些事件没有冒泡： 比如 onblur onfocus onm ouseenter nomouseleave
<script>
//dom 事件流三个阶段
//如果addEventListener的第三个参数true 那么则处于捕获阶段
//documen-html-body-father-son
var son = document.querySelector('son');
son.addEventListener('click', function() {
alert('son');
}, true)
var father = document.querySelector('father');
son.addEventListener('click', function() {
alert('father');
}, true)
//如果addEventListener的第三个参数false或者省略 那么则处于冒泡阶段
//son-father-body-html-document
var son = document.querySelector('son');
son.addEventListener('click', function() {
alert('son');
}, false)
var father = document.querySelector('father');
son.addEventListener('click', function() {
alert('father');
}, false)
</script>
3.4事件对象
<script>
// 事件对象
// var div = document.querySelector('div');
// div.onclick = function(event) {
// console.log(event);
// }
//1.event就是一个事件对象 写到我们侦听函数的小括号里 当形参来看
//2.事件对象只有有了事件才会存在
//3.事件对象是我们事件的一系列相关数据的集合，
//跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含键盘事件的信息，
//比如用户摁下哪个键
//4.这个事件对象我们可以自己命名 比如：event evt e
//5.事件对象也有兼容性问题 ie678 通过window.event;
var div = document.querySelector('div');
div.addEventListener('click', function(event) {
console.log(event);
})
</script>
3.5 事件对象的常见属性和方法
e.target:返回的触发事件的对象（元素）
this返回的是绑定事件的对象（元素）
例如：给ul绑定对象然后点击li this返回ul ,e.target返回li；
区别：e.target点击了哪个元素，就返回哪个元素
this：哪个元素绑定了这个点击事件
e.type 返回点击事件的类型 注意这里不带on
3.6阻止默认事件 让链接不跳转或者提交按钮不提交
<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
<input type="submit" name="sub" id="" value="提交">
</form>
<script>
//2.阻止默认事件
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault(); //dom标准写法 常用
})
//传统注册方式
a.onclick = function(e) {
//普通浏览器
e.preventDefault();
//低版本浏览器
e.returnValue;
//return false 也能阻止默认行为，没有兼容性 特点：以后的代码也不执行
}
</script>
3.7阻止冒泡
事件冒泡：开始时由具体的元素接受，然后逐级向上传播到DOM最顶层节点
var son = document.querySelector('son');
son.addEventListener('click', function(e) {
alert('son');
e.stopPropagation(); //阻止冒泡标准写法
}, false)
var father = document.querySelector('father');
son.addEventListener('click', function() {
alert('father');
}, false)
3.8事件委托
原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父结点上，然后利用冒泡原理影响设置每个子节点
<ul>
<li>知否知否</li>
<li>知否知否</li>
<li>知否知否</li>
<li>知否知否</li>
<li>知否知否</li>
<li>知否知否</li>
<li>知否知否</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
alert('知否知否')
//e.target 这个可以得到我们点击的对象
e.target.style.backgroundColor = 'pink';
})
</script>
3.9鼠标事件
禁止鼠标右键
我是一段不愿意分享的文字
<script>
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
</script>
禁止鼠标选中
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
3.10鼠标事件对象
鼠标在页面中的坐标：client在可视区内的x y坐标
常用：pageX pageY在整个页面文档的坐标
3.11常用键盘事件
onkeyup 某个键盘按键松开时触发
onkeydown 某个键盘按键被按下时触发
onkeypress 某个键盘按键被按下时触发，但是它不识别功能键，比如ctrl shift 箭头等
三个事件的执行顺序时 keydown--keypress-keyup
<script>
// document.onkeyup = function() {
// console.log('我弹起了');
// }
document.addEventListener('keyup', function() {
console.log('我弹起了');
})
document.addEventListener('keydown', function() {
console.log('我按下去了');
})
</script>
3.12 键盘事件对象
keyCode返回ASCII码值
我们的keyup 和keydown事件不区分大小写 a和A得到的都是65
keypress区分大小写
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script>
var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
jd_input.addEventListener('keyup', function() {
if (this.value == '') {
con.style.display = 'none';
} else {
con.style.display = 'block';
con.innerHTML = this.value;
}
})
//当我们失去焦点，就隐藏盒子
jd_input.addEventListener('blur', function() {
con.style.display = 'none';
})
jd_input.addEventListener('blur', function() {
if (this.value != '') {
con.style.display = 'block';
}
})
</script>