一、DOM简介
1、什么是DOM：文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
2、DOM树
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示
DOM把以上内容都看做是对象。
二、获取元素
1、根据ID获取元素
1、因为我们文档页面从上往下加载，所以先要有标签，所以我们script写到标签的下面
2、get是获得的意思，element是元素的意思，by是通过的意思，用驼峰命名法严格区分大小写
3、参数：里面写id，id是大小写敏感的字符串
4、返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);//输出结果为：object
console.dir(timer);//console.dir打印我们返回的元素对象，更好的查看里面的属性和方法
</script>
2、根据标签名获取元素
<body>
<ul>
<li>蒹葭苍苍，白露为霜</li>
<li>所谓伊人，在水一方</li>
<li>溯洄从之，道阻且长</li>
<li>溯游从之，宛在水中央</li>
</ul>
<ul id="nav">
<li>蒹葭</li>
<li>蒹葭</li>
<li>蒹葭</li>
<li>蒹葭</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
console.log(lis);//返回的是：获取过来元素对象的集合，以伪数组的形式存储的
console.log(lis[0]);//返回的就是：<li>蒹葭苍苍，白露为霜</li>
//我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++){
console.log(lis[i]);
}
//element.getElementsByTagName()可以得到这个元素里面的某些标签 element:元素
var nav = document.getElementById('nav');//这个获得nav元素
var navLis = nav.getElementsByTagName('li');
console.log(navLis);
</script>
</body>
3、根据类名返回元素对象集合
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
//1、getElementsByclssName 根据类名获得某些元素集合。
var boxs = document.getElementsByClassName('box');
console.log(boxs);//得到所有的box
//2、querySelector 返回指定选择器的第一个元素对象 注意：里面的选择器需要加符号：.box：类 #nav：id
var firstBox = document.querySelector('.box');
console.log(firstBox);//输出结果就是：<div class="box">盒子1</div>
var nav = document.querySelector('#nav');
console.log(nav);//输出的就是id：nav里面的东西了
var li = document.querySelector('li')
console.log(li);//输出结果就是第一个li里面的内容了
//3、querySelectorAll 返回指定选择器的所有元素对象的集合
var allBox = document.querySelectorAll('.box')
console.log(allBox);//得到所有的box
var lis = document.querySelectorAll('li');
console.log(lis);//得到所有的li
</script>
</body>
4、获取body和html元素
<script>
//1、获取body元素
var bodyEle = document.body;
console.log(bodyEle);//返回body元素对象
console.dir(bodyEle);//body是元素对象
//2、获取html元素
var htmlEle = document.html;
console.log(htmlEle);//结果为：undefined
var htmlEle1 = document.documentElement;
console.log(htmlEle1);//获取到HTML标签
</script>
三、事件基础
所谓事件就是触发响应的一种机制，比如：点击按钮，弹出对话框
1、事件是有三部分组成的：事件源、事件类型、事件处理程序。我们也称为事件三要素。
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
//（1）、事件源：事件别触发的对象谁被触发谁就是事件源
var btn = document.getElementById('btn');
//事件类型：如何触发，什么事件，比如鼠标点击，还是鼠标经过，还是键盘按下，或者滚轮滚动，这都是事件类型。
//事件处理程序：通过一个函数赋值的方式来完成。
btn.onclick = function () {//onclick是：鼠标点击，事件类型；btn是：事件源；function是：事件处理程序。
alert('秋香姐');
}
做个例子：点击div，控制台就会输出：我被选中了。
<div>123</div>
<script>
//1、获取事件源
var div = document.querySelector('div');
//2、绑定事件（注册事件）
//div.onclicl
//3、添加事件处理程序
div.onclick = function () {
console.log('我被选中了');
}
</script>
四、操作元素
1、改变元素内容
<style>
div,p{
width:300px;
height:30px;
line-height: 30px;
color: #fff;
background-color: aqua;
}
</style>
</head>
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>时间</p>
<div></div>
<p>
文字
<span>123</span>
</p>
<script>
// //当我们点击按钮，div里面的文字发生变化
// //1、获取元素
// var btn = document.querySelector('button');
// var div = document.querySelector('div');
// //2、注册事件
// btn.onclick = function(){
// div.innerText = getDate();//innerText：改变元素内容
// }
// 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();//这样就是网页一刷新就显示。
//innerText 和 innerHTML的区别
//1、innerText 不识别html标签，去除空格和换行
var div = document.querySelector('div');
//div.innerText = '<strong>今天是：</strong> 2019';//像是结果为：<strong>今天是：</strong> 2019，直接把标签显示出来了。
//2、innerHTML 识别html，保留空格和换行
div.innerHTML = '<strong>今天是：</strong> 2019';//innerHTML识别html标签，显示出来的文字加粗了。
//这两个属性是可读写的，可以获取元素里面的内容。
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>
2、常用元素的属性操作
<body>
<button id="t1">01</button>
<button id="t2">03</button>
<img src="photo/01.jpg" alt="" title="01小姐姐">
<script>
//修改元素属性 src
//1、获取元素
var t1 = document.getElementById('t1');
var t2 = document.getElementById('t2');
var img = document.querySelector('img');
//2、注册事件 处理程序
t2.onclick = function(){
img.src = 'photo/03.jpg';
img.title = '03小姐姐';
}
t1.onclick = function(){
img.src = 'photo/01.jpg';
img.title = '01小姐姐';
}
</script>
</body>
3、表单元素的属性操作
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
//1、获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
//2、绑定事件 处理程序
btn.onclick = function(){
//input.innerHTML = '点击了';//这个是没有用的，这个是普通盒子，比如div标签里面的内容才用的。
//表单里面的值，文字内容是通过value来修改的。
input.value = '点击了';
//如果想要某个表单被禁用，如btn，不能再点击，用disabled，我们想要这个按钮禁用。
//btn.disabled = true;//按钮被禁用
this.disabled = true;//同上
//this 指向的是事件函数的调用者 btn。
}
</script>
</body>
4、行内样式操作
<style>
div {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
<script>
//1、获取元素
var div = document.querySelector('div');
//2、注册事件
div.onclick = function(){
//里面的属性采取的是驼峰命名法
this.style.backgroundColor = 'purple';
this.style.width = '300px';
}
</script>
</body>
5、类名样式操作
<style>
div {
width: 200px;
height: 200px;
background-color: aqua;
}
.change{
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="first">文本</div>
<script>
//1、使用element.style 获得修改元素样式 如果样式比较少或者功能简单的情况下使用
var div = document.querySelector('div');
div.onclick = function () {
// this.style.backgroundColor = 'purple';
// this.style.width = '300px';
//2、我们可以通过修改元素的className更改元素的样式，适合于样式较多或者功能复杂的情况
//this.className = 'change';让我们当前元素的类名改为了 change
//3、className更改元素会覆盖掉原先的类名，如果想要保留原先的类名，我们可以用多类名选择器
this.className = 'first change';
}
</script>
</body>
6、循环的排他思想
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//1、获取元素 所有按钮
var btns = document.getElementsByTagName('buttn');
//butns得到的是伪数组，里面的每一个元素用btns[i]
for (var i = 0; i < btns.length; i++){
btns[i].onclisk = function(){
//(1)、我们先把所以的按钮背景颜色去掉
for (var i = 0; i < btns.length; i++){
btns[i].style.backgroundColor = '';
}
//(2)、然后再让当前元素背景颜色为red
this.style.backgroundColor = 'red';
}
}
//排他思想：就是先排除自己人，然后再设置自己的样式，这种排除其他人的思想就是排他思想。
</script>
</body>
来个栗子：表单全选和取消全选
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 200px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 200px;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<th>
<input type="checkbox" name="" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</table>
<table id="j_tb">
<tr>
<td>
<input type="checkbox" name="" id="" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="" />
</td>
<td>iPAD Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="" />
</td>
<td>Apple Watsh</td>
<td>2000</td>
</tr>
</table>
</div>
<script>
//1、获取元素
var j_cbAll = document.getElementById('j_cbAll');//全选按钮
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');//下面的所有复选框
//2、绑定事件
j_cbAll.onclick = function () {
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
for (var i = 0; i < j_tbs.length; i++) {
//声明一个flag：控制全选按钮是否选中
j_tbs[i].onclick = function () {
//声明一个flag：控制全选按钮是否选中
var flag = true;
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break; //退出for循环，这样做提高执行效率，只要有一个没被选中，剩下的就不需要循环判断了。
}
}
j_cbAll.checked = flag;
}
}
</script>
</body>
7、自定义属性的操作
<body>
<div id="demo" index = "1"></div>
<script>
var div = document.querySelector('div');
//1、获取元素的属性值
//（1）、element.属性
console.log(div.id);
//（2）、element.getAttribute('属性');get:获取 attribute:属性 我们可以自己添加的属性称为自定义属性 index就是自定义属性，我们通常用element.getAttribute('属性');来获取
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
//2、设置元素属性值
//（1）、element.属性 = '值';
div.id = 'test';
div.className = 'navs';
//（2）、element.setAttr('属性','值'); 主要针对自定义属性
div.setAttribute('index',2);
div.setAttribute('class','footer');//class 特殊，这里面写的就是class不是className
//3、移除属性 removeAttribute(属性);
div.removeAttribute('index');//结果就没有index了。
</script>
</body>
4635
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
