前端基础——DOM
前端基础学习第六天
文章目录
-
- 前端基础学习第六天
-
-
一、DOM节点操作
-
-
- 1.节点是什么
-
-
2.创建节点
-
3.添加节点
-
4.改变节点值
-
5.删除节点
-
6.复制（克隆）节点
-
二、DOM事件流
-
-
- 1.阻止事件冒泡和默认事件（默认行为）
-
-
三、JS请求（ajax）
-
一、DOM节点操作
1.节点是什么
DOM中规定，XML文档里每一个部分都可以是节点。节点包括节点类型（nodeType）、节点名称（nodeName）、节点值（nodeValue）。我们经常操作的是元素节点。
我们要在页面中添加一个元素，第一步：创建元素；第二步：添加元素。
2.创建节点
创建元素节点：
document.createElement('tagName')创建文本节点：
document.createTextNode('tagName')3.添加节点
appendChild() 方法向已存在的节点添加子节点，新节点会添加在任何子节点之后。
<div class="father">
<div class="son1"></div>
</div>
<script>
a=document.createElement('p');
x=document.getElementsByClassName('father')[0];
x.appendChild(a);
</script>
insertBefore() 方法向已存在的子节点之前插入节点。
node.insertBefore(newNode,'指定元素');创建新属性 用到的方法是：setAttribute() 方法
a.setAttribute("class","son2");a是需要添加新属性的元素，(“class”,“son2”)分别是新属性和值。
.father{
width: 100px;
height: 100px;
background-color: blue;
}
.son2{
height: 50px;
background-color: brown;
}
<div class="father">
<div class="son1"></div>
</div>
<script>
a=document.createElement('p');
x=document.getElementsByClassName('father')[0];
x.appendChild(a);
a.setAttribute("class","son2");
</script>
4.改变节点值
共有两种方式更改，第一种，通过setAttribute() 方法，它既可以新增属性也可以改变已有属性的值。
.father{
width: 100px;
height: 100px;
background-color: blue;
}
.son1{
height: 50px;
background-color:chartreuse;
}
<div class="father">
<div class="son1"></div>
</div>
<script>
a=document.getElementsByClassName('son1')[0];
a.setAttribute("style","height:70px");
</script>
第二种方法，nodeValue 属性改变属性的值。（用这个方法之前，要先获取到元素的属性，用getAttributeNode()方法获取）
5.删除节点
removeChild() 方法用于删除节点。
6.复制（克隆）节点
二、DOM事件流
在JS中，事件按一定的规则顺序在元素之间传递，这个过程就是DOM事件流。
DOM事件流分为三个阶段：事件捕获阶段、当前目标阶段、事件冒泡阶段
捕获阶段：当事件发生时，会先进行事件捕获，而捕获是从父元素（最顶端节点）开始，逐个往下。
冒泡阶段：当事件被具体的元素接收时，会向上抛出直到DOM最顶端的节点结束。
1.阻止事件冒泡和默认事件（默认行为）
这也是一大面试题。简单的理解默认事件，比如<a>标签，它的默认事件就是跳转一个指定的页面。默认事件就是元素自身附带会自动执行的事件。
阻止事件冒泡和默认事件，分别涉及到以下三种方法：
- return false;
它可以阻止默认事件，在原生JS中它不能阻止事件冒泡，在jQuery中即可以阻止事件冒泡又可以阻止默认事件。
<a href="此处放链接">点这里</a>
<script>
let a = document.getElementsByTagName('a')[0];
a.onclick = function(e){
return false;
console.log(111);
}
</script>
注意：控制台没有打印出111，这里是因为return会终止函数的执行并且返回相应的值，所以console.log(111);没有被执行。
- e.stopPropagation()
e是event的简写，该方法可以阻止事件冒泡，不能阻止默认事件。
- e.preventDefault()
该方法可以阻止默认事件，但是不能阻止事件冒泡。
<a href="此处放链接">点这里</a>
<script>
let a = document.getElementsByTagName('a')[0];
a.onclick = function(e){
e.preventDefault();
console.log(111);
}
</script>
三、JS请求（ajax）
ajax请求，大学的课程设计写登录注册了解到的。ajax全称是async JavaScript and XML（异步JS和XML），是客户端与服务器交互用到的一种手段。
用原生JS使用ajax请求，有如下这几个步骤：
- 创建一个XMLHTTPRequest对象
- 配置请求，附上链接等信息
- 发送请求
- 获取异步调用的数据
- 使用JavaScript和Dom进行刷新
var ajax=new XMLHttpRequest();
ajax.open("get","文件","url");
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState===4&ajax.status===200){
}
}其中，readyState是ajax状态码：
readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行
readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后
readyState === 2 : 表示 send 方法已经执行完成
readyState === 3 : 表示正在解析响应内容
readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了
（此段摘自抱着猫睡觉的鱼_的博客）
status是http状态码：
（图片摘自菜鸟教程）
通过ajax发送的get请求，获取到的数据要通过JSON.parse转换成对象。
（图片摘自菜鸟教程）