前端基础之BOM和DOM

1、BOM和DOM简述

BOM:指浏览器对象模型,它使JavaScript有能力与浏览器进行对话

DOM:指文档对象模型,通过它,可以访问HTML文档的所有元素

2、Window对象

所有浏览器都支持window对象,他表示浏览器窗口。

如果文档包含框架(frame或iframe标签),浏览器会为HTML文档创建一个window对象,并为每个框架创建一个额外的window对象

所有JavaScript全局对象,函数以及变量均自动成为window对象的成员

全局变量是window对象的属性。全局函数是window对象的方法


常用的window方法:

        window.innerHeight    ------  浏览器窗口的内部高度

        window.innerWidth    -------  浏览器窗口的内部宽度

        window.open()  -----   打开新窗口

        window.close()    -------- 关闭当前窗口

3、Window的子对象

        1、navigator对象

                浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息

navigator属性值叙述
navigator.appNameweb浏览器全称
navigator.appVersionweb浏览器厂商和版本的详细字符串
navigator.userAgent(重要)客户端绝大部分信息
navigator.platform浏览器运行所在的操作系统
        2、screen对象

屏幕对象,不常用。

screen对象属性:

        screen.availWidth  ----------    可用的屏幕宽度

        screen.availHeight  -----------  可用的屏幕高度

        3、history对象

window.history对象包含浏览器的历史

浏览器历史对象,包含用户对当前页面的浏览历史,但我们无法查看具体的地址,可用简单的用来前进或后退一个页面

history属性值概述
history.forward()前进一页
history.back()后退一页
        4、location对象

window.location对象用于获得当前页面的地址(URL),并把浏览器重定向到新的页面。

location属性值概述
location.href获取当前网页的URL地址
location.href = 'URL'跳转到指定页面
location.reload()重新加载(刷新)当前页面

4、弹出框

        1、警告框

警告框经常用于确保用户可以得到某些信息,警告框出现后,用户需点击确定按钮才能继续操作

 

语法:

        alert("123")

        2、确认框

确认框用于使用用户可以验证或接受某些信息,当确认框出现后,用户需要点击确定或取消按钮才能继续操作

用户点击确认返回ture,用户点击取消返回false

语法:

        confirm("你确定吗?")

        3、提示框

提示框经常用于提示用户在进入页面前输入某个值,当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

用户点击确认,那么返回值为输入的值,如果点击取消,那么返回值为null

语法:

        prompt("请在下方输入,你的内容")

5、计时相关

通过使用JavaScript,我们就可以在一定时间间隔之后执行代码,而不是在函数被调用后立即执行,我们称之为计时事件

        计时方法

        1、setTimeout("JS语句",毫秒)

        setTimeout:会在指定的时间内指定某个JS语句的方法,并且只执行一次

        

        2、clearTimeout(setTimeout_varible)

        

        clearTimeout:取消setTimeout设置


        2、setInterval("JS语句",时间间隔)

        

        setInterval:按照指定的时间间隔执行JS语句中的方法,时间间隔一到就执行一次,会不停的调用函数,直到被clearInterval关闭

        

        3、clearInterval(setInterval返回的id值)

        clearInterval:取消setInterval设置的timeout

        

DOM

DOM是一套对文档的内容进行抽象和概念化的方法,当页面被加载时,浏览器会创建页面的文档对象模型

DOM标准规定HTML文档中的每个成分都是一个结点:

文档结点(document对象):代表整个文档

元素结点(element对象):代表一个元素(标签)

文本结点(text对象):代表元素(标签)中的文本

属性结点(attribute对象):代表一个属性,元素(标签)才有属性

注释是注释结点(comment对象)

        DOM树

        

6、查找标签

        1、直接查找
直接查找方法说明
document.getElementById("id")根据ID获取一个标签
document.getElementsClassName()根据class属性获取
document.getElementsByTagName()根据标签获取标签合集
        2、间接查找

        

间接查找方法:标签.方法
parentElement父节点标签元素
children所有子标签
firstElementChild第一个子标签元素
lastElementChild最后一个子标签元素
nextElementSibling下一个兄弟标签元素
previousElementSibling上一个兄弟标签元素

7、结点操作

        1、创建结点(创建标签)

