JavaScript进阶之DOM技术（一）——DOM操作
API和Web APIAPIAPI（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。Web APIweb api是浏览器提供的一套操作浏览器功能和页面元素的api(dom和bom)MDN:Web API 接口参考 | MDN (
API和Web API
API
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
Web API
web api是浏览器提供的一套操作浏览器功能和页面元素的api(dom和bom)
MDN:Web API 接口参考 | MDN (mozilla.org)
DOM
DOM简介
什么是DOM
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式
DOM树
文档:一个页面就是一个文档,DOM中使用document表示
元素:页面中的所有标签都是元素,DOM中使用element表示
节点:网页中所有内容都是节点(标签,属性,文本,注释等),DOM中使用node表示
DOM把以上内容都看作是对象
获取元素
根据ID获取
使用getElementById()可以获取带有ID的元素对象
<div id="time">2019-9-9</div>
<script>
// 1.因为我们文档页面从上往下加载，所以得先有标签，所以script写在标签下面
// 2.get 获得 element 元素 by 通过 驼峰命名法
// 3.参数 id是大小写敏感的字符串
// 4.返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
// 5. console.dir 打印我们的元素对象，更好的查看里面的属性和方法
console.dir(timer);
</script>
注意:
文档页面从上往下加载,所以得先有标签,所以script写到标签下面
根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
<ul>
<li>知否知否，应是等你好久22</li>
<li>知否知否，应是等你好久</li>
<li>知否知否，应是等你好久</li>
<li>知否知否，应是等你好久</li>
<li>知否知否，应是等你好久</li>
</ul>
<script>
//1.返回的是获取过来元素对象的集合 以伪数组的形式存储的
//伪数组有长度 索引号,没有pop push方法
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
//2.我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
//3.如果页面中只有一个li,返回的还是伪数组的形式
//4.如果页面中没有这个元素,返回的是空伪数组
</script>
还可以根据标签名获取某个元素（父元素）内部所有指定标签名的子元素,获取的时候不包括父元素自己
<script>
//element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>
通过H5新增方法获取
①getElementsByClassName
根据类名返回元素对象集合
document.getElementsByClassName(‘类名’);
②document.querySelector
根据指定选择器返回第一个元素对象
document.querySelector('选择器');
// 切记里面的选择器需要加符号
// 类选择器.box
// id选择器 #nav
var firstBox = document.querySelector('.box');
③document.querySelectorAll
document.querySelectorAll(‘选择器’);
<script>
// 1. getElementsByClassName 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3. querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
获取特殊元素
获取body元素
document.body;
获取html元素
document.documentElement;
操作元素
JavaScript的DOM的操作可以改变网页内容,结构和样式,我们可以利用DOM操作元素来改变元素里面的内容,属性等.注意以下都是属性
改变元素内容
从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会被去掉
非标准
element.innerText
<button>显示当前系统时间</button>
<div>某个时间</div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function () {
div.innerText = getDate();
}
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];
}
起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行
w3c推荐标准
element.innerHTML
这两个属性都是可以读写的,可以获取元素里面的内容
常用元素的属性操作
innerHTML,innerText
src,href
id,alt,title
案例
//点击按钮更换图片
<button class="l1">刘德华</button>
<button class="z1">张学友</button>
<br>
<img src="./images/ldh.jpg" alt="" title="刘德华">
<script>
var btn1 = document.querySelector('.l1');
var btn2 = document.querySelector('.z1');
var img = document.querySelector('img');
btn1.onclick = function change() {
img.src = './images/ldh.jpg'
img.title = '刘德华'
}
btn2.onclick = function () {
img.src = './images/zxy.jpg'
img.title = '张学友'
}
//分时显示不同的图片,显示不同的问候语
//根据不同时间，页面显示不同图片，同时显示不同的问候语。
//如果上午时间打开页面，显示上午好，显示上午的图片。
//如果下午时间打开页面，显示下午好，显示下午的图片。
//如果晚上时间打开页面，显示晚上好，显示晚上的图片。
<img src="./images/s.gif" alt="">
<div>上午好</div>
<script>
var img = document.querySelector('img');
var div = document.querySelector('div');
//得到当前小时数
var date = new Date();
var h = date.getHours();
//判断小时数改变图片和文字信息
if (h < 12) {
img.src = './images/s.gif';
div.innerHTML = '亲,上午好,好好写代码';
}else if (h < 18) {
img.src = './images/x.gif';
div.innerHTML = '亲,下午好,好好写代码';
}else {
img.src = './images/w.gif';
div.innerHTML = '亲,晚上好,好好写代码';
}
表单元素的属性操作
利用dom可以操作如下表单属性:
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 () {
// btn.disabled = true;//禁用按钮
this.disabled = true;
//this指向事件函数的调用者 调用者是btn
}
</script>
样式属性操作
1.element.style 行内样式操作
2.element.className 类名样式操作
//更改div颜色,大小
<div>1</div>
<script>
var div = document.querySelector('div');
div.onclick = function() {
this.style.backgroundColor = 'purple';
this.style.width = '250px'
}
</script>
JS里面的样式采取驼峰命名法,比如fontSize,backgroundColor
JS修改style样式操作,产生的是行内样式,css权重比较高
总结
排他思想
//多个按钮选中一个,给一个颜色,其他颜色复原
<script>
var btns = document.querySelectorAll('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
//先去掉所有颜色
for (var m = 0; m < btns.length; m++) {
btns[m].style.backgroundColor = '';
}
//再把当前颜色给上
this.style.backgroundColor = 'red';
}
}
</script>
自定义属性
获取属性值
获取内置属性值(元素本身自带的属性)
element.属性;
获取自定义属性
element.getAttribute(‘属性值’);
设置属性值
设置内置属性值
element.属性 = ‘值’;
主要设置自定义的属性
element.setAttribute(‘属性’,‘值’);
移除属性值
element.removeAttribute(‘属性’);
<body>
<div id="demo" index="1" class="nav"></div>
<script>
var div = document.querySelector('div');
// 1. 获取元素的属性值
// (1) element.属性
console.log(div.id);
//(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
// 2. 设置元素属性值
// (1) element.属性= '值'
div.id = 'test';
div.className = 'navs';
// (2) element.setAttribute('属性', '值'); 主要针对于自定义属性
div.setAttribute('index', 2);
div.setAttribute('class', 'footer'); // class 特殊 这里面写的就是class 不是className
// 3 移除属性 removeAttribute(属性)
div.removeAttribute('index');
</script>
</body>
H5自定义属性
自定义属性的目的:
保存并保存数据,有些数据可以保存到页面中而不用保存到数据库中
有些自定义属性容易引起歧义,不容易判断到底内置属性还是自定义的,所以H5又了规定
设置H5自定义属性
H5规定自定义属性==data-==开头作为属性名并赋值
<div data-index = "1"></>
// 或者使用JavaScript设置
div.setAttribute('data-index',1);
获取H5自定义属性
-
兼容性获取
element.getAttribute('data-index') -
H5新增的：
element.dataset.index或element.dataset['index']IE11才开始支持
<body>
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time', 20);
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法 它只能获取data-开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
</body>
节点操作
获取元素通常使用两种方式:
1.利用dom提供的方法获取元素
- document.getElementById()
- document.getElementsByTagName()
- document.querySelector 等
逻辑性不强,繁琐
2.利用节点层级关系获取元素
- 利用父子兄节点关系获取元素
逻辑性强,但兼容性较差
这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单
一般的，节点至少拥有三个基本属性
节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
一般的，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
- 元素节点：nodeType 为1
- 属性节点：nodeType 为2
- 文本节点：nodeType 为3(文本节点包括文字、空格、换行等)
我们在实际开发中，节点操作主要操作的是==元素节点==
利用 DOM 树可以把节点划分为不同的层级关系，常见的是==父子兄层级关系==。
节点层级
父级节点
node.parentNode
-
parentNode属性可以返回某节点的父结点，注意是最近的一个父结点 -
如果指定的节点没有父结点则返回null
<body>
<!-- 节点的优点 -->
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// 1. 父节点 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
console.log(erweima.parentNode);
</script>
</body>
子节点
parentNode.childNodes(标准)
-
parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合 -
返回值包含了所有的子结点，包括元素节点，文本节点等
-
如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用
childNodes
parentNode.children(非标准)
-
parentNode.children是一个只读属性，返回所有的子元素节点 -
它只返回子元素节点，其余节点不返回 （这个是我们重点掌握的）
-
虽然 children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
第一个子节点
parentNode.firstChild
firstChild返回第一个子节点，找不到则返回null- 同样，也是包含所有的节点
最后一个子节点
parentNode.lastChild
lastChild返回最后一个子节点，找不到则返回null- 同样，也是包含所有的节点
第一个子节点（兼容性）
parentNode.firstElementChild
firstElementChild返回第一个子节点，找不到则返回null- 有兼容性问题，IE9以上才支持
最后一个子节点（兼容性）
parentNode.lastElementChild
lastElementChild返回最后一个子节点，找不到则返回null- 有兼容性问题，IE9以上才支持
解决方案
实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？
-
如果想要第一个子元素节点，可以使用
parentNode.chilren[0] -
如果想要最后一个子元素节点，可以使用
// 数组元素个数减1 就是最后一个元素的索引号
parentNode.chilren[parentNode.chilren.length - 1]
<body>
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
</ol>
<script>
var ol = document.querySelector('ol');
// 1.firstChild 获取第一个子结点的，包含文本结点和元素结点
console.log(ol.firstChild);
// 返回的是文本结点 #text(第一个换行结点)
console.log(ol.lastChild);
// 返回的是文本结点 #text(最后一个换行结点)
// 2. firstElementChild 返回第一个子元素结点
console.log(ol.firstElementChild);
// <li>我是li1</li>
// 第2个方法有兼容性问题，需要IE9以上才支持
// 3.实际开发中，既没有兼容性问题，又返回第一个子元素
console.log(ol.children[0]);
// <li>我是li1</li>
console.log(ol.children[3]);
// <li>我是li4</li>
// 当里面li个数不唯一时候，需要取到最后一个结点时这么写
console.log(ol.children[ol.children.length - 1]);
</script>
</body>
兄弟节点
下一个兄弟节点
node.nextSibling
-
nextSibling返回当前元素的下一个兄弟元素节点，找不到则返回null -
同样，也是包含所有的节点
上一个兄弟节点
node.previousSibling
-
previousSibling返回当前元素上一个兄弟元素节点，找不到则返回null -
同样，也是包含所有的节点
下一个兄弟节点（兼容性）
node.nextElementSibling
-
nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null -
有兼容性问题，IE9才支持
上一个兄弟节点（兼容性）
node.previousElementSibling
-
previousElementSibling返回当前元素上一个兄弟元素节点，找不到则返回null -
有兼容性问题，IE9才支持
示例：
<body>
<div>我是div</div>
<span>我是span</span>
<script>
var div = document.querySelector('div');
// 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
console.log(div.nextSibling); // #text
console.log(div.previousSibling); // #text
// 2. nextElementSibling 得到下一个兄弟元素节点
console.log(div.nextElementSibling); //<span>我是span</span>
console.log(div.previousElementSibling);//null
</script>
</body>
如何解决兼容性问题 ？
答：自己封装一个兼容性的函数
function getNextElementSibling(element) {
var el = element;
while(el = el.nextSibling) {
if(el.nodeType === 1){
return el;
}
}
return null;
}
创建节点
document.createElement(‘tagName’);
-
document.createElement()方法创建由 tagName 指定的HTML 元素 -
因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点
添加节点
node.appendChild(child)
node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。
node.insertBefore(child,指定元素)
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。
删除节点
node.removeChild(child)
node.removeChild()方法从 DOM 中删除一个子节点，返回删除的节点
留言板案例：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
li a {
float: right;
}
</style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2. 注册事件
btn.onclick = function () {
if (text.value == '') {
alert('您没有输入内容');
return false;
} else {
// console.log(text.value);
// (1) 创建元素
var li = document.createElement('li');
// 先有li 才能赋值
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
// (2) 添加元素
// ul.appendChild(li);
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()
-
node.cloneNode()方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点 -
如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
-
如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点
三种创建元素的方式区别
- doucument.write()
- element.innerHTML
- document.createElement()
区别
-
document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘 -
innerHTML是将内容写入某个 DOM 节点，不会导致页面全部重绘 -
innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂 -
createElement()创建多个元素效率稍低一点点，但是结构更清晰
<body>
<div class="innner"></div>
<div class="create"></div>
<script>
// 2. innerHTML 创建元素
var inner = document.querySelector('.inner');
// 2.1 innerHTML 用拼接字符串方法
for (var i = 0; i <= 100; i++) {
inner.innerHTML += '<a href="#">百度</a>';
}
// 2.2 innerHTML 用数组形式拼接
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');
// 3.document.createElement() 创建元素
var create = document.querySelector('.create');
var a = document.createElement('a');
create.appendChild(a);
</script>
</body>
总结：不同浏览器下， innerHTML 效率要比 createElement 高
DOM重点核心
创建元素（带引号）
- document.write
- innerHTML
- createElement
增加元素（不带引号）
- appendChild
- insertBefore
删除元素（不带引号）
- removeChild()
- remove()
修改元素属性
- 主要修改dom的元素属性，dom元素的内容、属性、表单的值等
- 修改元素属性：src、href、title 等
- 修改普通元素内容：innerHTML、innerText
- 修改表单元素：value、type、disabled
- 修改元素样式：style、className
查询元素
- 主要获取查询dom的元素
- DOM提供的API方法：getElementById、getElementsByTagName (古老用法，不推荐)
- H5提供的新方法：querySelector、querySelectorAll (提倡)
- 利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡
属性操作
- 主要针对于自定义属性
- setAttribute：设置dom的属性值
- getAttribute：得到dom的属性值
- removeAttribute：移除属性
CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)