JavaScript高级进阶（三）

server/2024/9/22 5:20:47/

DOM-改变HTML

语法与说明

        document.write() //改变HTML输出流，整个页面进行重绘。

        操作对象.innerHTML=新的HTML //改变HTML内容

        操作对象.attribute=新属性值 //改变HTML属性

        对象.style.property=新样式 //改变操作样式的属性

 

       注意: document.write(),优先级太高，修改的是整个的document文档，所以添加会覆盖整个的页面。

实操一下:

document.write() :

<body>

    <button οnclick="rewrite()">点击页面进行改写</button>

    <!-- 为了检测是否改写整个页面 -->

    <p>hello</p >

    <p>hello</p >

    <p>hello</p >

    <p>hello</p >

    <p>hello</p >

    <script>

        function rewrite(){

            document.write('document.write来了，别的都起开！')

        }

    </script>

</body>

a10098fe10ae4e85a184d589f55261e0.png

给他绑定到了这个按钮上，一点就会执行我们的write:

bbf2d407e254499eb660958e3dc70a7f.png

可以看到，确实是改变了整个页面，坐实了前面那个注意。

操作对象.innerHTML=新的HTML:

<body>

    <button οnclick="rewrite()">点击页面进行改写</button>

    <!-- 为了检测是否改写整个页面 -->

    <p>hello</p >

    <p>hello</p >

    <p>hello</p >

    <p>hello</p >

    <p>hello</p >

    <script>

        //innerHtml 添加新东西，覆盖旧东西

        //getElements先找到要添加的地方,像数组一样用下标找到要更改的是第几个标签

        var h1_=document.getElementsByTagName('p')[0];

        h1_.innerHTML='改变后的内容';

    </script>

</body>

0f2fbfe3b22843aeb94d708a3b9e9af2.png

 //还可以在inner中添加标签

        h1_.innerHTML='<h1>hello</h1>';

137335a21ea843baa22ad4d351268e9f.png

 操作对象.attribute=新属性值:

<body>

    <button οnclick="rewrite()">点击页面进行改写</button>

    <!-- 为了检测是否改写整个页面 -->

    <p>hello</p >

    <p>hello</p >

    <p>hello</p >

    <p>hello</p >

    <p>hello</p >

    <script>

        //innerText只是向标签内添加新的文本，覆盖掉原来的内容

        var h2_=document.getElementsByTagName('p')[1];

        h2_.innerText='text值';

    </script>

107940ea520144a28511d3fd7bab1ecc.png

 //如果带有标签（<h1>）识别不了,会把内容当成文本

        h2_.innerText='<h2>text值</h2>';

ba550217dcda4c09ae7278fb48ecf8f0.png

 至于对象.style.property=新样式，更简单，找到对应标签在style后带上想更改或添加的属性就行，下面练习中会有涉及

终于可以做这个小广告练习了，不要觉得low，前端就是要雅俗共赏，要求打开页面3秒后弹出画面，点击关闭可以去掉广告:

先做准备工作:一个写好的页面(我偷了个懒，直接截了一张图)，一个广告素材和关闭素材

19d9ecfdea734b05bc72e69d6ee6eeaf.png