语法:

        create Element(标签名)

例:var div = document.createElement("div");

        2、添加结点(增加属性)

语法:

        使用点语法增加属性

例:var img = document.createElement("img");        创建标签

        img.src = "URL";

        img.alt = "图片错误"

        img.setAttribute("name","jack");

注意事项:

        1、增加标签自带的属性时,可以使用点语法

        2、增加自定义属性,不是标签自带的属性时,使用setAttribute()语法

 

补充:

        获取一个属性:console.log(img.getAttribute('name'))

        3、将结点增加到div中,在浏览器中显示

语法:

        div.appendChild(img);

例:完整的一个创建标签到结束的全过程:

        

// 创建一个a标签出来
// 创建a标签
var a = document.createElement('a'); // <a></a>
var div = document.getElementById('d1');
// 增加属性
a.href='http://www.baidu.com';// <a href='http://www.baidu.com'></a>
a.title='点我解解困把';// <a href='http://www.baidu.com' title='点我解解困把'></a>
a.setAttribute('username',' aaa');
a.getAttribute('username')
// 增加文本内容
// a.innerText = '<h1>点我看美女</h1>';// <a href='http://www.baidu.com' title='点我解解困把'>点我看美女</a>
a.innerHTML = '<h1>点我看美女</h1>';// <a href='http://www.baidu.com' title='点我解解困把'>点我看美女</a>
console.log(a);

div.appendChild(a);

        4、删除结点(属性)

语法:

        img.removeAttribute('你想删除的结点')

例:

        var img = document.createElement("img");        创建标签

        img.src = "URL";        增加结点

        img.alt = "图片错误";        增加结点

        img.removeAttribute("alt");   删除结点

        5、替换结点(属性)

语法:

        somenode.replaceChild(newnode,某个结点);

        6、属性结点(属性)

获取文本结点的值

两种方法:

        1、inner.Text:只生效文本,标签效果不生效

        2、innerHTML:文本效果显示,标签的效果也生效

例:

        获取文本结点的值:

        var divEle = document.getElementById("d1")

        divEle.innerText

        div.Ele.innerHTML

设置文本结点的值:

        var divEle = document.getElementById("d1")

        divEle.innerText="1"

        divEle.innerHTML="<p>2</p>"

        7、获取值操作

语法:

        elementNode.value

 适用于一下标签:

        1、.input

        2、.selectm

        3、.textarea

        value不能获取文件数据,获取文件数据要用files

var iEle = document.getElementById("i1");
console.log(iEle.vaule);
var sEle = document.getElementById("s1");
console.log(sEle.vaule);
var tEle = document.getElementById("t1");
console.log(tEle.vaule);
        8、class值操作

className  获取所有样式类名(字符串)

方法说明
classList.remove(cls)删除指定类
classList.add(cls)添加类
classList.contains(cls)存在返回true,否则返回false
classList.toggle(cls)存在就删除,否则添加
        9、指定CSS操作

JS操作CSS规律:

        1、对于没有中横线的CSS属性一般直接使用style.属性名即可

 例如:

         obj.style.margin:2px;

        obj.style.width:2px;

        obj.style.left:

        obj.style.position:left 2px;       

        

        2、对于含有中横线的CSS属性。将中横线后面的第一个字母换成大写即可

        

例如:

        obj.style.marginTop

        obj.style.borderLeftWidth

        obj.style.zIndex

        obj.style.fontFamily

        

8、事件

HTML4.0的新特性之一是有能力使HTML时间触发浏览器中的动作(action),比如当用户点击HTML元素时启动一段JavaScript。一下是一个属性列表,这些属性可插入HTML标签来定义时间动作

                常用事件
属性说明使用场景
onclick当用户点击某个对象时调用的事件句柄
ondblclick当用户双击某个对象时调用的事件句柄
onfocus元素获得焦点输入框
onblur元素失去焦点应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证
onchange域的内容被改变应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)
onkeydown键盘按键被按下
onkeyup键盘按键被松开
onkeypress键盘按键被按下并松开
onload

等待整个文档全部加载完毕之后,在执行onload里面的代码

