JSDOM和BOM学习第二天（下）

已于 2022-03-02 15:20:20 修改
阅读量94 收藏
点赞数
分类专栏： JSDOM和BOM 文章标签： 学习 javascript 前端
于 2022-02-26 12:18:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33938234/article/details/123148024
版权

JS BOM 和 DOM 学习第二天 （下）

在这里插入图片描述

目录

1. 创建元素的效率对比示例

1.1 innerHTML字符串拼接

<!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>
        // 使用字符串拼接效率
        var d1=new Date();
        var div=document.querySelector('div');
        for(var i=0;i<1000;i++){
            div.innerHTML+='<a href="#">666</a>';
        }

        var d2=new Date();

        console.log(d2-d1);
    </script>
</body>
</html>
  • 效果图

在这里插入图片描述

1.2 innerHTML数组

<!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>
        // 使用字符串拼接效率
        var d1=new Date();
        var div=document.querySelector('div');
        var arr=[];
        for(var i=0;i<1000;i++){
            
            arr.push('<a href="#">666</a>');
        }

        div.innerHTML=arr.join('');

        var d2=new Date();

        console.log(d2-d1);
    </script>
</body>
</html>
  • 效果图

在这里插入图片描述

1.3 creatElement 效率

<!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>
        // 使用字符串拼接效率
        var d1=new Date();
        var div=document.querySelector('div');
        for(var i=0;i<1000;i++){
            var a=document.createElement('a');
            a.innerHTML='666';
            a.href='#';
            div.appendChild(a);
        }

        var d2=new Date();

        console.log(d2-d1);
    </script>
</body>
</html>
  • 效果图

在这里插入图片描述

总结

  • 不同浏览器下，innerHTML效率比creatElement效率高

2. Dom重点核心

2.1 创建

  • document.write
  • innerHTML
  • createElement

2.2 增

  • appendChild
  • insertBefore

2.3 删

  • removeChild

2.4 改

  • 修改元素属性：src,href,title
  • 修改普通元素内容：innerHTML,innerText
  • 修改表单元素：value,type,disabled
  • 修改元素样式：style,className

2.5 查

  • DOM的API：getElementById，getElementByTagName（不提倡）
  • h5新增方法：querySelector，querySelectorAll（提倡）
  • 利用节点操作：父（parentNode），子（childeren），兄（previousElementSibling，nextElementSinling）

2.6 属性操作

  • setAttribute（）：设置DOM属性
  • getAttribute（）：获取DOM属性
  • removeAttribute():删除DOM属性

事件操作

  • 注册事件：事件源.事件类型=事件处理程序
