一.dom相关概念
1. DOM
(1). DOM : Document Object Model, 即文档对象模型;
(2). DOM : 指的是当前要操作的文档内容,准确的说,就是HTML文档,当然不仅限于HTML,通常还包括XML文档;
(3). html文档中的内容以"树形结构"呈现,即大家常说的: 文档树;
(4). 文档树中的每个组成部分,称为之"节点", 即 Node类型,文档中的每一个具体的节点,都是一个Node对象:节点对象;
(5). 文档树中,最重要的三类节点是: Document文档节点, Element元素节点, Text文本节点
-------------------------------------------------------------------------------------------
2. 选择页面元素的方法
(1). 使用元素的ID属性选择;
(2). 根据元素的name属性选择;
(3). 根据元素的标签名称来选择;
(3). 根据元素的class属性来选择;
(4). 根据匹配的css选择器来选择;
(5). 元素的属性的添加,删除,更新操作;
-------------------------------------------------------------------------------------------
3. DOM元素的创建,插入,删除,更新
(1). 创建: createElement();
(2). 插入: appendChild();
(3). 删除: removeChild();
(4). 更新: replaceChild();
二.元素的获取
1.id获取实例
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>根据id选择元素</title>
</head>
<body>
<ul id="lists">
<li id="item1">列表项01</li>
<li>列表项02</li>
<li id="item2">列表项03</li>
<li>列表项04</li>
<li id="item3">列表项05</li>
</ul>
<script>
//使用id属性获取元素
let item1 = document.getElementById('item1');
let item2 = document.getElementById('item2');
let item3 = document.getElementById('item3');
//设置元素的样式
item1.style.backgroundColor = 'yellow';
item2.style.backgroundColor = 'yellow';
item3.style.backgroundColor = 'yellow';
//如果需要使用多个id来获取元素,可以通过函数来简化操作
function getElements () { //参数是多个id字符串
let elements = {}; // 创建一个空的map映射对象用来保存结果
for (let i = 0; i < arguments.length; i++) {
let id = arguments[i]; // 获取到要查询的每个id
let elt = document.getElementById(id); // 根据id查找元素
if (elt === null) {
throw new Error("No element with id: " + id); //抛出异常
}
elements[id] = elt; // 将获取到的元素存入到映射数据中
}
return elements; // 返回查询到的元素(以对象字面量方式)
}
//获取页面上指定的id属性的元素,返回一个关联数组类型的对象,键名就是id的值
let elements = getElements('item1','item2','item3');
for (let key in elements) {
elements[key].style.backgroundColor = 'coral';
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2,根据name属性来获取元素
拥有name属性的元素并不多,最常见的就是表单,以及表单中的元素,另外还有图像和内联框架
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据name属性来获取元素</title>
</head>
<body>
<!--拥有name属性的元素并不多,最常见的就是表单,以及表单中的元素,另外还有图像和内联框架-->
<!--form,input..., img, iframe-->
<form action="" name="login">
<input type="text" name="username">
<input type="password" name="password">
<button name="button">提交</button>
</form>
<script>
// getElementsByName()返回是一个NodeList节点列表,不只一个元素
let login = document.getElementsByName('login')[0];
// console.log(login); //控制台查看
login.style.backgroundColor = 'yellow';
//还可以将name属性的值,当作docuemtn对象的属性来用,返回唯一元素
let login1 = document.login;
// console.log(login1); //控制台查看
login1.style.backgroundColor = 'green';
//这个name属性更多的用于表单数据提交到服务器时,用来识别提交的内容
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.根据标签名Tag来获取元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据标签名Tag来获取元素</title>
</head>
<body>
<!--ul>li{列表项$$}*5-->
<ul>
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ul>
<script>
//getElementsByTagName(),根据标签名称获取元素,返回一个元素集合,有length属性,可以当数组来访问
let ul = document.getElementsByTagName('ul')[0];
ul.style.backgroundColor = 'lightgreen';
//元素集合也是一个对象,上面定义了一个方法:item()也可以获取指定元素
let ul1 = document.getElementsByTagName('ul').item(0);
ul1.style.backgroundColor = 'lightblue';
//获取所有的li元素
let lists = document.getElementsByTagName('li');
console.log(lists); //返回一个html元素集合: HTMLCollection
for (let i = 0; i < lists.length; i++) {
lists[i].style.backgroundColor = 'lightpink';
}
//getElementsByTagName()不仅在document对象上有定义,在Element元素对象上也有定义
let ul2 = document.getElementsByTagName('ul').item(0); // 获取ul
let item2 = ul2.getElementsByTagName('li').item(1); // 在父元素上调用该方法,获取ul中的第二个列表项
item2.style.backgroundColor = 'green';
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.使用标签名和name属性选择的快捷方式
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用标签名和name属性选择的快捷方式</title>
</head>
<body>
<img src="inc/1.jpg" alt="" name="pic">
<form action="" name="register">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码不少于8位">
<button>提交</button>
</form>
<p><a href="http://www.php.cn" name="php">php中文网</a></p>
<script>
//根据name标签名和name属性选择元素的快捷方式:仅适用于极少的几个,这是历史原因造成的
// images: 所有的<img>元素 图像,数组, 有三种访问方式
document.images[0].style.width = '200px'; // 1.标签索引
document.images['pic'].style.width = '200px'; // 2.name 属性
document.images.pic.style.width = '300px'; // 3.将name视为元素对象的属性进行访问
// forms: 所有的<forms>元素 表单,数组
document.forms[0].style.backgroundColor = 'lightgreen';
document.forms['register'].style.backgroundColor = 'lightblue';
document.forms.register.style.backgroundColor = 'red';
document.forms.item(0).style.backgroundColor = 'lightgreen'; // 类数组可用item()方法获取某个元素
//a 链接: 所有的<a>元素,NodeList 数组
document.links[0].style.backgroundColor = 'yellow';
document.links['php'].style.backgroundColor = 'red';
document.links.php.style.backgroundColor = 'green';
// body: <body>元素,总有定义,只有一个
document.body.style.backgroundColor = 'wheat';
// head: <head>元素,总有定义,不写会自动添加,只有一个
let style = document.createElement('style');
document.head.appendChild(style);
// documentElement: <html>元素,总有定义,同样一个页面只有一个
console.log(document.documentElement);
// doctype: 文档类型,同样也只有一个
console.log(document.doctype);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
5.通过class属性选取元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过class属性选取元素</title>
</head>
<body>
<ul class="ul">
<li class="red">列表项01</li>
<li>列表项02</li>
<li class="green">列表项03</li>
<li>列表项04</li>
<li class="coral large">列表项05</li>
</ul>
<script>
//根据元素的class属性值获取元素
let red = document.getElementsByClassName('red');
console.log(red); //返回一个html元素集合,与根据标签名获取的返回数据类型完全一样
red[0].style.backgroundColor = 'red';
//该方法也支持在父元素上调用
document.getElementsByClassName('ul').item(0)
.getElementsByClassName('green').item(0)
.style.backgroundColor = 'green';
//支持多个class 属性值
let large = document.getElementsByClassName('coral large')[0];
large.style.backgroundColor = 'coral';
large.style.fontSize = '1.5rem';
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
6.使用css选择器来获取元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用css选择器来获取元素</title>
</head>
<body>
<ul id="ul">
<li class="red">列表项01</li>
<li>列表项02</li>
<li class="green">列表项03</li>
<li class="green">列表项04</li>
<li class="coral large">列表项05</li>
</ul>
<script>
//我们选择页面元素的时候,大多使用css选择器来获取元素,例如
// .red 获取 class="red"的元素,其实js也支持使用css选择器获取元素
let lists = document.querySelectorAll('li');
console.log(lists); //返回节点列表数组,里面每个元素对应一个元素
//可以使用
lists[0].style.backgroundColor = 'coral';
lists.item(1).style.backgroundColor = 'lightblue';
//该方法还可以在元素上调用,这也根据标签和class类名获取元素是一样的
let ul = document.querySelector('#ul'); // 获取满足条件的第一个元素
console.log(ul); // 只返回ul列表元素以及内部子元素
let li = ul.querySelectorAll('.green');
for (let i = 0; i < li.length; i++) {
li[i].style.backgroundColor = 'green';
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
7.文档的遍历
文档中所有内容都有节点
每个节点有三个属性:
1.nodeType节点类型,常用的有: 1->元素, 3->文本, 9->文档
2.nodeName节点名称(标签名),仅元素节点有意义,其它节点返回null
3.nodeValue节点值(仅文本或注释节点有意义)
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文档树的遍历</title> </head> <body> <ul> <li>我是列表项01</li> <li>我是列表项02</li> <li>我是列表项03</li> <li>我是列表项04</li> <li>我是列表项05</li> </ul> <script> //文档节点对象document是最顶层的 console.log(document.nodeName); console.log(document.nodeType); console.log(document.nodeValue); //获取某父节点下的所有子节点: childNodes() console.log(document.childNodes); // 文档类型与<html>节点 //如果想获取到<body>节点,应该如何操作呢? console.log(document.childNodes[1]); //html console.log(document.childNodes[1].childNodes[1]); //理论上应该拿到body,但是并不成功 // 原因是节点方法不会忽略页面的空白字符,例如回车换行等,都会加入到子节点中 // 可以查看一下当前获取的节点类型 console.log(document.childNodes[1].childNodes[1].nodeType); // 3 文本节点 // 所以再往下走一步,就可以拿到<body>啦 console.log(document.childNodes[1].childNodes[2]); // <body> //每次都要进行节点类型的判断很麻烦,而我们主要关心只是元素节点,有没有更好的办法呢? // 当然有,js提供了一套API,将文档树看成仅仅由元素组成的,忽略掉内部的文本和注释等节点 // 下面我们再完成以上的工作: 获取<body>元素 console.log(document.children[0]); // 自动过滤掉了非元素节点,只返回了<html> console.log(document.children[0].children[1]); // 自动过滤掉了文本节点,正确返回了<body> //回到页面中的ul中,完成列表的遍历 //获取ul let ul = document.children[0].children.item(1).children[0]; console.log(ul); // 查看是否获取到了ul 列表 ul.firstElementChild.style.backgroundColor = 'lightblue'; //第一个子元素 ul.lastElementChild.style.backgroundColor = 'lightgreen'; //最后一个子元素 console.log(ul.childElementCount); // 子元素的数量 // 子元素数量也可以这样计算 console.log(ul.children.length); // 获取ul中的第三个子元素 let li1 = ul.children.item(2); console.log(li1); // <li>我是列表项03</li> li1.nextElementSibling.style.backgroundColor = 'yellow'; // 下一下兄弟元素 li1.previousElementSibling.style.backgroundColor = 'cyan'; // 上一个兄弟元素 //获取当前元素的父元素 li1.parentElement.style.backgroundColor = 'wheat'; //获取父节点时候,使用原始的节点方法也是可以的,因为父节点不可能是文本或注释节点 li1.parentNode.style.backgroundColor = 'red'; </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
8.js对html元素的属性操作(setAttribute(),getAttribute()进行读写)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js对html元素的属性操作</title>
</head>
<body>
<!--html元素的属性主要分为二类: 标签自带的原生属性, 以及用户自定义的属性-->
<img src="inc/1.jpg" alt="" width="320">
<h3 id="header" class="hello" style="color:red" title="当幸福来敲门" index="php.cn">《当幸福来敲门》别走,幸福终究会到来</h3>
<script>
//html标签的原生属性,可以看作是元素对象的属性,进行读写
let img = document.getElementsByTagName('img').item(0);
console.log(img.src); // 可以通过元素对象的属性方式直接查看
img.src = 'inc/2.jpg'; // 该属性是可写的
img.width = 400;
// class 属性,因为class 与js 中的关键字冲突,需要重新定义,使用className表示
let h3 = document.getElementById('header');
console.log(h3.className); // 返回 'hello'
// style属性被解析成一个对象,而不是传统的字符串,style中的每个选择符就是属性
h3.style.color = 'green';
// 非标准的元素属性,我们可以用 setAttribute(),getAttribute()进行读写
// 在进行读写之前,推荐先进行判断
if (h3.hasAttribute('index')) {
console.log(h3.getAttribute('index')); // 查看当前属性的值
h3.setAttribute('index','php中文网欢迎您'); // 设置属性,到检查器中查看
h3.removeAttribute('index'); //移除属性
}
//其实以上的这4个处理非标准属性的方法也可以处理元素的标准属性
h3.setAttribute('style','color:blue;font-size:1.5rem');
// 以数组的方式访问元素的属性,实时更新,注意是只读,不能设置
console.log(h3.attributes[0]); //使用数字索引访问
console.log(h3.attributes['id']); //使用属性名字符串
console.log(h3.attributes['style']); //使用属性名字符串,返回的实时更新后的内容
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
9.js对元素内容的处理
元素内容主要是2种: 1.html代码; 2. 纯文本
innerHTML属性,可以读写元素内的全部内容,包括html代码
textContent属性,仅获取纯文本
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js对元素内容的处理</title>
</head>
<body>
<p>我正在学习JavaScript编程技术</p>
<p>我正在学习<strong style="color:red">JavaScript</strong>编程技术</p>
<script>
//元素内容主要是2种: 1.html代码; 2. 纯文本
//innerHTML属性,可以读写元素内的全部内容,包括html代码
let p1 = document.getElementsByTagName('p')[0];
let p2 = document.getElementsByTagName('p')[1];
console.log(p1.innerHTML); // 纯文本
console.log(p2.innerHTML); // 包括html代码
//textContent属性,仅获取纯文本
console.log(p1.textContent); // 纯文本
console.log(p2.textContent); // 过滤掉了html代码,只返回了纯文本
//根据节点类型返回节点的值
if (p1.childNodes[0].nodeType == 3) {
console.log(p1.childNodes[0].nodeValue);
}
//如果元素内容中包括html代码,还可以获取到吗?
if (p2.childNodes[0].nodeType == 3) { //我正在学习
console.log(p2.childNodes[0].nodeValue);
}
//为什么没有获取到剩下的内容?因为后面的节点类型发生了变化,如果想全部获取,必须使用递归函数,超出教学内容
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
10.DOM节点的创建,插入和删除
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM节点的创建,插入和删除</title>
</head>
<body>
<script>
//创建节点
//1. 创建新元素
let ul = document.createElement('ul');
//2. 向元素中添加内容
ul.innerHTML = '<li>我是列表项1</li>';
//3. 将新元素添加到页面中,本例是添加到<body>中
document.body.appendChild(ul);
//再创建一个列表项
let li1 = document.createElement('li');
li1.innerHTML = '我是列表项2';
ul.appendChild(li1); // 默认是添加到父元素的未尾
//如果想在任意位置插入,应该怎么做呢?可以使用insertBefore()
let li2 = document.createElement('li');
li2.innerHTML = '<span style="color:red">我是新插入的节点</span>';
// insertBefore('新节点','插入的位置');
ul.insertBefore(li2, li1);
//如果插入的位置为null,就是插入到尾部,与appendChild()功能相同
let li3 = document.createElement('li');
li3.innerHTML = '<span style="color:lightgreen">我是新插入的节点</span>';
// insertBefore('新节点','插入的位置');
ul.insertBefore(li3, null);
//删除节点
ul.removeChild(li3);
//替换节点
let li4 = document.createElement('li');
li4.innerHTML = '<span style="color:blue">我要把别人替换掉</span>';
ul.replaceChild(li4, li2);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三.作业聊天机器人的模拟实现
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM实战:模拟智能在线***系统</title>
<style type="text/css">
div:nth-child(1) {
width: 450px;
height: 650px;
background-color: lightskyblue;
margin: 30px auto;
color: #333;
box-shadow: 2px 2px 2px #808080
}
h2 {
text-align: center;
margin-bottom: -10px;
}
div:nth-child(2) {
width: 400px;
height: 500px;
border: 4px double green;
background-color: #efefef;
margin: 20px auto 10px;
}
ul {
list-style: none;
line-height: 2em;
/*border: 1px solid red;*/
overflow: hidden;
padding: 15px;
}
table {
width: 90%;
height:80px;
margin: auto;
}
textarea{
/*width: 300px;*/
border: none;
resize: none;
background-color: lightyellow;
}
button {
width: 60px;
height: 40px;
background-color: seagreen;
color: white;
border: none;
/*text-align: left;*/
}
button:hover {
cursor: pointer;
background-color: orange;
}
</style>
</head>
<body>
<div>
<h2>在线***</h2>
<div contenteditable="true">
<ul>
<li></li>
</ul>
</div>
<table>
<tr>
<td align="right"><textarea cols="50" rows="4" name="text"></textarea></td>
<td align="left"><button type=button>发送</button></td>
</tr>
</table>
</div>
<script type="text/javascript">
//获取到页面中的按钮,文本域,对话内容区
let btn = document.getElementsByTagName('button')[0];
let text = document.getElementsByName('text')[0];
let list = document.getElementsByTagName('ul')[0];
let sum = 0;
//添加按钮点击事件,获取用户数据并推送到对话窗口中
btn.onclick = function () {
// alert(text.value)
//获取用户提交的内容
if (text.value.length === 0) {
alert('客官:是不是忘记输入内容了~~');
return false;
}
let userComment = text.value;
//立即清空用户信息区
text.value = '';
//创建一个新节点li
let li = document.createElement('li');
li.innerHTML = userComment; //将用户输入的内容添加到新节点中
let userPic = '<img src="inc/peter.jpg" width="30" style="border-radius:50%">'; // 设置用户头像
li.innerHTML = userPic + ' ' + userComment; // 将用户头像与用户的聊天内容合并
list.appendChild(li); //发送聊天内容,实际上就是将新节点插入到对话列表中
sum += 1; // 聊天记录自增1
//设置定时器,默认2秒后会自动回复
setTimeout(function(){
let info = [
'真烦人,有话快说,别耽误我玩抖音',
'除了退货,退款,咱们什么都可以聊',
'说啥,本姑娘怎么听不懂呢?再说一遍',
'在我方便的时候再回复你吧~~',
'投诉我的人多了,你算老几~~~'
];
let temp = info[Math.floor(Math.random()*3)];
//取1-5之间的一个整数:Math.floor(Math.random()*6 + 1)
let reply = document.createElement('li');
let kefuPic = '<img src="inc/zly.jpg" width="30" style="border-radius:50%;">';
// reply.innerHTML = '你有啥事呀,我的帅哥哥' +kefuPic
reply.innerHTML = kefuPic + ' ' + '<span style="color:red">'+temp+'</span>';
list.appendChild(reply);
sum += 1;
},2000);
// 当聊天记录达到10条时清空窗口
if (sum > 10) {
list.innerHTML = '';
sum = 0;
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例