JS基础和DOM使用

最新推荐文章于 2023-04-10 21:05:46 发布

Yeahyeahy

最新推荐文章于 2023-04-10 21:05:46 发布

阅读量248

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_48268485/article/details/125505316

版权

一、JS基础

1.变量：声明关键字变量名称 = 变量值;等号为赋值。

2.数据类型：分为简单数据类型和复杂数据类型

number 数字；boolean 布尔类型；string 字符串；undefined 未定义；null 空

3.分支语句/条件判断

if语句。if的括号内，就是对条件的判断，括号内的值只能是布尔值。在if 条件判断的代码块中，如果满足其中一个条件，只会选择执行一个代码块，然后结束条件判断语句。if 的使用场景为在范围性的内容判断时使用。

switch选择语句，是在有特定或者固定值的时候来使用。

4.循环语句

for循环体

while 会先进逻辑判断，如果为假则不会执行循环体内的代码

do while 不管括号内的条件是否为真，都会先进行一次循环体内的代码执行

5.数组：声明方式：var 数组名[]

6.函数/方法

作用：封装执行的代码块或者利于重复调用的代码块，可实现复用,提高代码利用率，减少冗余代码。

创建方式：① function name(){代码块}

②匿名函数 var name = function(){代码块 }

声明方式：function关键字方法名(){}

7.对象

属性：事物的特征

方法：事物的行为

创建方式：①字面量创建
var star = {
属性名：属性值, 属性名：属性值,属性名：属性值,方法名:函数(){ }}

②new 关键字创建
var name = new Object();name.属性名 = 值;name.属性名 = 值;name.方法名 = 函数(){}

③构造函数创建
function Person(name,age,gender){ this.name = "jack"; this.age = 15;this.gender = male; } var jack = new Person; };

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var num = ['刘备', '关羽', '张飞', '马超', '赵云', '黄忠', '诸葛亮'];
        var count = [1, 2, 3, 4, 5, 6, 7, 8];

        // function person() {
        //     for (var i = 0; i < num.length; i++) {
        //         console.log(num[i]);
        //     }
        // }
        // person();
        // 函数括号内没有变量，则这是一个无参函数，若有变量，则是带参函数
        // one 在此刻为 形参 ，在声明时候使用
        var person = function (one) {
            for (var i = 0; i < one.length; i++) {
                console.log(one[i]);
            }
        }
        // 在调用函数时候，传入的参数称为 实参 
        person(num);
        person(count);
        // function count() {
        //     var num = ['刘备', '关羽', '张飞', '马超', '赵云', '黄忠', '诸葛亮'];
        //     for (var i = 0; i < num.length; i++) {
        //         console.log(num[i]);
        //     }
        // }
    </script>

</body>

</html>

二、DOM的使用

1.DOM概念

DOM 即 Document Object Model,DOM 顶级对象为 document

2.DOM节点分类

文档节点、元素节点、属性节点、文本节点

3.DOM的查询获取元素方法

getElementById：通过id获取元素（单个）

getElementsByTagName：通过标签名称获取元素（多个）

getElementsByClassName：通过类名获取元素（多个）

querySelector：通过我们给定的名称获取第一个元素（单个）

querySelectorAll：通过我们给定的名称获取所有该名称的元素（多个）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    window.onload = function () {
        // 1.id查找元素
        var first = document.getElementById('first');
        console.log(first);
        // 2.标签名查找元素
        var divs = document.getElementsByTagName('div');
        for (var index = 0; index < divs.length; index++) {

            console.log(divs[index]);
        }

        // 3.类名查找元素
        var divclass = document.getElementsByClassName('a');
        console.log(divclass);

        //4.querySelector选中元素
        var third = document.querySelector(".third");
        console.log('4:' + third);

        // 5.根据选择器返回所有对象集合
        var one=document.querySelectorAll("#one");
        console.log(one);

        // 6.获取body元素
        var body=document.body;
        console.log(body);
        // 7.获取html元素
        var html=document.documentElement
        console.log(html);

    }

</script>
<body>
    <div id="first">我是第一个元素</div>
    <div class="a">我是第二个元素</div>
    <div class="third">我是第三个元素</div>
    <div id="one">我是第四个元素</div>
    <div id="one">我是第五个元素</div>
    <div>我是第六个元素</div>
</body>
</html>

4.DOM的部分操作方法

createElement 创建一个元素节点

appendChild 向一个元素节点的末尾添加一个元素节点

insertBefore 向一个元素节点前面添加一个元素节点

removeChild 移除一个元素节点下的某一个元素节点

replaceChild 将页面中的某一个节点替换掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    window.onload = function () {
        var father = document.querySelector(".father");
        // 1.创建一个元素
        var div = document.createElement("div");
        div.innerText = "我是小儿砸";
        // 2. 向一个元素节点的末尾追加一个节点
        // father.appendChild(div);

        // 3. 向某一个节点前插入一个节点
        father.insertBefore(div, father.childNodes[0]);

        // 4.移除某一节点下的某一个节点
        var span = document.querySelector(".outer")
        father.removeChild(span)

        
        // 5.   将页面中的某一个节点替换掉
        var box = document.querySelector('.box');
        var inner = document.querySelector('.inner');
        var p1 = document.createElement('p');
        p1.innerText = '我是干儿砸';
        box.replaceChild(p1, inner);
    }
</script>
<body>
    <div class="father">
        <div class="son">我是大儿砸</div>
        <div class="son">我是二儿砸</div>
        <div class="son">我是三儿砸</div>
        <div class="son">我是四儿砸</div>
        <span class="outer">我是外人</span>
        <div class="box">
            <p class="inner">我是亲戚</p>
        </div>
    </div>
</body>
</html>