JS-day07

于 2024-07-27 14:06:19 发布
阅读量125 收藏 1
点赞数 3
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75449897/article/details/140734622
版权

目录

01-DOM

02-获取DOM节点

03-修改节点内容

04-修改css样式

05-修改属性

06-修改样式的方法

07-操作HTML元素

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

09-总结

10-单击事件

11-取input输入框中的内容

12-旗帜法则

01-DOM

<!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>
    <script>
        // DOM document object model    文档对象模型
    </script>
</body>

</html>

02-获取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>

03-修改节点内容

<!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>

04-修改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;
            /* font-size:; */
        }
    </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 = "800";
    </script>
</body>
</html>

05-修改属性

<!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>

06-修改样式的方法

<!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 {
            width: 200px;
            height: 200px;
        }

        .title {
            width: 300px;
            font-size: 30px;
            font-weight: 800;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">台风格美已登陆台湾</div>

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

        box.style.color = "red";

        // 操作属性
        // box.className = "box title";

        box.setAttribute("class", "box title");
    </script>
</body>

</html>

07-操作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);
        // console.log(father);

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

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

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

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

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

</html>

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

<!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>

09-总结

<!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>
    <script>
        // DOM 操作
        // 1.获取元素
        // 2.修改 内容 样式 属性 (class)
        // 3.操作HTML元素 写入文档 新建节点 新建文本节点 追加节点 插入节点 替换节点 删除节点 删除自身节点 克隆节点
        // 4.根据节点关系获取节点 (长的是获取真正节点的)
    </script>
</body>
</html>

10-单击事件

<!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";
        }

        // 随机色  rgb(255,0,0);

        // num1 num2 num3
        // backgroundColor = "rgb(" + num1 + "," + num2 + "," + num3 + ")"
    </script>
</body>

</html>

11-取input输入框中的内容

<!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>
    <input type="text" value="">
    <button>获取</button>
    <script>
        // 1.获取元素
        var inp = document.getElementsByTagName("input")[0];
        var btn = document.getElementsByTagName("button")[0];

        btn.onclick = function(){
            console.log(inp.value);
        }
    </script>
</body>
</html>

12-旗帜法则

<!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="../作业/作业3-发布聊天/images/1.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;
            // pic.src = "../作业/作业3-发布聊天/images/2.png";
            if (flag) {
                pic.src = "../作业/作业3-发布聊天/images/1.png";
               
            } else {
                pic.src = "../作业/作业3-发布聊天/images/2.png";
            }
        }
    </script>
</body>

</html>

2201_75449897
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSD-2204-酷莎商城-ElementUI-Day07
TheNewSystrm的博客
07-05 695
JSD-2204-酷莎商城-ElementUI-Day07
30-day-of-javascript-day-1
03-04
【标题】"30-day-of-javascript-day-1" 是一个关于JavaScript编程的学习计划，旨在帮助初学者在30天内逐步掌握JavaScript的基础知识。这个计划的第一天通常会涵盖JavaScript的入门概念，为后续的学习打下坚实的基础...
JavaScript-day04
最新发布
2201_75449897的博客
07-20 248
【代码】JavaScript-day04。
JavaScript-day01
2201_75449897的博客
07-19 155
【代码】JavaScript -day01。
Js-day2
2203_75335776的博客
08-16 110
react-day-picker 时间菜单一直显示
徐同保的专栏
12-20 360
http://react-day-picker.js.org/api/DayPickerInput showOverlay boolean = false Show the overlay during the initial rendering of the component. This is useful if you want to keep the overlay visibile while styling it. showOverlay 值设置为true即可 ...
vue.js--day7
想搞全栈的前端
05-02 616
文章目录day7使用mui的`tab-top-webview-main`完成分类滑动栏兼容问题移除严格模式[vue-preview](https://github.com/LS1231/vue-preview) day7 使用mui的tab-top-webview-main完成分类滑动栏 兼容问题 和 App.vue 中的 router-link 身上的类名 mui-tab-item 存在兼容...
JavaScript学习--Day05
weixin_65829986的博客
09-11 188
开发中，提倡多使用剩余参数。
JavaScript-day36
weixin_43369815的博客
03-03 196
1. JS初识 JS : JavaScript
JS-DAY01
qq_52572989的博客
03-24 1072
JS简介、注释、变量、数据类型
JS基础学习-Day03
晚上在线,学习交流,努力日更 ! ! !
09-10 130
文章摘要主要内容 主要内容
js-on-this-day
03-13
在"js-on-this-day-master"这个压缩包文件中，"master"通常指的是Git仓库的主分支，这表明该项目使用Git进行版本控制，并且可能包含了项目的源代码、资源文件、配置文件等。在解压后，我们可以期待找到如下的结构： ...
JS-day01_js_
09-30
"JS-day01_js_"这个标题暗示了这是一个关于JavaScript的基础学习资料，可能是第一天的学习内容或者是一个初级教程的集合。 在描述中提到"JS的入门资料，含简单程序和文档说明"，这意味着这个压缩包可能包含了一系列...
Javascript-day-2
02-26
在"Javascript-day-2"的学习中，你可能会接触到如何在浏览器环境中运行JavaScript（例如通过标签、DOM元素事件监听、Node.js环境），如何使用开发者工具进行调试，以及如何开始处理DOM（Document Object Model）以...
react-day-picker：React的轻量级日期选择器组件
02-03
npm install react-day-picker import DayPicker from " react-day-picker " ; import " react-day-picker/lib/style.css " ; export default function Hello () { return ; } 文献资料 在卡住？ v8即将到来！ 下...
JS-Day-2:Javascript 第 2 天
06-24
在“JS-Day-2:Javascript 第 2 天”这个学习主题中，我们将深入探讨JavaScript这一强大且广泛应用的编程语言。作为Web开发的核心技术之一，JavaScript不仅用于网页交互，还在服务器端、移动应用、游戏开发等多个领域...
js-day
03-01
JavaScript开发人员日 2018年5月25日#jsdevday 2019年5月31日#jsdevday 脸书页面： : 内容：让我们庆祝JavaScript开发人员日。 日期：变量，五月的最后一个星期五，如“ Brendan Eich在1995年5月在10天内编写...
node.js-day5.7z
03-05
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它让JavaScript可以在服务器端执行，打破了JavaScript只能在浏览器中运行的局限。在Node.js的学习中，通常会涵盖以下几个核心知识点： 1. **事件驱动编程**：...
js-day03培训内容1
08-08
在"js-day03培训内容1"中，主要涉及的是jQuery的选择器、Method-API以及Event-API的基础知识。 首先，jQuery的选择器是其强大功能的核心，包括九类选择器： 1. **基本选择器**：如`$("*")`选择所有元素，`$("#id")...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值