JavaScript day6

最新推荐文章于 2024-08-22 14:32:34 发布
最新推荐文章于 2024-08-22 14:32:34 发布
阅读量48 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Follow_haodi/article/details/132397745
版权

从ECMA到W3C

我们知道，ECMA定义的是js的变量语法等基础的标准规范，而W3C是针对浏览器API提出的规范， 所以我们要工作不可能只了解语法，我们的代码要在浏览器上跑起来就需要我们去了解W3C的标准。

那么W3C规定了哪一系列的的API呢，DOM、BOM、AJAX、事件、存储等等。window.document，这个就是W3C提出的浏览器内置更多的对象之一。

API的概念

API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组程序的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。

总之API就是为我们程序员提供了一个接口，帮助我们实现某种功能。

Web API的概念

Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。

什么是DOM？

HTML DOM 是W3C （万维网联盟）制订的一套标准，标准中定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

注意：DOM 是 Document Object Model（文档对象模型）的缩写。

DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

  • 整个文档是一个文档节点

  • 每个 HTML 元素是元素节点

  • HTML 元素内的文本是文本节点

  • 每个 HTML 属性是属性节点

  • 注释是注释节点

DOM 节点树

DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

  • 文档：一个页面就是一个文档，DOM中使用document表示

  • 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示

  • 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

  • DOM把以上内容都看做对象。（对象可以有属性和方法）

  • 通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML元素（节点）均可被修改，也可以创建或删除节点。

获取元素节点

为什么要获取页面元素？

例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，再对其进行操作。

假设页面中包含如下代码，我们怎样使用 DOM 提供的方法获取这些节点呢？

<!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>
    <div class="box" id="pox">昨天晚上下大雨了？</div>
    <div class="box">昨天晚上下大雨了？2</div>
    <div class="box">昨天晚上下大雨了？3</div>
    <div class="box">昨天晚上下大雨了？4</div>
    <div>昨天晚上下大雨了？5</div>
    

    <script>
        // 1.通过标签名获取节点 
        // 获取到所有对应标签的元素组成的伪数组
        // 获取到确定的某个元素，跟上该元素对应的索引下标
        var box = document.getElementsByTagName("div")[4];
        console.log(box);

        // 2.通过类名获取节点
        // 获取到所有对应类名的元素组成的伪数组
        // 获取到确定的某个元素，跟上该元素对应的索引下标
        var box1 = document.getElementsByClassName("box")[1];
        console.log(box1);

        // 3.通过id获取节点,直接获取到确定的元素
        var pox = document.getElementById("pox");
        console.log(pox);
    </script>
</body>
</html>
获取特殊节点
<!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>
        // 获取整个 html 节点
        var ohtml = document.documentElement;
        console.log(ohtml);

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

        // 获取页面标题
        var tit = document.title;
        console.log(tit);
    </script>
</body>
</html>
改变html内容
<!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>
    <div>今天中午吃啥饭？</div>

    <script>
        // 1.获取节点
        var box = document.getElementsByTagName("div")[0];

        console.log(box);

        // 修改节点HTML内容
        // 1.innerText
        box.innerText = "修改后的内容";

        // 2.innerHTML
        box.innerHTML = "修改后的内容2";

        // 3.innerText 和 innerHTML 的区别: innerText只能插入文本，不能识别标签；innerHTML可以识别标签。
        box.innerText = "<b>加粗的内容</b>";
        box.innerHTML = "<b>加粗的内容</b>";

        // 获取节点内容
        var text = box.innerText;
        console.log(text);
    </script>
