一篇文章带你吃透JavaScript中的DOM知识及用法
目录
- 一、前言
- 二、DOM框架
- 三、认识DOM节点
- 四、JS访问DOM
- 1、获取节点
- 2、改变 HTML
- 3、改变 CSS
- 4、检测节点类型
- 5、操作节点间的父子及兄弟关系
- 6、操作节点属性
- 7、创建和操作节点
- 总结
一、前言
DOM：Document Object Model（文档对象模型）,定义了用户操作文档对象的接口，可以说DOM是自HTML将网上相关文档连接起来后最伟大的创新。它使得用户对HTML有了空前的访问能力，并使开发者将HTML作为XML文档来处理。
本文知识导图如下：
二、DOM框架
DOM是网页的核心结构，无论是HTML、CSS还是JavaScript，都和DOM 密切相关。HTML的作用是构建DOM结构，CSS的作用是设定样式，JavaScript的作用是读取以及控制、修改DOM。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
如下面一段HTML代码可以用 HTML DOM 树来表示：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>window</title> </head> <body> <h2><a href="#" rel="external nofollow" rel="external nofollow" >标题文本</a></h2> <p>段落文本</p> <ul class="ul_Web"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html>
HTML DOM 树
在这个树状图中，html位于位于最顶端，它没有父辈，也没有兄弟，被称为DOM的根节点。更深入一层会发现，html有head和body两个分支，它们在同一层而不相互包含，它们之间是兄弟关系，有着共同的父元素html。再往深会发现head有两个子元素meta和title，它们互为兄弟。而body有三个子元素，分别是h2、p和ul。再继续深入还会发现h2和ul都有自己的子元素。
通过这样的关系划分，整个HTML文件的结构清晰可见，各元素之间的关系很容易表达出来，这正是DOM所实现的。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
三、认识DOM节点
节点（node）最初源于计算机网络中，代表着网络中的一个连接点，可以说网络就是由节点构成的集合。DOM节点也是类似，文档是由节点构成的集合。
在DOM中有3种节点，分别是元素节点、文本节点和属性节点。
元素节点：可以说整个DOM都是由元素节点构成的，如：html、body、meta、h2、p、li等都是元素节点。元素节点可以包含其他的元素（除了html根元素）。
文本节点：在HTML中光有元素节点搭建的框架是不够的，页面开发的最终目的是向用户展示内容。例如li元素中含有的文本信息，每个li之间的换行操作都是文本节点。并不是所有的元素节点中都含有文本节点。
如下例：p元素中直接包含元素节点，无文本节点。
<p><span></span></p>
属性节点：作为页面中的元素，或多或少会有一些属性，如下面例子中，含有了，class、title、color等属性。开发者可以利用这些属性来对包含在元素里的对象作出更准确的描述。
例子：
<a class="a_css" title="CSS" color="#0F0" href="#" rel="external nofollow" rel="external nofollow" >进入CSS网站</a>
由于属性总是被放在元素里，因此属性节点总是被包含在元素节点中。
上例中可以看出各种节点的关系如下图：
四、JS访问DOM
每个DOM节点都有一系列的属性、方法可以使用。下表中总结了常用的节点属性和方法，供使用时快速查阅。
| 属性/方法 | 类型/返回类型 | 说明 |
|---|---|---|
| nodeName | String | 节点名称，根据节点的类型而定义 |
| nodeValue | String | 节点的值，同样根据节点的类型而定义 |
| nodeType | Number | 节点类型 |
| firstChild | Node | 指向childNodes列表中的第一个节点 |
| lastChild | Node | 指向childNodes列表中的最后一个节点 |
| childNodes | NodeList | 所有子节点的列表，方法item(i)可以访问第i+1个节点 |
| parentNode | Node | 指向节点的父节点，如果该节点已是根节点，则返回null |
| previousSibling | Node | 指向节点的前一个兄弟节点，如果该节点已是第一个节点，则返回null |
| nextSibling | Node | 指向节点的后一个兄弟节点，如果该节点已是最后一个节点，则返回null |
| hasChildNodes | Boolean | 当childNodes包含一个或多个节点时，返回true |
| attributes | NameNodeMap | 包含一个元素特征的Attr对象，仅用于元素节点 |
| appendChild | Node | 将node节点添加到childNodes的末尾 |
| removeChild | Node | 从childNodes中删除node节点 |
| replaceChild | Node | 将childNodes中的oldnode节点替换成newnode节点 |
| insetBefore | Node | 在childNodes中的refnode节点之前插入newnode节点 |
1、获取节点
- document.getElementById【通过id属性获取对象】
因为id具有唯一性，所以通过该方法获取的html元素只有一个。 - document.getElementsByTagName【通过标签名获取对象】
获取的元素有一个或者多个，将获取的元素存储在一个类似数组的集合中，获取的元素通过下标来区分（下标从0开始） - document.getElementsByClassName【通过class属性获取对象】
不同的标签可以使用同一个class属性值，所以获取的元素由一个或者多个，获取的元素存储在一个类似数组的集合中，获取的元素通过下标来区分（下标从0开始） - querySelector【根据id、标签、class名获取元素】
不管是哪一个名称，都获取第一个元素 - querySelectorAll【获取所有执行标签名/带有指定class名的元素】
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom操作</title>
</head>
<body>
<h2>登鹳雀楼</h2>
<p id="test">白日依山尽,</p>
<p>黄河入海流。</p>
<p class="demo">欲穷千里目，</p>
<p>更上一层楼。</p>
<div class="demo">div标签1</div>
<div>div标签2</div>
</body>
<script>
//获取html元素
//getElementById('id属性值')：通过标签的id属性来获取元素，因为id具有唯一性，所以通过该方法获取的html元素只有一个
var ele =document.getElementById('test');
console.log(ele);
// ele.style.color = '#f00';
console.log('--------------------');
//getElementsByTagName('标签名'):通过标签名称获取元素，获取的元素由一个或者多个，将获取的元素存储在一个类似数组的集合中，获取的元素通过下标来区分（下标从0开始）
var pEles=document.getElementsByTagName('p');
console.log(pEles);
console.log(pEles[2]);
console.log('获取的p元素个数：'+pEles.length);
console.log('--------------------');
//getElementsByClassName('class属性值')：通过标签的class属性值来获取元素，不同的标签可以使用同一个class属性值，所以获取的元素由一个或者多个，获取的元素存储在一个类似数组的集合中
var elements =document.getElementsByClassName('demo');
console.log(elements);
//querySelector('id名/标签名/class名')：根据id、标签、class名获取元素，不管是哪一个名称，都获取第一个元素
var result1 =document.querySelector('#test');
console.log(result1);
var result2 = document.querySelector('.demo');
console.log(result2);
var result3 =document.querySelector('p');
console.log(result3);
console.log('--------------------');
//querySelectorAll('标签名/class名')：获取所有执行标签名/带有指定class名的元素
var demoEles=document.querySelectorAll('.demo');
console.log(demoEles);
var pElemets = document.querySelectorAll('p');
console.log(pElemets);
</script>
</html>
2、改变 HTML
| 语法 | 说明 |
|---|---|
| document.write() | 改变 HTML 输出流 |
| 对象.innerHTML=新的 HTML | 改变 HTML 内容（包含元素、属性、文本） |
| 对象.innerText=文本内容 | 改变HTML文本内容 |
| 对象.attribute=新属性值 | 改变 HTML 属性 |
例1：document.write()应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>write()</title>
<style>
.ddd{
color: #00f;
background-color: #ccc;
}
</style>
</head>
<body>
大湖名城，创新高地2
<button onclick="show()">点我一下</button>
</body>
<script>
document.write('<br />大湖名城，创新高地<br />');
document.write('<h2>二级标题标签</h2>')
document.write('<p style="color:#f00;">段落标签</p>')
document.write('<p class="ddd">段落标签2</p>');
function show(){
document.write('hello js!');
}
</script>
</html>
运行效果：
例2：innerHTML和innerText应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>innertHTML和innerText</title>
</head>
<body>
<ul>
<li>列表项第一项</li>
<li>列表项第二项</li>
</ul>
<div></div>
</body>
<script>
//获取ul元素
var ulEle =document.querySelector('ul');
ulEle.innerHTML = '<li>大湖名城，创新高地</li>';
var result1 =ulEle.innerHTML;
console.log(result1);
var result2 =ulEle.innerText;
console.log(result2);
//获取div标签
var divEle = document.querySelector('div');
divEle.innerText = '<h2>大湖名城，创新高地</h2>';
</script>
</html>
运行效果：
例3：通过改变img固有属性值实现两张图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变和获取标签固有属性值</title>
</head>
<body>
<img src="img/lyf.jpg" width="300px"/>
<button onclick="changeImg()">换一张图片</button>
</body>
<script>
//获取img标签
var imgEle = document.querySelector('img');
var flag = true;
function changeImg(){
if(flag){
imgEle.src='img/wzx.jpg';
imgEle.style.width='500px';
flag=false;
}else{
imgEle.src='img/lyf.jpg';
imgEle.style.width='300px';
flag=true;
}
}
</script>
</html>
运行效果：
3、改变 CSS
通过JavaScript改变CSS样式的思路：先获取需要改变样式的元素，可通过document.querySelector()方法获取。然后再通过上图语法中的方法去改变元素的样式。
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变元素的样式</title>
</head>
<body>
<p class="demo">大湖名城，创新高地</p>
<button onclick="addCss()">给P标签添加样式</button>
</body>
<script>
//获取p标签
var pEle = document.querySelector('p');
function addCss(){
pEle.style.color= '#f00';
pEle.style.backgroundColor = '#ccc';
pEle.style.fontSize = '30px';
pEle.style.textDecoration='underline';
}
</script>
</html>
运行效果：
4、检测节点类型
通过节点的nodeType属性可以检测出节点的类型。该属性返回一个代表节点类型的整数值，总共有12个可取的值，例如：
console.log(document.nodeType);
上面代码执行后的返回值为9，表示DOCUMENT_NODE类型节点。然而实际上，对于大多数情况而言，真这行游泳的还是前面我们学过的3种节点，即元素节点、文本节点和属性节点，他们的nodeType值如下：
元素节点
nodeType值为1
属性节点
nodeType值为2
文本节点
nodeType值为3
这就意味着可以对某种类型的节点做单独的处理，在搜索节点的时候非常实用。
5、操作节点间的父子及兄弟关系
【1】通过父节点找到子节点
父子兄弟关系是DOM模型中节点之间非常重要的关系，在获取某个节点之后，可以通过父子关系，利用hasChildNodes()方法和childNodes属性获取该节点所包含的所有子节点。
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>Java</li>
<li>Node.js</li>
<li>JavaScript</li>
</ul>
</body>
<script>
//获取ul标记
var ulEle=document.querySelector("ul");
var DOMString="";
if(ulEle.hasChildNodes()){
for (var s of ulEle.childNodes) {
DOMString+=s.nodeName+"\n";
}
}
console.log(DOMString);
</script>
</html>
这个案例的首先获取ul标记，然后利用hasChildNodes()判断其是否有子节点，如果有则利用childNodes遍历它的所有子节点。执行后控制台输出结果可以看到ul包括4个文本节点和3个元素节点。
运行效果：
除了获取全部子节点，DOM还提供了firstChild和lastChild两个属性，分别表示获取父元素的第一个子元素和最后一个子元素。
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>Java</li>
<li>Node.js</li>
<li>JavaScript</li>
</ul>
</body>
<script>
//获取ul标记
var ulEle = document.querySelector('ul');
//获取ul的第一个子节点
var firstEle = ulEle.firstChild;
console.log(firstEle);
//获取ul的最后一个子节点
var lastEle = ulEle.lastChild;
console.log(lastEle);
</script>
</html>
运行效果：
【2】通过子节点找到父节点
利用parentNode属性，可以找到一个节点的父节点。
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>列表项第1项</li>
<li>列表项第2项</li>
<li class="demo">列表项第3项</li>
<li>列表项第4项</li>
<li>列表项第5项</li>
</ul>
</body>
<script>
//获取class名为demo的li元素
var demoClassLiEle = document.querySelector('.demo');
console.log(demoClassLiEle);
//获取li元素的父节点ul元素
var liParentEle = demoClassLiEle.parentNode;
console.log(liParentEle);
liParentEle.style.color = '#f00';
</script>
</html>
这个案例首先通过class名为demo来获取子节点li标记，再通过parentNode属性，成功找到了子节点li指定的父节点，然后通过父节点的style样式来改变ul父节点的样式。运行代码后，原先的整体color样式，由默认颜色变为#f00。
运行效果：
var liParentEle = demoClassLiEle.parentNode;
liParentEle.style.color = ‘#f00’;
上面两句代码可以用链式编程的方式连写：
demoClassLiEle.parentNode.style.backgroundColor=‘#f00’;
我们还可以一直向上搜索父节点。比如上面案例，我们可以通过两次parentNode来获取body标记。
利用链式编程修改上述案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>列表项第1项</li>
<li>列表项第2项</li>
<li class="demo">列表项第3项</li>
<li>列表项第4项</li>
<li>列表项第5项</li>
</ul>
</body>
<script>
//获取class名为demo的li元素
var demoClassLiEle = document.querySelector('.demo');
console.log(demoClassLiEle);
//利用链式编程获取body元素
demoClassLiEle.parentNode.parentNode.style.backgroundColor='#f00';
</script>
</html>
运行效果：整个body元素的背景颜色都被修改了。
【3】通过某个节点找到它的兄弟节点
在DOM中父子关系属于两个不同层次之间的关系，而在同一层中常用的便是兄弟关系。
DOM中提供了nextSibling和previousSibling属性来访问兄弟节点。nextSibling是访问选中节点的下一个节点，且可以一直向下搜索兄弟节点；previousSibling是访问选中节点的上一个节点，且可以一直向上搜索兄弟节点。
案例代码：通过class为Demo的li标记来获取他的前一个li和后一个li（思路：li之间存在文本节点，所以在这里我们可以利用链式编程两次运用属性找寻。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>Java</li>
<li class="demo">Node.js</li>
<li>JavaScript</li>
</ul>
</body>
<script>
//获取class名为demo的li元素
var demoClassLiEle = document.querySelector('.demo');
//获取li元素的上一个节点元素（兄弟元素）
var previousSiblingEle = demoClassLiEle.previousSibling;
console.log(previousSiblingEle);
//获取li元素的下一个节点元素(兄弟元素)
var nextSiblingEle = demoClassLiEle.nextSibling;
console.log(nextSiblingEle);
</script>
</html>
运行效果：
6、操作节点属性
在找到需要的节点之后通常希望对其属性做相应的设置。DOM定义了三个便捷的方法来查询、设置和删除节点的属性，即getAttribute()、setAttribute()和removeAttribute()。
这三个方法不能通过document对象来调用，只能通过一个元素节点的对象来调用。下面一个例子将实现三个方法的具体操作，带您一步学会三种方法的应用，您可以先注释其它两种方法来看某种方法的实现效果。
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性操作</title>
</head>
<body>
<img src="img/lyf.jpg" width="300px" />
</body>
<script>
var imgEle = document.querySelector('img');
//获取img标签的属性值
var srcValue =imgEle.getAttribute('src');
console.log(srcValue);
console.log(imgEle.src);
var widthValue = imgEle.getAttribute('width');
console.log(widthValue);
//设置img标签的属性值
//imgEle.setAttribute('src','img/wzx.jpg');
//imgEle.setAttribute('width','800px');
//删除img标签的属性值
//imgEle.removeAttribute('width');
//imgEle.removeAttribute('src');
</script>
</html>
7、创建和操作节点
除了查找节点并处理节点的属性外，DOM同样提供了很多便捷的方法来管理节点，主要包括创建、删除、替换、插入等操作。
【1】创建节点
创建节点的过程在DOM中比较规范，而且对于不同类型的节点方法还略有区别。
| 类型 | 方法 |
|---|---|
| 元素节点 | createElement() |
| 文本节点 | createTextNode() |
| 文档片段节点 | createDocumentFragment() |
假设有如下HTML文件：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>创建新节点</title> </head> <body> </body> <html>
希望在body中动态添加如下代码：
<p>段落标签</p>
可以利用刚才提到的两个方法来完成。首先利用createElement()创建p元素，如下所示：
var oP=document.createElement("p");
然后利用createTextNode()方法创建文本节点，并利用appendChild()方法将其添加到oP节点的childNodes列表的最后，如下图所示：
var oText=document.createTextNode("段落标签");
oP.appendChild(oText);
最后再将已经包含了文本节点的元素（oP节点）添加到body中，仍采用appendChild()方法，如下所示：
document.body.appendChild(oP);
这样便完成了body中p元素的创建。appendChild()方法添加对象的位置永远是在节点列表的尾部添加。
【2】插入节点
上面我们介绍了将新创建的元素插入到列表的尾部，如果我们希望这个节点插入已知节点之前，则可以采用insertBefore()方法。该方法有两个参数，第一个参数是新节点，第二个参数是目标节点。
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>节点的增删改查</title>
</head>
<body>
<ul>
<li>列表项第1项</li>
<li class="demo">列表项第2项</li>
</ul>
</body>
<script>
//创建一个li元素节点
var liEle =document.createElement('li');
//创建文本节点
var textNode =document.createTextNode('列表项第n项');
//将textNode节点插入到liEle节点中
liEle.appendChild(textNode);
console.log(liEle);
//将组装好的liEle元素添加到ul元素中
var ulELe = document.querySelector('ul')
// 将liEle元素放在ul中的第一个位置
ulELe.insertBefore(liEle,ulELe.firstElementChild);
</script>
</html>
运行效果：
【3】替换节点
有时候我们需要替换页面中的某个节点。DOM提供了replaceChild()方法来完成这项任务，该方法是针对要替换节点的父节点来操作的。
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>节点的增删改查</title>
</head>
<body>
<ul>
<li>列表项第1项</li>
<li class="demo">列表项第2项</li>
</ul>
</body>
<script>
//创建一个li元素节点
var liEle =document.createElement('li');
//创建文本节点
var textNode =document.createTextNode('列表项第n项');
//将textNode节点插入到liEle节点中
liEle.appendChild(textNode);
console.log(liEle);
//将组装好的liEle元素添加到ul元素中
var ulELe = document.querySelector('ul')
//将组装好的liEle元素替换到ul元素中
ulELe.replaceChild(liEle,ulELe.firstElementChild);
</script>
</html>
运行效果：
【4】删除节点
删除节点是通过父节点的removeChild()方法来实现的。通常方法是找到要删除的节点，然后利用parentNode属性找到父节点，最后利用removeChild()删除节点即可。
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>节点的增删改查</title>
</head>
<body>
<ul>
<li>列表项第1项</li>
<li class="demo">列表项第2项</li>
</ul>
</body>
<script>
var ulELe = document.querySelector('ul')
// 删除第一个li元素
ulELe.removeChild(ulELe.firstElementChild)
</script>
</html>
运行效果：
总结
到此这篇关于一篇文章带你吃透JavaScript中DOM知识及用法的文章就介绍到这了,更多相关JS中DOM知识及用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
学习JS中的DOM节点以及操作
DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现.那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下JS中DOM操作的门吧!! 一.DOM树的节点 1. DOM节点分为三大类: 元素节点(标签节点).属性节点和文本节点. 属性节点和文本节点都属于元素节点的子节点. 因此操作时,需先选中元素节点,再修改属性和文本. [查看元素节点] 1. 使用getElement系列方法: 具体的HTML代码如下图
-
js/jQuery对象互转(快速操作dom元素)
复制代码 代码如下: // jquery对象转js对象 $('#search')[0].checked=true; // js对象转jquery对象 var obj = document.getElementById('search'); alert($(obj).checked);
-
JS实现的DOM插入节点操作示例
本文实例讲述了JS实现的DOM插入节点操作.分享给大家供大家参考,具体如下: 一 介绍 插入节点通过使用insertBefore()方法来实现. insertBefore()方法将在另一个子节点前插入新的子节点. obj.insertBefore(new,ref) new:表示新的子节点. ref:指定一个节点,在这个节点前插入新的节点. 二 应用 插入节点,本示例在页面的文本框中输入需要插入的文本,然后通过单击"前插入"按钮将文本插入到页面中. 三 完整示例代码: <!DOCT
-
JS实现DOM删除节点操作示例
本文实例讲述了JS实现DOM删除节点操作.分享给大家供大家参考,具体如下: 一 介绍 删除节点通过使用removeChild()方法来实现. removeChild()方法用来删除一个子节点. obj. removeChild(oldChild) oldChild:表示需要删除的节点. 二 应用 删除节点,本示例将通过DOM对象的removeChild()方法,动态删除页面中所选中的文本. 三 代码 <!DOCTYPE html> <html> <head> <t
-
JavaScript DOM节点操作方法总结
节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进行增删改之前,首先要找到对应的元素.具体的查找方法如下: getElementByID() // 得到单个节点 getElementsByTagName() // 得到节点数组 NodeList getElementsByName() // 得到节点数组 NodeList 同时还可以利用元素节点的属性获取它的
-
JS DOM 操作实现代码
简单的表格: 复制代码 代码如下: <table> <tr> <td id="TEST"> <input type="submit" value="确定"> <input type="button" value="取消"> </td> </tr> </table> 经测试: 复制代码 代码如下: var td=
-
JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】
本文实例讲述了JS常见DOM节点操作.分享给大家供大家参考,具体如下: DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的文档对象模型. 节点:根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 1.整个文档时一个文档节点. 2.每个HTML元素是元素节点. 3.HTML元素内的文本是文本节点. 4.每个HTML属性是属
-
js使用DOM操作实现简单留言板的方法
本文实例讲述了js使用DOM操作实现简单留言板的方法.分享给大家供大家参考.具体分析如下: 如图所示简易留言板,也就是自娱自乐版,说白了就是练习DOM操作. 要点一:document.createElement("标签名") 新建元素 要点二:父元素.appendChild("元素") 把新建的元素插入到页面的标签中(在标签的最后一个显示),这样才会在浏览器中显示出来 要点三:父元素.insertBefore("元素","要插入哪个元
-
一篇文章带你吃透JavaScript中的DOM知识及用法
目录 一.前言 二.DOM框架 三.认识DOM节点 四.JS访问DOM 1.获取节点 2.改变 HTML 3.改变 CSS 4.检测节点类型 5.操作节点间的父子及兄弟关系 6.操作节点属性 7.创建和操作节点 总结 一.前言 DOM:Document Object Model(文档对象模型),定义了用户操作文档对象的接口,可以说DOM是自HTML将网上相关文档连接起来后最伟大的创新.它使得用户对HTML有了空前的访问能力,并使开发者将HTML作为XML文档来处理. 本文知识导图如下: 二.DO
-
一篇文章带你吃透Vue生命周期(结合案例通俗易懂)
目录 1.vue生命周期 1.0_人的-生命周期 1.1_钩子函数 1.2_初始化阶段 1.3_挂载阶段 1.4_更新阶段 1.5_销毁阶段 2.axios 2.0_axios基本使用 2.1_axios基本使用-获取数据 2.2_axios基本使用-传参 2.3_axios基本使用-发布书籍 2.4_axios基本使用-全局配置 3.nextTick和refs知识 3.0$refs-获取DOM 3.1$refs-获取组件对象 3.2$nextTick使用 3.3$nextTick使用场景 3.
-
一篇文章带你吃透Vuex3的状态管理
目录 一. Vuex是什么 Vue全局事件总线 Vuex状态管理 何时使用Vuex 二. 纯vue组件案例 计算总数案例 添加人员案例 三. Vuex工作原理和流程 第一种工作流程 第二种工作流程 生活化的Vuex工作原理 四. 在项目中引入Vuex 安装Vuex 创建store 在Vue中挂载store 五. Vuex的核心属性用法 单一数据源(state) 状态更新方式(mutations) store中的计算属性(getters) 异步更新状态(actions) 同步增加总数 异步增加总数
-
一篇文章带你了解Java中ThreadPool线程池
目录 ThreadPool 线程池的优势 线程池的特点 1 线程池的方法 (1) newFixedThreadPool (2) newSingleThreadExecutor (3) newScheduledThreadPool (4) newCachedThreadPool 2 线程池底层原理 3 线程池策略及分析 拒绝策略 如何设置maximumPoolSize大小 ThreadPool 线程池的优势 线程池做的工作主要是控制运行的线程数量,处理过程中将任务放入队列,然后在线程创建后启动这些
-
一篇文章带你了解数据库中group by的用法
前言 本章主要介绍数据库中group by的用法,也是我们在使用数据库时非常基础的一个知识点.并且也会涉及Join的使用,关于Join的用法,可以看我写的上一篇文章:带你了解数据库中JOIN的用法 如有错误还请大家及时指出~ 以下都是采用mysql数据库 Group By 概念 Group By语句从英文的字面意义上理解就是"根据(by)一定的规则进行分组(Group)". 作用:通过一定的规则将一个数据集划分成若干个小的区域,然后针对若干个小区域进行数据处理. 注意:group by
-
一篇文章带你了解JavaScript的包装类型
目录 1.简介 2.String 1.创建语法 2.常用方法 3.更多方法 3.Number 1.语法 2.属性 3.常用方法 4.Boolean 总结 1.简介 [解释]: 在 JavaScript 中的字符串.数值.布尔具有对象的使用特征,如具有属性和方法,之所以具有对象特征的原因是字符串.数值.布尔类型数据是JavaScript 底层使用 Object 构造函数“包装”来的,被称为包装类型. 2.String 1.创建语法 字面量 let str = 'abcd'; 构造函数 let st
-
一篇文章带你搞懂Vue虚拟Dom与diff算法
前言 使用过Vue和React的小伙伴肯定对虚拟Dom和diff算法很熟悉,它扮演着很重要的角色.由于小编接触Vue比较多,React只是浅学,所以本篇主要针对Vue来展开介绍,带你一步一步搞懂它. 虚拟DOM 什么是虚拟DOM? 虚拟DOM(Virtual Dom),也就是我们常说的虚拟节点,是用JS对象来模拟真实DOM中的节点,该对象包含了真实DOM的结构及其属性,用于对比虚拟DOM和真实DOM的差异,从而进行局部渲染来达到优化性能的目的. 真实的元素节点: <div id="wr
-
一篇文章带你了解数据库中JOIN的用法
前言 本章主要介绍数据库中Join的的用法,也是我们在使用数据库时非常基础的一个知识点.本次会介绍数据库中的 inner join. left join. right join 的用法以及它们之间的区别. 文章如有错误还请大家及时指出~ 以下都是采用mysql数据库 Join 相信大家在学习数据库的使用时,都有使用过Join,对数据库中的两张或两张以上表进行连接操作. Join 分为: 内连接(inner join) 外连接(outer join) 其中外连接分为: 左外连接(left oute
-
一篇文章带你了解C++中的异常
目录 异常 抛出异常基本操作 自定义的异常类 栈解旋 异常接口声明 异常变量的生命周期 异常的多态 c++的标准异常库 编写自己的异常类 总结 异常 在c语言中,对错误的处理总是两种方法: 1,使用整型的返回值表示错误(有时候用1表示正确,0表示错误:有的时候0表示正确,1表示错误) 2,使用errno宏(可以简单理解为一个全局整形变量)去记录错误.(如果错误,就将被改变的全局整形变量返回) c++中仍然可以用上面的两种方法,但是有缺点. (1)返回值不统一,到底是1表示正确,还是0表示正确.
-
一篇文章带你了解Python中的装饰器
目录 前言 Python 中的装饰器是什么 语法糖 使用 Python 装饰器修改函数行为 使用 Python 装饰器对函数进行计时 使用 Python 装饰器将有用信息记录到终端 Web app 中使用的装饰器 将参数传递给 Python 装饰器 使用多个 Python 装饰器 总结 前言 本文将带你学习装饰器在 Python 中的工作原理,如果在函数和类中使用装饰器,如何利用装饰器避免代码重复(DRY 原则,Don’t Repeat Yourself ). Python 中的装饰器是什么 装