DOM（文档对象模型）
是一个可以改变网页内容、结构、样式的处理可扩展标记语言的接口
一、获取元素
方法：
1、根据ID获取
2、根据标签名获取
3、根据类名获取 （html5新增）
4、querySelector获取 （html5新增）
5、querySelectorAll获取 （html5新增）
6、获取特殊元素（body、html）
ID获取方法：
document.getElementById();
<div id="time">2019-9-9</div>
<script>
var time = document.getElementById("time");
console.log(time);// <div id="time">2019-9-9</div>
console.log(typeof time); // object
console.dir(time); //
</script>
注意：id是大小写敏感的字符串
console.dir() 打印我们返回的元素对象，更好的查看里面的元素对象。
标签名获取：
document.getElementByTagName();
var lis = document.getElementsByTagName('li')
console.log(lis);
console.log(lis[0]);
for(var i = 0;i < lis.length; i++) {
console.log(lis[i]);
}
var ol = document.getElementsByTagName("ol");
var lis = ol[0].getElementsByTagName("li") //注意：一定是ol[0]
console.log(lis);
element.getElementByTagName('标签名') // 给其父元素设置一个ID名
父元素必须是单个对象，获取时不包括父元素自
注意：
1、返回的是，获取过来对象的集合，以伪数组的形式存储的
2、若要依次打印里面元素，可通过遍历的方式
3、若里面只有一个元素，返回还是伪数组的形式
4、若页面没有这个元素，返回空的伪数组
根据类名获取
document.getElementsByClassName()
var boxs = document.getElementsByClassName('box');
注意事项与标签名类似
querySelector获取
document.querySelector('选择器') 返回指定选择器的第一个元素对象
var firstBox = document.querySelector('.box');
var nav = document.querySelector('#nav');
var li = document.querySelector('li');
querySelectorAll获取
document.querySelectorAll('选择器')；返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
获取特殊元素（body、html）
获取body 获取html
document.body document.documentElement
二、事件基础
组成：
1、事件源（事件被触发的对象）
2、事件类型（触发的事件类型，例如点击事件[click]）
3、事件处理程序（通过一个函数赋值的方式完成）
var button = document.querySelector('.btn') // 获取事件源
button.onclick = function() { // 添加点击事件
alert('姐姐生日快乐') // 事件处理后的结果
}
执行步骤
1、获取事件源
2、注册事件（绑定事件）
3、添加事件处理程序（采取函数赋值的形式）
三、操作元素
操作元素-改变元素内容
elelment.innerHTML //起始位置到终止位置的全部内容，包括html标签，保留空格和换行 elelment.innerText //起始位置到终止位置的内容，单去除html标签，去掉空格和换行
var btn = document.querySelector('button');
var div = document.querySelector('div');
var p = document.querySelector('p')//获取事件源
btn.onclick = function() { // 添加点击事件
div.innerHTML = nowTime(); // 事件处理程序，调用下面的获取时间函数
}
p.innerHTML = nowTime();
function nowTime() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates =date.getDate();
var arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = date.getDay();
var h = date.getHours();
h < 10 ? '0' + h : h;
var m = date.getMinutes();
m < 10 ? '0' + m : m;
var s = date.getSeconds();
s < 10 ? '0' + s : s;
return '今天是'+year+'年'+month+'月'+dates+'日'+arr[day]+' ' +h + ':' + m + ':' + s;
}
常见的鼠标事件
操作元素-修改元素属性
1、innerText、innerHTML 改变元素内容
2、src、href
3、id、alt、title
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button> <br>
<img src="../2-案例/images/ldh.jpg" alt="" title="刘德华">
<script>
var ldh = document.querySelector('#ldh');
var zxy = document.querySelector('#zxy');
var img = document.querySelector('img')
zxy.onclick = function() {
img.src = '../2-案例/images/zxy.jpg';
img.title = '张学友';
}
ldh.onclick = function() {
img.src = '../2-案例/images/ldh.jpg';
img.title = '刘德华';
}
表单元素的操作属性
type、value、checked、selected、disabled（禁用）
<button>按钮</button>
<input type="text" value="输入内容">
<script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function() {
input.value = '点死我吧';
this.disabled = true;
}
</script>
flag的使用
经典案例（仿京东密码框）
var img = document.querySelector('img');
var input = document.querySelector('input');
var flag = 0;
img.onclick = function () {
if(flag == 0) {
this.src = '../2-案例/images/open.png'
input.type = 'text';
// flag = 1;
flag = !flag;
} else {
this.src = '../2-案例/images/close.png'
input.type = 'password';
// flag = 0;
flag = !flag;
}
}
样式属性操作 （大小、颜色、位置等）
1、element.style 行内样式操作
2、element.className 类名样式操作
this.style.backgroundColor = 'purple'; this.style.width = '250px';
如果样式修改较多，可以采用操作类名的方式更改元素样式。
class是个保留字，因此使用className来操作元素类名属性。
className 会直接更改元素类名，会覆盖原先的类名（如果需要即保留之前的类名，有要添加新的类名，可以使用多类名的方法）
注意：
JS里面的样式采取驼峰命名法
JS修改style样式操作，产生的是行内样式，css权重较高
排它思想：
1、所有元素清除样式
2、给当前（this）添加样式
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 1. 获取所有按钮元素
var btns = document.getElementsByTagName('button');
// btns得到的是伪数组 里面的每一个元素 btns[i]
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';
}
}
</script>
经典案例（全选反选）
var j_cbAll = document.getElementById('j_cbAll');
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); //所有复选框
j_cbAll.onclick = function() {
console.log(this.checked);
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
// 2. 下面复选框需要全部选中， 上面全选才能选中做法
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
// flag 控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break;
}
}
j_cbAll.checked = flag;
}
}
自定义属性操作
获取元素属性值：
element.属性 获取属性值 elelment.getAttribute（'属性'）
区别：element.属性 获取内置属性值（元素自身自带的属性）
elelment.getAttribute（'属性'）； 主要获得自定义属性（标准），我们程序员自己定义的属性。
设置元素属性值
elelment.属性 ='值'； // 设置内置属性值
elelment.setAttribute('属性','值')； // 主要设置自定义的属性
class特殊之处，删除直接使用class，而不是className
div.setAttribute('class','footer')
移除属性
element.removeAttribute（'属性'）
H5自定义属性
h5规定自定义属性data-开头作为属性名并且赋值
<div data-index = "1"> </div>
element.setAttribute('data-index',2)
获取h5自定义属性
兼容性获取：element.getAttribute('data-index') // 主要使用这个
h5新增 element.datase.index 或者 element.dataset['index'] ie11以上支持
节点概述
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
元素节点 nodeType 为 1 （主要操作元素节点）
属性节点 nodeType 为 2
文本节点 nodeType 为 3
节点层级
父子兄层级关系
1、父级节点 （parentNode）
得到的时离元素最近的父级节点 （亲爹），若找不到则返回null
2、子级节点
childNodes （可不记）
children （常用的！！！）
获取所有的子元素节点
3、获取第一个和最后一个子元素
第一个子元素：firstElementChild 最后一个子元素：lastElementChild （兼容性问题）
第一个子元素：children[o]（没有兼容性问题）
最后一个子元素：children[ol.children.length - 1]
4、兄弟节点
nextSibling 返回下一个兄弟节点（包含文本节点等）
nextElementSibling 返回下一个兄弟元素节点
previousSibling 返回上一个兄弟节点（包含文本节点等）
previousElementSibling 返回上一个兄弟元素节点 （有兼容问题！！！）
5、创建节点 （动态创建元素节点）
var li = document.createElement('li')
createElement（'添加的元素'）
6、添加节点
appendChild（child）
ul.appendChild(li);
将一个节点添加到指定父节点的末尾
insertBefore（child，指定元素）
ul.insertBefore(lili,ul.children[0])
添加到指定元素前面
7、节点操作-删除节点
node.removeChild（child）
留言板案例：
<script>
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function(){
if(text.value == '') {
return false;
}
var li = document.createElement('li')
li.innerHTML = text.value + "<a href = 'javascript:;'>删除</a>";
ul.insertBefore(li,ul.children[0])
//删除操作
var as = document.querySelectorAll('a');
for(var i = 0; i < as.length; i++) {
as[i].onclick = function(){
ul.removeChild(this.parentNode)
}
}
}
</script>
节点操作-复制节点
node.cloneNode（）
var lili = ul.children[0].cloneNode(true);
1、若括号为空，或参数为false，则为浅拷贝，只复制里面的标签，不复制内容
2、若括号参数为true，则为深拷贝，既复制标签，也复制内容。
动态生成表格案例（重要）
var tbody = document.querySelector('tbody');
var data = [
{
name: '薛亚岗',
subject: 'JavaScript',
score: 100
}, {
name: '薛亚岗',
subject: 'JavaScript',
score: 100
}, {
name: '薛亚岗',
subject: 'JavaScript',
score: 100
}
];
for(var i = 0;i < data.length; i++){
// 创建tr
var trs = document.createElement('tr');
tbody.appendChild(trs);
// 创建td
for(var k in data[i]) {
var tds = document.createElement('td');
tds.innerHTML = data[i][k];
trs.appendChild(tds);
}
// 创建td包含的删除栏
var btn = document.createElement('td');
btn.innerHTML = '<a href = "javascript:;">删除</a>'
trs.appendChild(btn);
}
// 点击删除事件
var as = document.querySelectorAll('a');
for(var i = 0; i < as.length; i++) {
as[i].onclick = function(){
tbody.removeChild(this.parentNode.parentNode)
}
}
注意：数组中可以放对象。
三种动态创建元素的方式
1、document.write（）// 一般不用
document.write('<div></div>')
2、innerHTML 创建元素
3、document.createElement（）
区别：
1、document.write 时直接将内容写入页面的内容流，但是文档流执行完毕，会导致页面重绘。
2、innerHTML 时将内容写入某个DOM节点，不会导致页面全部重绘
3、innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4、creatElement（）创建多个元素效率稍微低一点点，但是结构更清晰。