凌歆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现5秒后页面跳转
12-20
js实现5秒后页面跳转
5秒之后自动跳转页面
热门推荐
ywt201010的博客
05-23 1万+
【代码】5秒之后自动跳转页面。
javaScript计时器
weixin_52629592的博客
06-14 1万+
Window中为我们提供了两种计时器,即: 定时器setTimeout() 和 延迟计时器setInterval()定时器setTimeout()为一次性计时器,即在规定时间后执行,且只执行一次;而延迟计时器setInterval()可以实现在指定时间内重复执行.1.定时器创建定时器: 注:这里我们使用setInterval()方法之后返回一个timer,timer是该计时器的唯一标识.参数ms即为在ms毫秒之后执行此定时器中的方法.删除定时器: 使用此方法即可以清除计时
jdbc的内容以及如何在5秒钟后自动跳转到login.html页面
yooppa的博客
03-31 6925
首先，在5秒钟之后跳转到login.html: 最初的解决方法： try { Thread.sleep(5000); response.sendRedirect("login.html"); }catch (Exception e) { e.printStackTrace();; } 预设的是通过 Thread 这个线程类的sleep方法 来进行延时处理 以达到5秒之后的页面跳转
js-5秒之后跳转页面
qq_41670147的博客
12-03 1687
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
js第九天-BOM&DOM
qq_58468193的博客
02-06 443
0.对象 在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。 对象是由属性和方法组成的。 属性：事物的特征，在对象中用属性来表示（常用名词） 方法：事物的行为，在对象中用方法来表示（常用动词） 定义对象： var obj = {name:"张三",age:18,sex:'女'} 对象属性的增删改 点语法 增加属性 obj.weight = 80 obj.height = 130 删除属性 delete obj..
JS-BOM学习笔记
qq_44279495的博客
09-09 265
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webapi学习BOM</title> <!-- BOM 1.DOM对象 2.locat
JS相关BOM和DOM和ECMAScript还有引用数据类型.emmx
07-18
使用mindmaster打开
js学习资源(js基础、BOM和DOM操作)
03-08
在"js学习资源(js基础、BOM和DOM操作)"这个主题中，我们主要探讨JavaScript的基础知识，包括变量、数据类型、控制流程、函数等基本概念，以及如何使用JavaScript来操作浏览器对象模型（BOM）和文档对象模型（DOM）。...
DOM和BOM的使用
01-08
DOM 和 BOM 的使用 DOM（Document Object Model）和 BOM（Browser Object Model）是前端开发中两个基础概念。DOM 是一个文档对象模型，它将 HTML 文档抽象为一个树形结构，允许开发者通过 JavaScript 操作文档的...
javascript bom是什么及bom和dom的区别
10-23
BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作。这篇文章给大家介绍javascript bom是什么及bom和dom的区别，感兴趣的朋友一起学习吧
javascript学习笔记（三）BOM和DOM详解
10-25
本文应用了很多实例，来解读JavaScript中BOM和DOM，DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的...
js实现页面5秒钟以后跳转到其他页面
01-02 1万+
<script language="javascript"> var num = 5; //倒计时的秒数 // var URL = "http://www.baidu.com"; var URL="index.php"; window.setTimeout("doUpdate()", 1000); function doUpdate(){ if(num != 0){ // document.getElementById..
js实现5秒后跳转页面
SkyBulerain的博客
05-02 9216
不积跬步无以至千里，希望大家可以积少成多。
JavaScript实现5秒后跳转界面(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-04 6294
JavaScript实现5秒后跳转界面(附完整源码)
5秒钟之后跳转页面（点击按钮直接跳转）
qq_45879198的博客
09-20 1万+
文章目录前言一、5秒钟之后跳转页面（点击按钮直接跳转） 前言 一些javascript的小功能的实现 提示：以下是本篇文章正文内容，下面案例可供参考 一、5秒钟之后跳转页面（点击按钮直接跳转） <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt
通过js实现计时器
style1226yi的博客
07-14 1万+
通过js实现计时器
js 计时器
爸ba的博客
03-28 1044
js 计时器。
VTK-vtkStructuredGrid学习
最新发布
weixin_69505365的博客
08-14 395
可以理解为单元格顺序沿着坐标轴排列，但是每个单元格可以不一样。维度理解为X/Y/Z方向的点数，如草图所示分别是4，3，1。此时只提供了12个点，只能构造一层，5.点图、线图、面图如下，对应行的代码改一下出现不同效果图。7.增加Z方向维度，点也要增加，点序保持一致。6.点可以不在同一个平面，随机改变点Z数值。2.获取这些点信息，点顺序要严格按照图示。直接赋值第一层的12个点，改一下Z值。所以Z方向维度是1，不能是其他数据。1.使用CAD随意绘制个网格草图。4.将上面的网格显示出来。
js dom bom
10-28
JavaScript中的DOM和BOM分别指的是文档对象模型（Document Object Model）和浏览器对象模型（Browser Object Model）。DOM是用来操作HTML和XML文档的API，它将文档解析成一个由节点和对象（包含属性和方法的对象）组成的结构集合。而BOM则提供了与浏览器窗口交互的对象，例如location、history、navigator和screen等。其中，window对象是BOM的顶级对象，而document对象则是DOM的顶级对象。需要注意的是，window对象和document对象是两个不同的对象，但是它们都属于同一个全局对象，因此可以通过window.document来访问document对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值