<title>定时弹出小广告</title>

    <style>

        *{

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        .bg{

            width: 100%;

            /* 最好是页面高度 */

            height: 100vh;

            background-color:rgb(255, 255, 255);

            position: relative;

        }

        .xbg{

            width: 100%;

            height: 100%;

            position: absolute;

            object-fit: cover; /* 保持图片的宽高比例，防止拉伸或压扁 */

            z-index: 1; /*背景图在最底层 */

        }

         /* 页面弹出广告后添加此标签，并设置透明度 */

        .blackbg {

            width: 100%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */

            position: absolute;

            z-index: 2; /* 位于背景图之上，广告之下 */

            display: none; /* 默认不显示，广告弹出时显示 */

        }

        .ym{

            position: relative;

            height: 100%;

        }

        .gz{

            width: 618px;

            height: 238px;

            position: absolute;

            /* margin: auto;在绝对定位的情况下不生效，使用 left: 50%; top: 50%; transform: translate(-50%, -50%); 来实现水平和垂直居中。 */

            left: 50%; 

            top: 50%;

            transform: translate(-50%, -50%);

            z-index: 3;

            display: none; /* 默认不显示，几秒后显示 */

        }

        .close_{

            width: 25px;

            height: 25px;

            position: absolute;

            left: 1048px;

            top: 250px;

            z-index: 999;/*直接设在最外层，一点击把blackbg和gz，还有自己close_清掉*/

            display: none;

        }

    </style>

</head>

<body>

    <div class="bg">

        <div class="ym">

            <div class="blackbg"></div>(这玩意是，广告弹出后出现在在广告下，页面上的半透明黑色背景)

            < img src="./images/e57ee45083e1d225b186513f4c80267.png" class="xbg">(这是背景图)

            < img src="./images/26-新客优惠-弹窗@2x.png" class="gz">(广告素材)

            < img src="./images/关闭按钮@2x.png" class="close_" οnclick="clear_()">(关闭素材)

        </div>

    </div>

    <script>

        // 等待3秒后显示广告和半透明黑色背景

        var timer;

        timer = setTimeout(function() {

//这里就是通过style改变元素的属性控制其显示的。     

document.querySelector('.blackbg').style.display = 'block';

            document.querySelector('.gz').style.display = 'block';

            document.querySelector('.close_').style.display = 'block';

        }, 3000); // 3秒后显示

        // 绑定clear_()点击即可删除blackbg，gz和close_

        function clear_() {

            clearTimeout(timer); // 停止定时器

            document.querySelector('.blackbg').style.display = 'none'; // 隐藏背景

            document.querySelector('.gz').style.display = 'none'; // 隐藏广告

            document.querySelector('.close_').style.display = 'none'; // 隐藏关闭按钮

        }

    </script>

</body>

135004c54be6419c904b8167a5792de9.png

 效果就是三秒后弹出广告，点击关闭可以清掉广告和半透明黑色背景。

4e78cf53dfa541bc8b17e78b2530e1a2.png

都带着注释因该大致能看明白，定时器发生后通过document.querySelector找到类名，通过style进行样式的修改，(这里用querySelector算是偷懒了，用前面的getElements一样的效果)

至于那个display的用法，还没有学过移动端写法的同学可能还不太明白，在流式布局，弹性布局中用的多，讲移动端的时候都会说。

DOM节点之间的关系

我们想改变某块区域的样式，通过id虽然准确但太耗时费力。

在整个html文档中，每一个元素都被视为一个节点，HTMLDOM将HTML文档视作树结构，这种结构被称为节点树。

如:

870b27df4049424fb899924ba98fe06b.png

方便js通过dom操作找到每一个节点，节点和节点之间的父子关系，上下级关系，我们称之为节点直接的关系。

节点的好处:页面中任意一个节点，都可以通过节点关系来找到页面的任意另外元素。

        节点属性

        parentNode       返回节点的父节点

        childNodes        返回所有节点，包含元素节点和文本节点，换行等。

        children           返回子节点集合，只返回元素节点【标签】。

        firstChild         返回节点的第一个子节点，最普通的用法是访问该元素的文本节点。

        lastChild         返回节点的最后一个子节点。

        nextSibling      下一个节点。

        previousSibling  上一个节点。

        getAttributeNode 获取属性节点。

下面来演示一下:

以找到ul的父节点与子节点为例

<body>

    <div class="box">

        <ul class="name">

            <li>赵</li>

            <li>钱</li>

            <li>孙</li>

            <li>李</li>

        </ul>

    </div>

    <script>

        //找到ul节点

        var ul_=document.getElementsByClassName('name');

        console.log(ul_);

    </script>

不要忘了这样拿到的不是ul

d8eb2a31b5d743a9a2216fa04520729f.png

 要拿的是第0项

var ul_=document.getElementsByClassName('name')[0];

 //找到父节点

        var box =ul_.parentNode;

        console.log(box);

a24373a3a14f40c1b166c83ef31891e8.png

 //找到所有子节点

        var lis =ul_.childNodes;

        console.log(lis);

70068ed40cac452caee3fca83c72b0c5.png

所有的子节点包括元素，换行，注释。

只想返回元素节点:

        var lis_ = ul_.children;

        console.log(lis_);

dc9537723b0946fab0efaf1b1e90167f.png

 //fristChild当前元素的第一个元素节点

        console.log(ul_.firstChild);

42f9ed4d94174437a87a8ff38af77342.png

 这个节点所有的信息都在这了，那看到的为什么是#text这个玩意呢，且听后面分析。

 //lastChild最后的节点

 console.log(ul_.lastChild);

找找具体的列，不然赵钱孙李不是白写了:

        //找到赵的li

        console.log(ul_.children[0]);

1d5b117fcbb54fd697ec0fa0aee109c2.png

      //找到赵的li下第一个文本，可以搭配使用

        console.log(ul_.children[0].firstChild);

77c9d72a2b0e424f8ec90017f1670250.png

// 使用一下nextSibling，找到赵li的下一个子节点看看好不好使

        console.log(ul_.children[0].nextSibling);

a17cd259a23045d0b36af30551a634b1.png

这里为什么不轻易用那个firstChild来代替children[0]，那不是更方便吗，这就涉及到前面留的坑了:

当浏览器解析 HTML 时，它不仅会解析元素节点（如 <li>），还会解析其中的 空白 和 换行符 作为 文本节点。因此，当你查看 firstChild 时，它可能并不是第一个 <li> 元素，而是一个代表空白的 文本节点。

HTML 结构如下：

<ul class="name">

    <li>赵</li> <!-- 第一个元素节点 -->

    <li>钱</li> <!-- 第二个元素节点 -->

    <li>孙</li>

    <li>李</li>

</ul>

在这个 <ul> 内部，浏览器在 <li> 标签之间可能插入 文本节点 来表示空格或换行符。假设浏览器解析了换行和缩进，DOM 树可能是这样：

<ul>

    #text （表示 <li>赵</li> 之前的换行或空白）

    <li>赵</li> （第一个 <li> 元素）

    #text （表示 <li>赵</li> 和 <li>钱</li> 之间的换行或空白）

    <li>钱</li> （第二个 <li> 元素）

    ...

</ul>

在这种情况下：

ul_.firstChild 实际上返回的并不是 <li>赵</li>，而是那个代表空白或换行的 文本节点。

当你调用 ul_.firstChild.nextSibling 时，返回的会是下一个 文本节点，而不是你期望的第二个 <li> 元素（<li>钱</li>）。

你可以在代码中输出 firstChild 来查看实际返回的节点类型：

console.log(ul_.firstChild); // 可能输出的是一个文本节点 (#text)

console.log(ul_.firstChild.nextSibling); // 可能输出的还是另一个文本节点 (#text)

如何解决

如果你只想获取 <li> 元素，应该使用 children 属性，它只返回 元素节点，不会包含文本节点。例如：

console.log(ul_.children[1]); // 这样可以直接获取第二个 <li>，即“钱”

children 返回的是一个 HTMLCollection，只包含元素节点，因此可以避免空白或换行符造成的干扰。

这里是为了实验nextSibling才这样写的，nextSibling也可以连续使用:

        console.log(ul_.children[0].nextSibling.nextSibling.nextSibling);

70ae827662564525bf5e4cd6b3cf91d1.png

 


http://www.ppmy.cn/server/120134.html

相关文章

关于http的206状态码和416状态码的意义、断点续传以及CORS使用Access-Control-Allow-Origin来允许跨域请求

关于http的206状态码和416状态码的意义、断点续传以及CORS使用Access-Control-Allow-Origin来允许跨域请求

一、关于http的206状态码和416状态码的意义及断点续传 HTTP 2xx范围内的状态码表明客户端发送的请求已经被服务器接受并且被成功处理了,HTTP/1.1 206状态码表示客户端通过发送范围请求头Range抓取到了资源的部分数据&#xff0c;一般用来解决大文件下载问题&#xff0c;一般CDN…
阅读更多...
Python数据分析-Steam 收入排名前 1500 的游戏

Python数据分析-Steam 收入排名前 1500 的游戏

一、研究背景 随着全球数字化进程的加速&#xff0c;电子游戏产业已成为全球娱乐产业的重要组成部分&#xff0c;吸引了越来越多的资本与消费者关注。特别是基于互联网的游戏平台&#xff0c;如Steam&#xff0c;已成为全球范围内发行和销售游戏的重要渠道。Steam平台不仅为玩…
阅读更多...
算法打卡：第十一章 图论part03

算法打卡：第十一章 图论part03

今日收获&#xff1a;孤岛的总面积&#xff0c;沉没孤岛&#xff0c;水流问题&#xff0c;建造最大岛屿 1. 孤岛的总面积 题目链接&#xff1a;101. 孤岛的总面积 思路&#xff1a;只要岛屿中有一个节点是边缘节点&#xff0c;那么这个岛屿就不是孤岛&#xff0c;结果不累加…
阅读更多...
Redis 缓存雪崩、缓存穿透、缓存击穿详解

Redis 缓存雪崩、缓存穿透、缓存击穿详解

缓存雪崩 缓存雪崩指的是大量缓存数据在同一时间失效&#xff0c;导致所有请求直接打到数据库或下游系统&#xff0c;造成数据库瞬时压力剧增&#xff0c;甚至可能引发系统崩溃。 形成原因&#xff1a; 缓存数据同时过期&#xff1a;由于缓存过期时间设置不合理&#xff0c;…
阅读更多...
执行 npm报错 Cannot find module ‘../lib/cli.js‘

执行 npm报错 Cannot find module ‘../lib/cli.js‘

报错 /usr/local/node/node-v18.20.4-linux-x64/bin/npm node:internal/modules/cjs/loader:1143 throw err; ^ Error: Cannot find module ../lib/cli.js Require stack: - /usr/local/node/node-v18.20.4-linux-x64/bin/npm at Module._resolveFilename (node:inter…
阅读更多...
基于Jeecg-boot开发系统--后端篇

基于Jeecg-boot开发系统--后端篇

背景 Jeecg-boot是一个后台管理系统&#xff0c;其提供能很多基础的功能&#xff0c;我希望在不修改jeecg-boot代码的前提下增加自己的功能。经过几天的折腾终于搞定了。 首先是基于jeecg-boot微服务的方式来扩展的&#xff0c;jeecg-boot微服务本身的搭建过程就不讲了&#x…
阅读更多...
【计算机网络 - 基础问题】每日 3 题（七）

【计算机网络 - 基础问题】每日 3 题（七）

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏&…
阅读更多...
目标检测YOLO系列算法——YOLOv1-YOLOv9详细介绍

目标检测YOLO系列算法——YOLOv1-YOLOv9详细介绍

YOLO&#xff08;You Only Look Once&#xff09;系列算法自2016年推出以来&#xff0c;已成为计算机视觉领域中目标检测的主流算法之一。YOLO的核心思想是将目标检测任务转化为一个回归问题&#xff0c;通过单次前向传播即可预测图像中的目标位置和类别。以下是YOLO系列算法的…
阅读更多...
最新文章

Copyright @ 2022~2023