</body>
</html>
改变css样式
<!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>
    <style>
        div{
            width: 200px;
            height: 200px;
            color: red;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="box">今天中午吃啥饭？</div>
    <script>
        // 1.获取元素 
        var box = document.getElementsByClassName("box")[0];

        // 改变元素 CSS 样式, 一个单词直接写；如果单词中间出现连词符 "-", 去掉连词符，后面的单词首字母大写
        // 通过 .style.样式 修改或添加的样式会出现在行内
        box.style.color = "#00f";
        box.style.backgroundColor = "#f00";
        box.style.fontSize = "30px";
    </script>
</body>
</html>
改变html属性
<!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>
    <div class="box">天生我材必有用，千金散尽还复来。</div>

    <script>
        // 获取元素
        var box = document.getElementsByClassName("box")[0];
        console.log(box);
        
        // 1. 元素.属性名
        console.log(box.className);
        
        // 修改元素属性
        // box.className = "pox";

        // 2. 通过 getAttribute() 获取属性
        console.log(box.getAttribute("class"));

        // 通过 setAttribute() 设置属性
        box.setAttribute("class","pox pox2");

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

操作html元素

创建节点
<!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 textNode = document.createTextNode("你好");
        console.log(textNode);

        // 新建节点
        var newEle = document.createElement("p");

        newEle.appendChild(textNode);
        console.log(newEle);
    </script>
</body>
</html>
追加节点
<!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>
    <div>123</div>
    <script>
        // 新建文本节点
        var text = document.createTextNode("456");

        // 获取父节点
        var box = document.getElementsByTagName("div")[0];


        // 将新建文本节点追加到父节点里面
        box.appendChild(text);
    </script>
</body>
</html>
插入节点
<!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>
    <div>
        <i>天生我材必有用，千金散尽还复来。</i>
    </div>

    <script>
        // 获取节点
        // 父节点
        var box = document.getElementsByTagName("div")[0];

        // 目标节点
        var ibox = document.getElementsByTagName("i")[0];

        // 新建节点
        var bold = document.createElement("b");

        // 插入节点     父节点.insertBefore(新建节点,目标节点);
        box.insertBefore(bold,ibox);

        // 注意：没有 insertAfter()
        // 要想在父节点后面插入 appendChild()
    </script>
</body>
</html>
替换节点
<!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>
    <div>
        <i>天生我材必有用，千金散尽还复来。</i>
    </div>

    <script>
        // 获取节点
        // 父节点
        var box = document.getElementsByTagName("div")[0];

        // 目标节点
        var ibox = document.getElementsByTagName("i")[0];

        // 新建节点
        var bold = document.createElement("b");

        // 替换节点     父节点.replaceChild(新节点,目标节点);
        box.replaceChild(bold,ibox);
    </script>
</body>

</html>
删除节点
<!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>
    <div>
        <i>天生我材必有用，千金散尽还复来。</i>
    </div>

    <script>
        // 获取节点
        // 父节点
        var box = document.getElementsByTagName("div")[0];

        // 目标节点
        var ibox = document.getElementsByTagName("i")[0];

        // 删除节点
        box.removeChild(ibox);


        // 获取元素
        var box = document.getElementsByTagName("div")[0];

        // 删除本身节点
        box.remove();
    </script>
</body>

</html>
克隆节点
<!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>
    <div>
        <i>天生我材必有用，千金散尽还复来。</i>
    </div>

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

        console.log(box);

        // 克隆节点  默认情况只克隆节点本身，而不克隆节点内的元素；
        var cloneBox = box.cloneNode();
        console.log(cloneBox);

        // 深度克隆
        var cloneBox2 = box.cloneNode(true);
        console.log(cloneBox2);

    </script>
</body>

</html>

根据节点关系获取节点

<!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>
    <div class="father">
        <div class="pox1">000</div>
        <div class="box">
            <div class="box1">123</div>
            <div class="box2">456</div>
        </div>

        <div class="pox">
            789
        </div>
    </div>

    <script>
        // 获取父节点
        var box = document.getElementsByClassName("box")[0];

        // 1.下一个兄弟节点 
        // nextSibling  幽灵节点（看不见摸不着，只是放在那里）
        console.log(box.nextSibling); // #text

        // nextElementSibling  下一个兄弟节点  IE9以上才支持
        console.log(box.nextElementSibling);

        // 2.上一个兄弟节点
        // previouosSibling     幽灵节点
        console.log(box.previousSibling); // #text

        // previousElementSibling   上一个兄弟节点  IE9以上才支持
        console.log(box.previousElementSibling);

        // 3.访问第一个孩子节点
        // firstChild   幽灵节点
        console.log(box.firstChild); // #text

        // firstElementChild    第一个孩子节点  IE9以上才支持
        console.log(box.firstElementChild);

        // 4.访问最后一个孩子节点
        // lastChild   幽灵节点
        console.log(box.lastChild);

        // lastElementChild     最后一个孩子节点
        console.log(box.lastElementChild);


        // 5.访问孩子节点
        // childNodes   所有孩子节点组成的伪数组，包括幽灵节点
        console.log(box.childNodes);

        // children     所有孩子节点组成的伪数组，不包括幽灵节点
        console.log(box.children[1]);
    </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>
        .bg {
            cursor: pointer;
            width: 400px;
            height: 600px;
        }
    </style>
</head>

<body>
    <img src="img/图片1.webp" alt="" class="bg">
    <script>
        var bg = document.getElementsByClassName("bg")[0];

        // 默认 flag 为1，代表此时页面上的第一个图片
        var flag = 1;
        // 给图片添加单击事件
        bg.onclick = function() {
            // if判断 如果flag是默认图片的话就会进入第一个判断
            if (flag == 1) {
                // 将img的属性值src更换成第二张图片
                bg.src = "img/图片2.webp";
                // flag等于2是为了让他继续判断
                flag = 2;
                // 此时 就是如果flag为2的话就会进入这个判断 以此类推
            } else if (flag == 2) {
                bg.src = "img/图片3.webp";
                flag = 3;

            } else if (flag == 3) {
                // 最后结束的时候一定要将图片返回为默认的哦
                bg.src = "img/图片1.webp";
                flag = 1;
            }
        }
    </script>
</body>

</html>

Follow_浩弟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript程序设计训练 Day3
qq_55786319的博客
04-15 2147
1、编写程序，根据用户输入的数值，计算其平方、平方根和自然对数 <script> var input_num=Number(prompt("请输入一个数字:")); var sqrt_num=Math.sqrt(input_num);//开方 var pow_num=Math.pow(input_num,2);//平方 var log_num=Math.log(input_num);//ln,即e的多少次方等于input_n
四天学会JavaScript(Day1~Day4)
热门推荐
qq_41424688的博客
10-06 6万+
七天学完JavaSctipt~Day1 前言        在9月22号当时距离国庆还有8天的时候,原本是说国庆计划五天的时间来总结微服务的(详情见微服务架构设计模式与CAP定理),可没想到自己太过心急...提前过了一遍。。所以这次就打算用国庆的时间来好好学学JavaScript。其实前端这一块呢,我几乎是一个小白。过去也只是写写Ajax,或者整几个XX事件,接收接收数据而已。所以这个国庆我是计划用七天的时间把JavaScript语言从头
JavaScript Day_03
m0_66095162的博客
03-24 1069
Javascript学习笔记
JavaScript Day01
m0_61373758的博客
03-08 876
JavaScript历史：网景公司（布兰登·艾奇）ECMAScript是一个标准，JavaScript是语言 js概念 概念：支持面向对象的跨平台脚本语言。 理解： 脚本语言：依赖别的语言才能运行 html必须在浏览器中才能运行，js嵌套在html中才能运行 跨平台：可以在不同的平台上运行 windows、linux、安卓... 支持面向对象 使用面向对象的思想编程 应用场景： 表单验证：规范用户输入数据，和后台数据进行交互 网页特效：给页
JavaScript---day09
Amanecer_的博客
09-01 346
时间对象、字符串对象
JavaScript Day_02
03-24
javascript第二天笔记
JavaScript Day_01
03-24
javascript学习第一天笔记
92815day6:启动Javascript
05-06
这是Readme.md文件，它完成了Javascript中基本运算符的分配 * `README.md` * `.gitignore` * Completed `main.js` 此文件夹中的可交付成果是 链接到我的博客文章。 包含main.js的回购链接
JS.rar_day3lb_javascript
09-23
在"JS.rar_day3lb_javascript"这个压缩包中，我们很显然关注的是JavaScript技术，特别是与“futdraft”程序相关的应用。"futdraft"可能是一个足球模拟选秀或者阵容构建的应用，这需要对JavaScript有深入的理解以及对...
nodejs安装
a1241436267的博客
08-19 375
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 317
npm。
2024前端面试题-js篇
FormAda的博客
08-22 687
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 563
【代码】springboot网上商品订单转手系统bootpf
【js】各类前端输入校验方法
galaxyJING的博客
08-21 313
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 990
用于在Vue应用程序或API路由中进行HTTP请求，详见。
React学习笔记，从入门到砸门
留白声的博客
08-20 1016
react详细自我学习笔记，内容包括JSX、Redux、Router等
【Vue】：利用 vue-drag-resize 拖拽缩放插件，实现对元素的拖拽以及拉伸操作，从而调整元素的宽度和高度
Anislandwhale的博客
08-21 882
“vue-drag-resize” 是一个用于 Vue.js 的插件，它允许你在 Vue 应用中轻松实现可拖拽和可调整大小的元素
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 215
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值