onmousedown鼠标按钮被按下
onmousemove鼠标按钮被移动
onmouseout鼠标从某元素移开
onmouseover鼠标移动到某元素之上
onselect在文本框中的文本被选中时发生
onsubmit确认按钮被点击,使用的对象是form
                绑定方式
                        1、方式一

                        

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
    function changeColor(this){
        this.style.backgroundColor="green";
}
</script>



/*

注意:
    this是实参,表示触发事件的当前元素
    函数定义过程中的this为形参

*/
                        2、方式二
<div id="d2">点我</div>
<script>
    var divEle2 = document.getElementById("d2");
    divEle.onclick=function(){
        this.innerText="呵呵";    
    }
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/117875.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

5.3 连接和分离线程

方法 pthread_join(thread, status) pthread_detach(thread) pthread_attr_setdetachstate(attr, detachstate) pthread_attr_getdetachstate(attr) 连接 连接&#xff08;joining&#xff09;是一种线程之间完成同步的方法&#xff0c;举例如下。 pthread_join()方法会阻…

无代码平台哪家好,盘点最新国内十大无代码零代码平台排名

无代码&#xff08;No Code&#xff09;是一种通过使用可视化界面和预构建的模块来创建应用程序、网站或其他数字化解决方案的方法&#xff0c;不需要编写大量的手动代码。 无代码平台通常包括一些基本的构建块&#xff0c;如表单、按钮、文本框等&#xff0c;用户可以通过拖拽…

Android Studio(对话框AlertDialog)

前言 前面介绍了常用控件的相关属性&#xff0c;那些控件的使用起来也很容易。在本节及后面的章节介绍的控件将是相比于前面使用起来较为复杂的&#xff08;不过使用多了&#xff0c;也很容易上手&#xff09;。 这些控件常常需要配合java代码来使用&#xff0c;比如说对话框、…

zookeeper本地部署和集群搭建

zookeeper&#xff08;动物园管理员&#xff09;是一个广泛应用于分布式服务提供协调服务Apache的开源框架 Zookeeper从设计模式角度来理解&#xff1a;是一个基于观察者模式设计的分布式服务管理框架&#xff0c;它 负责存储和管理大家都关心的数据 &#xff0c;然 后 接受观察…

最短路径—Dijkstra算法及 变式题(一个人的旅行)

Dijkstra(迪杰斯特拉)算法是 典型的单源最短路径算法&#xff0c;用于计算一个节点到其他所有节点的最短路径 无向图为以下&#xff08;对称&#xff09; &#xff1a; 算法本质&#xff1a; 第一个最短点 &#xff08;直接与0.源点连接&#xff09; 第二个次短点 &#…

修改docker 版本的mysql 8.0 本机Navicat 连不上的问题

1.进入容器 docker exec -it xxxx bash 2.使用root账号登录mysql mysql -u root -p 3.查看当前加密方式 use mysql; SELECT Host, User, plugin from user; 我这是改过了&#xff0c;应该都是caching_sha2_password 4. 修改加密方式 ALTER USER root% IDENTIFIED WITH m…

性能测试 —— Jmeter 常用三种定时器

1、同步定时器 位置&#xff1a;HTTP请求->定时器->Synchronizing Timer 当需要进行大量用户的并发测试时&#xff0c;为了让用户能真正的同时执行&#xff0c;添加同步定时器&#xff0c;用户阻塞线程&#xff0c;知道线程数达到预先配置的数值&#xff0c;才开始执行…

3、Python基础语法:解释器、标识符、关键字、缩进

文章目录 Python解释器标识符关键字缩进代码示例与运行结果Python是一种高级编程语言,以其简洁明了的语法和强大的功能而受到广泛欢迎。本文将介绍Python的一些基础语法元素,包括解释器、标识符、关键字和缩进,并提供相应的代码示例和运行结果。 Python解释器 Python是一种…

半导体工厂将应用哪些制造创新技术?

半导体工厂是高科技产业的结晶&#xff0c;汇聚了世界上最新的技术。 在半导体的原料硅晶片上绘制设计图纸&#xff0c;不产生误差&#xff0c;准确切割并包装&#xff0c;然后用芯片生产出我们使用的电脑、智能手机、手表等各种电子产品。绝大多数半导体厂都采用一贯的工艺&a…

