DOM介绍
JavaScript一共包括三部分,分别是ECMAScript也就是JavaScript基础、DOM和BOM。
今天来将一下DOM,先说说什么是DOM,DOM(Document Object Model)文档对象模型,所谓文档,也就是对网页中的内容、结构和样式进行操作,对象也就是在操作过程中返回值为对象类型,我们学习DOM主要就是对元素进行创建、增、删、改、查、属性操作、时间操作,来看下DOM树吧,最顶层就是Document
获取元素
获取元素有很多方法,可以通过id获取,可以通过类获取,其中querySelector既可以通过id也能通过类,详细内容都在注释里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素</title>
</head>
<body>
<div id="time">2019.10.12</div>
<div class="box">盒子</div>
<div class="box">盒子</div>
<ul id="ul">
<li>我是丽丽</li>
<li>我是丽丽</li>
<li>我是丽丽</li>
<li>我是丽丽</li>
<li>我是丽丽</li>
</ul>
<script>
//js是从上往下执行的,所以js要写到div下面
//通过id获得元素
var time = document.getElementById('time');
console.log(time);//这里就获得了<div id="time">2019.10.12</div>元素
console.log(typeof time);//返回的time是一个object对象
//获取多个元素
var lis = document.getElementsByTagName('li');//这里返回的是个集合,伪数组的形式
console.log(lis);//这里可以通过下标访问,第一个元素是lis[0]
//如果这里有很多的li而你只想获得ul中的li可以如下指定获取方法
var ul = document.getElementById('ul');
var lis1 = ul.getElementsByTagName('li');
console.log(lis1);
//通过class获得元素
var boxs = document.getElementsByClassName('box');
console.log(boxs);
//querySelector() 返回指定选择器的第一个元素,类要加. id要加#,这个比较常用
var box = document.querySelector('.box');//这是类选择器
console.log(box);
var ul1 = document.querySelector('#ul');//这是id选择器
console.log(ul1);
var li = document.querySelector('li');//标签选择器
console.log(li);
//querySelectorAll() 返回一个集合,是个伪数组的形式
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis2 = document.querySelectorAll('li');
console.log(lis2);
</script>
</body>
</html>
运行结果
操作元素
操作元素是个重头戏了,可以通过元素内容、元素属性、表单属性、样式属性进行操作,具体操作都有注释,由于运行是交互式的结果,这里就进行演示了,只能截一张表面上的图了,感兴趣的可以复制代码自己尝试下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作元素</title>
<style>
.d {
width: 200px;
height: 200px;
background-color: green;
}
.change {
width: 500px;
height: 500px;
background-color: pink;
}
</style>
</head>
<body>
<button id="btn">点击我</button>
<div>点击按钮,我会发生变化</div>
<button id="btn1">盒子1</button>
<button id="btn2">盒子2</button><br>
<img src="btn1.jpg" alt="我是盒子1"><br>
<button id="btn3">按钮</button>
<input type="text" value="输入内容">
<div class="d"></div>
<div id="dd" data-index="2"></div>
<script>
//元素内容操作
var btn = document.querySelector('#btn');
var div = document.querySelector('div');
//这里用到了onclick点击事件,后面会着重讲解事件
btn.onclick = function () {
//div.innerText = '<strong>我变化了</strong>';
//innerText是不能识别HTML标签的,而innerTHML可以识别HTML标签,后者比较常用
div.innerHTML = '<strong>我变化了</strong>';
}
//元素属性操作
var btn1 = document.querySelector('#btn1');
var btn2 = document.querySelector('#btn2');
var img = document.querySelector('img');
btn1.onclick = function () {
img.src = 'btn1.jpg';
img.alt = '我是盒子1';
}
btn2.onclick = function () {
img.src = 'btn2.jpg';
img.alt = '我是盒子2';
}
//表单属性操作
var btn3 = document.querySelector('#btn3');
var input = document.querySelector('input');
btn3.onclick = function () {
input.value = '我被点击了';
//当点击之后可以通过disabled禁用点击按钮
btn3.disabled = true;//也可以用this.disabled = true;
}
//样式属性操作
var di = document.querySelector('.d');
di.onclick = function () {
//单个改变样式
// this.style.backgroundColor = 'blue';
// this.style.width = '300px';
//通过类的方式修改多个样式
this.className = 'change';
}
//自定义属性操作
var dd = document.querySelector('#dd');
console.log(dd.id);//元素直接点属性,这里的属性是内置的属性
console.log(dd.getAttribute('data-index'));//这里通过getAttribute()获得自定义属性,一般是data-开头
dd.setAttribute('data-time',10);//这是设置属性
</script>
</body>
</html>
运行结果:
节点操作
在DOM中所有的节点组成了一棵树,树中的各个节点有父子关系和兄弟关系,这里演示了获得父节点、获得子节点、获得第一个和最后一个节点、获得兄弟节点、动态创建节点、删除节点还有辅助节点,在这里我都写到了一个文件中,方便读者复制了,自己运行,好好思考其中的意思
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点操作</title>
</head>
<body>
<div class="box">
<span class="x">x</span>
</div>
<ul>
<li>hello</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<div class="box1">我是div</div>
<span class="sp">我是span</span>
<script>
//获得父节点
var x = document.querySelector('.x'); //这是拿到了span元素
console.log(x);
var div = x.parentNode; //用节点操作,可以直接拿到离它最近的父节点,节点也就是上面展示的DOM树
console.log(div);
//获得子节点
var ul = document.querySelector('ul');
var lis = ul.childNodes; //这里会得到7个元素,其中有3个元素节点li,4个文本节点这里是换行
console.log(lis);
var lis1 = ul.children; //这里得到的是4个元素,都是li
console.log(lis1);
//获得第一个和最后一个节点,当然了也可以通过上面获得的lis[0]来访问第一个,长度减1获得最后一个
var ol = document.querySelector('ol');
console.log(ol.firstChild); //这是第一个节点,但是这是text文本节点
console.log(ol.lastChild); //这是最后一个节点,但是这是text文本节点
console.log(ol.firstElementChild); //这是第一个元素,也就是li
console.log(ol.lastElementChild); //这是最后一个元素,也就是li
//获得兄弟节点
var div1 = document.querySelector('.box1');
console.log(div1.nextSibling); //这里获得的是下一个节点,这里是text文本节点
console.log(div1.previousSibling); //这里获得的是上一个节点,这里是text文本节点
console.log(div1.nextElementSibling); //这里获得的是span也就是下一个元素节点
console.log(div1.previousElementSibling); //这里返回的是ol也就是上一个元素节点
//动态创建节点
var li = document.createElement('li');
var ul1 = document.querySelector('ul');
ul1.appendChild(li); //将li节点追加到ul后面
var li1 = document.createElement('li');
ul1.insertBefore(li1, ul.children[0]); //在某个元素前插入元素
//删除节点
var ul2 = document.querySelector('ul');
ul2.removeChild(ul.children[0]); //删除父元素中的子节点
//复制节点
var ul3 = document.querySelector('ul');
var li3 = ul3.children[0].cloneNode(); //这里的复制是只复制标签,不复制内容
ul3.appendChild(li3);
var li4 = ul3.children[0].cloneNode(true); //这里父子的有内容
ul3.appendChild(li4);
</script>
</body>
</html>
运行结果: