前端基础学习第六天:）

2023-10-03 19:31:34

前端基础学习第六天

文章目录

- 前端基础学习第六天

一、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>

码农公寓