持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第31天，点击查看活动详情
一，DOM简介
1.什么是DOM
2.DOM树
注意：DOM把以上内容都看做是对象，所以使用时也是按照对象的方法使用：变量.属性
二，获取元素
获取元素方式
1.通过ID获取
使用getElementById()方法获取带有ID的元素对象
语法：
var 变量 = document.getElementById('ID');document为文档的意思，此格式意为从文档中寻找获取
注意：
- get 获得 element 元素 by 通过 用的是驼峰命名法
- 参数id是大小写敏感的字符串
- 返回的是一个元素对象
2.通过标签名获取
使用getElementByTagName()方法返回带有指定标签名的对象的集合
语法：**
var 变量 = document.getElementByTagName('标签名');
注意：
- 返回的是获取过来的元素对象的集合，以伪数组的形式存储，想要依次打印里面的元素对象，可以采用遍历的方式
- 得到的元素对象是动态的（标签元素发生变化时，获取过来的也会变化）
还可以获取某个元素（父元素）内部所有指定标签名的子元素：
语法：
//获取的ol父元素返回的是伪数组
var ol = document.getElementsByTagName('ol');
//获取子元素时，必须指明单个父元素，这里用ol[0]表示第一个ol父元素
console.log(ol[0].getElementsByTagName('li'));
注意：
- 父元素必须是单个对象（必须指明是哪一个元素对象）
- 获取的时候不包括父元素自己
3.通过HTML5新增的方法获取
根据类名返回元素对象集合
//根据类名返回元素对象集合
document.getElementsByClassName('类名');
根据指定选择器返回元素对象
//根据指定选择器返回第一个元素对象
document.querySelector('选择器');
//根据指定选择器返回所有元素对象
document.querySelectorAll('选择器');
注意: querySelector 里面的选择器前面要加符号，若选择器为ID则加#，为类名加. 为标签时不加
4.特殊元素获取
获取body标签：直接document.body
var bodyEle = document.body;
获取HTML标签：使用document.documentElement
var htmlEle = document.documentElement;
三，事件基础
1.事件概述
2.事件三要素：事件源，事件类型，事件处理程序
01.事件源：事件被触发的对象 02.事件类型：如何触发，什么事件比如鼠标点击（onclick）,鼠标经过等
常见鼠标事件：
03.事件处理程序：通过一个函数赋值的方式完成
例子：点击一个按钮弹出对话框
//因为js是从上往下执行，所以元素应在获取元素前，这也是<script></script>
//在body里面，button下面的原因
//后面会学到把<script></script>提到前面的做法
<body>
<button id="btn">我是按钮</button>
<script>
//获取元素 btn为事件源
var btn = document.getElementById('btn');
//事件类型 事件处理程序
btn.onclick = function() {
alert('点我干嘛');
}
</script>
</body>
3.执行事件的过程
01.获取事件源 02.注册事件（绑定事件） 03.添加事件处理程序（采用函数赋值形式）
<body>
<button id="btn">我是按钮</button>
<script>
//获取元素 btn为事件源
var btn = document.getElementById('btn');
//事件类型 btn.onclick
//事件处理程序
btn.onclick = function() {
alert('点我干嘛');
}
</script>
</body>
四，操作元素
Javascript的DOM操作可以改变网页内容，结构和样式，可以利用DOM操作元素来改变元素里面的内容，属性等
1.改变元素内容(常用)
==innerText== ==innerHTML==
案例：1.点击按钮后按钮上文字发生变化 2.直接改变p中的内容
<body>
<button id="btn">我是按钮</button>
<p>我我我</p>
<script>
//1
var btn = document.getElementById('btn');
btn.onclick = function() {
// btn.innerText = '点我干嘛';
btn.innerHTML = '点我干嘛';//常用innerHTML
}
//2
var p = document.querySelector('p');
p.innerHTML = '你你你你';
</script>
</body>
注意：
- innerText不识别HTML标签
- innerText和innerHTML是可读写的，可获取元素里面的内容
2.修改元素属性
常用元素的属性操作：src（图片），href（链接），id，alt，title等
通过格式：
获取的元素.属性='新的值'来改变元素属性
3.修改表单元素的属性
利用DOM可以操作的表单元素的属性：type value checked selected disabled等
- 表单里面的文字内容是通过value修改的
- ==想要某个表单（按钮）被禁用不能再点击，可用disabled：令btn.disabled=true 则btn就被禁用了==
- input中 type="password"时为密码框，type="text"时为文本框
4.修改样式属性
可以通过JS修改元素的大小，颜色，位置等样式
element.style 行内样式操作
(使用后产生的是行内样式，权重较高) --------格式：需要修改的元素对象.style.样式属性
--------样式属性采取驼峰命名法：如backgroundColor
element.className 类名样式操作
当需要修改的样式过多时再用element.style就会生成很多的行内样式
为解决这种情况，我们可以直接先写一个新的类名，其中添加要修改成为的样式
然后用：
需要修改的元素对象.className='新的类名';即可把该新类名覆盖样式的原类名，实现样式修改的操作
若不想完全覆盖原类名可以这样写：
需要修改的元素对象.className='原类名 新的类名';
5.操作元素总结
6.排他思想
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
//1.获取所有按钮元素
var btns = document.getElementsByTagName('button');
//btns得到的是伪数组 里面的每一个元素btns[i]
for (var i = 0; i < btns.length; i++) {
//2.首先排除其他人，然后再设置自己的样式 排他思想
btns[i].onclick = function() {
//先把所有的按钮背景颜色去掉 干掉所有人
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
//然后才让当前点击的元素背景颜色改变 留下我自己
this.style.backgroundColor = 'pink';
}
}
</script>
7.自定义属性操作
01.获取属性值
<div id="div" index="1"></div> //index为自定义属性
<script>
var div = document.querySelector('div')
//getAttribute可以获得自定义的属性值
console.log(div.getAttribute('index')); //1
//获取元素自带属性的值时两种方法等价
console.log(div.id); //div
console.log(div.getAttribute('id')); //div
</script>
02.设置移除自定义属性
设置修改属性值
移除属性
element.removeAttribute('属性');- 可以直接删掉属性和值
03.H5自定义属性
为使能一眼判断出属性是不是自定义的 H5提出了规范：以data-开头的为自定义变量
<div getTime="10" data-index="1" data-list-name="Tom"></div>
<script>
var div = document.querySelector('div');
//由于不知道getTime是不是自定义属性，用传统方法可能会出错
console.log(div.getTime); //undefined
//用传统方法不对，此时再用getAttribute获取自定义变量
//存在试错，费时间
console.log(div.getAttribute('getTime')); //10
//为使能一眼判断出属性是不是自定义的
//H5提出了规范：以data-开头的为自定义变量
//dataset是一个集合 里面存放了所有以data开头的自定义属性
//h5新增的获取自定义的方法只能获取data开头的
console.log(div.dataset.index); //1
console.log(div.dataset['index']); //1
//如果自定义属性里面有多个-链接的单词，获取的时候采取驼峰命名法
console.log(div.dataset.listName); //Tom
console.log(div.dataset['listName']); //Tom
</script>
注意：
- h5新增的获取自定义的方法只能获取data开头的
- 如果自定义属性里面有多个-链接的单词，获取的时候采取驼峰命名法
- H5新增的获取自定义变量的方法 ie11才开始支持