制造业出海如何乘风破浪?制胜绝招在这里!

目录 问题1: 企业为什么要出海&#xff1f; 问题2: 中国制造业出海企业应具备那些能力&#xff1f; 问题3: 出海应注意哪些事项以保证数据安全&#xff1f; 问题4: 出海企业应怎样做好人才管理&#xff1f; 问题5: 企业如何高质量出海&#xff1f; 国内制造领域各行各业纷…

GitHub黑市曝光,高档刷星6元一颗,最奇葩开源项目97%都是刷的

​梦晨 克雷西 发自 凹非寺 量子位 | 公众号 QbitAI 在黑市买GitHub星星多少钱&#xff1f; 最贵的高达6元一颗。 有创业者Yassin Eldeeeb自掏腰包测试了一把。他足足花20欧元&#xff08;约156人民币&#xff09;&#xff0c;只买到25颗“高级星星”。 没错&#xff0c;在黑…

Redis03-过期策略和淘汰策略

目录 Redis数据过期策略 Redis数据淘汰策略 Redis数据过期策略 Redis使用一种基于过期策略来处理键的过期和自动失效。这种策略可以确保不再需要的数据被自动删除&#xff0c;以释放内存并避免数据过期后仍然在缓存中存留。 Redis的过期删除策略主要有两种&#xff1a; 惰性…

第一章:java类的继承

系列文章目录 文章目录 系列文章目录前言一、继承的基本概念二、继承的细节总结 前言 继承是类的重要特征之一。 一、继承的基本概念 ​​​​​​ 关键字extends&#xff0c;表示Sab类继承了Base类&#xff0c;则Sab为Base的子类&#xff0c;Base为Sab的父类。继承在现实中是…

【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

校验验证码是否过期(定时刷新验证码)

需求&#xff1a; 我们在登录的时候会遇到通过接口请求验证码的操作&#xff0c;这里的验证码会有过期的时间&#xff0c;当我们验证码过期了&#xff0c;我们要进行重新刷新验证码。 我们这里根据后端返回的当前时间和过期时间判断&#xff0c;过期的时间超过了当前时间的时候…

TCP/IP协议群

TCP/IP协议群 什么是TCP/IP协议群 从字面意义上讲&#xff0c;有人可能会认为 TCP/IP 是指 TCP 和 IP 两种协议。实际生活当中有时也确实就是指这两种协议。然而在很多情况下&#xff0c;它只是利用 IP 进行通信时所必须用到的协议群的统称。具体来说&#xff0c;IP 或 ICMP、…

NVM安装与配置(管理node版本)

NVM安装与配置(管理node版本) 一、安装NVM 下载安装 NVM解压后点击exe文件进行安装&#xff1a;点击下一步安装到 D:\NVM 下先在D:\NVM 下创建nodejs文件夹&#xff0c;然后将路径设置如下&#xff1a;点击next 一直点击 完成安装&#xff1b;地方是非得失范德萨范德萨发![在…

共享WiFi贴码真实收益怎样?如何扩大盈利!

随着移动互联网的快速发展&#xff0c;共享WiFi贴码成为了一个备受关注的话题。这一模式的兴起引起了很多人的关注&#xff0c;因为它似乎为一些创业者提供了一种全新的获取收益的模式。然而&#xff0c;共享WiFi贴码的真实收益到底如何呢&#xff1f; 共享WiFi贴码的基本原理是…

【寒武纪(3)】媒体处理系统的系统控制、视频输入和后处理子系统

系统控制 文章目录 系统控制1、配置视频缓存池Video Pool2、配置硬件IP为在线工作&#xff08;不通过DDR数据交互&#xff09;/ 离线工作&#xff08;写入DDR&#xff09;模式3、硬IP可以使用 非Video Block &#xff08;VB&#xff09;内存4、配置是否启动内存传递的压缩 视频…

第二证券:破发的股票还能回升吗?

随着股票商场动摇的加重&#xff0c;许多投资者面临着他们所持有的股票破发的危险。破发是指股票当时价格低于发行价格&#xff0c;这通常是股票被很多出售的成果。关于那些买在高点的投资者而言&#xff0c;这或许是一场噩梦。但是&#xff0c;破发的股票还能上升吗&#xff1…