JavaScript -- 总结 8（小白）

最新推荐文章于 2024-09-11 15:33:18 发布

柿子来了

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量364

点赞数 12

文章标签： javascript 前端

本文链接：https://blog.csdn.net/2301_78949452/article/details/140887477

版权

获取DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作</title>
</head>
<body>
    <div id="today" class="box">今天比较凉快</div>

    <div class="box">hello</div>

    <div class="box">world</div>

    <script>
        // 获取的元素都属于 DOM 对象
        // 1.根据ID获取元素
        var today = document.getElementById("today");
        console.log(today);
        console.dir(today);
        console.log(today.innerHTML);

        // 2.根据class类名获取元素  伪数组
        var box = document.getElementsByClassName("box")[1];
        console.log(box);

        // 3.根据标签名获取元素
        var item = document.getElementsByTagName("div")[2];
        console.log(item);

        // 获取特殊节点
        var doc = document.documentElement;
        console.log(doc);

        // 获取 body 
        var body = document.body;
        console.log(body);

        // 获取 title 
        var tit = document.title;
        console.log(tit);
    </script>
</body>
</html>

修改节点内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">台风</div>

    <script>
        // 获取元素
        var box = document.getElementsByClassName("box")[0];
        console.log(box);

        // 1.innerHTML 可以识别标签
        console.log(box.innerHTML);
        // box.innerHTML = "格美";
        box.innerHTML = "<b>格美</b>";

        // 2.innerText  不可以识别标签
        // box.innerText = "台风";
        box.innerText = "<b>台风</b>";
    </script>
</body>

</html>

修改css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box{
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">台风格美已登陆台湾</div>

    <script>
        // 获取元素
        var box = document.getElementsByClassName("box")[0];

        // 修改样式
        box.style.color = "green";

        box.style.fontSize = "30px";

        box.style.fontWeight = "600";
    </script>
</body>
</html>

修改属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box" title="文本" id="windy">台风</div>

    <img src="https://q0.itc.cn/images01/20240718/8afcbe14d217453fa5f465eb8d7f0fef.png" alt="">

    <script>
        // 获取元素
        var box = document.getElementsByClassName("box")[0];

        // 1.通过 . 形式修改属性
        box.title = "修改后的文本";
        // 修改类名 className 
        box.className = "pox box";
        box.id = "hot";

        var pic = document.getElementsByTagName("img")[0];

        pic.src = "https://img1.baidu.com/it/u=1567632714,3605840724&fm=253&fmt=auto&app=138&f=JPEG?w=475&h=475";

        // 2.setAttribute() 设置属性
        pic.setAttribute("title","头像");
        pic.setAttribute("class","boy blue");
        
        // getAttribute() 获取属性
        console.log(pic.getAttribute("src"));
        // console.log(pic.src);

        // removeAttribute() 删除属性
        pic.removeAttribute("alt");
    </script>
</body>
</html>

操作HTML元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="father">
        <div class="son1">son1</div>
        <div class="son2">son2</div>
    </div>

    <script>

        var father = document.getElementsByClassName("father")[0];
        var son2 = document.getElementsByClassName("son2")[0];
        // 1.写入到文档
        // document.write("abc");

        // 2.新建节点
        var box = document.createElement("div");
        console.log(box);

        // 3.新建文本节点
        var text = document.createTextNode("hello world");
        console.log(text);

        // 4.追加节点
        box.appendChild(text);
        console.log(box);

        // father.appendChild(box);

        // 5.插入节点 往谁里面插入，插入什么东西，插入到谁之前
        // insertBefore  insertAfter ×
        father.insertBefore(box, son2);

        // 6.替换节点 谁里面需要替换，用谁替换，替换掉谁
        father.replaceChild(box, son2);

        // 7.删除节点   removeChild 删除子节点
        father.removeChild(son2);

        // 删除自身节点  remove
        father.remove();

        // 8.克隆节点  true 深度拷贝
        var clone = father.cloneNode(true);
        console.log(clone);
    </script>
</body>

</html>

根据节点之间关系获取元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="father">

        <div class="son"></div>

        <div class="son1"></div>

        <div class="son2"></div>
        
    </div>

    <script>
        var son1 = document.getElementsByClassName("son1")[0];
        var father = document.getElementsByClassName("father")[0];

        
        console.log(son1);

        // 获取父节点
        console.log(son1.parentNode);

        // 获取兄弟节点
        // nextSibling  (幽灵节点)
        console.log(son1.nextSibling);

        // nextElementSibling
        console.log(son1.nextElementSibling);

        console.log(son1.previousSibling);

        console.log(son1.previousElementSibling);

        // 获取子节点
        console.log(father.firstChild);
        console.log(father.firstElementChild);
        console.log(father.lastChild);
        console.log(father.lastElementChild);

        // 获取所有子节点
        console.log(father.childNodes);
        console.log(father.children);
    </script>
</body>

</html>

单击事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 100px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div>黑色</div>
    <div>白色</div>

    <div class="box"></div>

    <script>
        // 绑定单击事件
        var box1 = document.getElementsByTagName("div")[0];
        var box2 = document.getElementsByTagName("div")[1];
        var box3 = document.getElementsByTagName("div")[2];

        // 单击事件  onclick 
        box1.onclick = function () {
            console.log("点击");
            box3.style.backgroundColor = "black";
        }

        box2.onclick = function () {
            console.log("点击");
            box3.style.backgroundColor = "white";
        }
    </script>
</body>

</html>

旗帜法则

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <img src="../shurucuowu.png" alt="">

    <script>
        var pic = document.getElementsByTagName("img")[0];

        var flag = true;

        // 对应关系: 当时1.png时, flag=true  当是 2.png时,flag = false

        pic.onclick = function () {
            // 每次点击后 改变 flag 标记
            flag = !flag;
            if (flag) {
                pic.src = "../shurucuowu.png";
               
            } else {
                pic.src = "../shuruzhengque.png";
            }
        }
    </script>
</body>

</html>