BOM

  • Browser Object Model 浏览器对象模型

window对象

  • window.innerHeight 获取窗口高度
  • window.innerWidth 获取窗口宽度
  • window.open() 打开新窗口
  • window.close() 关闭当前窗口
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    window.open("https://www.baidu.com")

    window.close()

</script>

</body>

</html>

window子对象

location

  • location.href 获取URL
  • location.href="URL" 跳转带指定页面
  • location.reload() 重新加载页面

弹出框

  • alert("警告框")
  • confirm("确认框")
  • prompt("提示框")

计时

  • var t = setTimeout(func, time) 定时执行任务

    • clearTimeout(t) 清除计时对象
function func() {

	alert("hahaha")

};

function show() {

	var t = setTimeout(func, 3000)  // 创建计时器对象并执行

	function inner() {

		clearTimeout(t)  // 清除计时器对象

    }

	setTimeout(inner, 9000)

};
  • var i = setInterval(func, time) 循环执行任务

    • clearInterval(i) 清除循环对象
function func() {

	alert()

function show("这是一个警告弹窗") {

	var i = setInterval(func, 3000)

    function inner() {

        clearInterval(i)

    }

	setTimeout(inner, 9000)

}

show()

history

  • history.forward() 前进一页
  • history.back() 后退一页

navigator

  • navigator.userAgent 客户端的大部分信息

  • navigator.appName 浏览器全称

  • navigator.appVersion 浏览器厂商和版本

  • navigator.platform 运行浏览器的操作系统

DOM

  • Document Object Model 文档对象模型
  • 规定HTML文档中的每个成分都是一个节点 (node)
  • JS可以通过DOM创建动态的HTML

查找节点

直接查找

  • 标签名 document.getElemenByTagName()

    • 返回的一个数组 []
  • 类名 document.GetELementByClassName()
    • 返回的是一个数组[]
  • id document.GetElementById()
    • 返回的是节点本身

间接查找

  • 查找父标签 子标签对象.parentElement
  • 查找子标签 父标签对象.chidren
  • 第一个子标签 父标签对象.firstElementChild
  • 最后一个子标签 父标签对象.lastElementChild
  • 下一个兄弟标签 标签对象.nextElementSibling
  • 上一个兄弟标签 标签对象.previousElementSibling

节点操作

创建节点

  • 创建节点: var divEle = document.creatElement("div")

添加节点

  • 追加节点: parentEle.appendChild(childELe)
  • 插入节点: parentEle.insertBefore(newELe, someELe)

删除节点

  • parentEle.removeChild(chileELe)

替换节点

  • parentELe.replaceChid(childEle)

属性节点

  • 获取文本节点的值

    • divEle.innerText 文本内容
    • divEle.innerHTML HTML代码

  • 添加/替换文本

    • divEle.innerText="文本内容"
    • divEle.innerHTMl="html代码"

  • 节点属性操作

    • divEle.setAttribute(name, value)
    • divEle.getAttribute(name)
    • divELe.removeAttribute(name)

获取用户输入

  • 获取用户输入内容 (input, select, textarea)

    • iEle.value
    • 多选不适用
    • 上传文件不适用 (iEle.file[0])

操作标签class属性

  • 查看类属性

    • divEle.classList
    • divEle.className
  • 删除类 divEle.classLIst.remove()
  • 添加类属性 divELe.classlist.add()
  • 判断是否有某个类 divEle.classList.contains()
  • 有就删除, 没有就添加 divELe.classList.toggle()

操作标签样式

  • pEle.style.样式名

事件

  • 当符合某个条件, 自动触发的动作和响应

常用事件

  • onclick 点击
  • ondbclick 双击
  • onfocus 获得焦点
  • onblur 失去焦点
  • onkeydown 某个按键被按下

绑定事件

  • 直接在标签内部
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="d1" onclick="changeColor(this)">click me</div>

    <script>

        function changeColor(ths) {

            ths.style.backgroundColor="green"

        }

    </script>

</body>

</html>
  • 通过 <script> 标签内js代码绑定
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="d1">click me</div>

    <script>

        divEle1 = document.getElementById("d1");

        divEle1.onclick=function () {

            this.style.backgroundColor="green";

        }

    </script>

</body>

</html>

BOM和DOM操作的更多相关文章

  1. 前端javascript之BOM、DOM操作、事件

    BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...

  2. JS中的函数、BOM和DOM操作

     一.JS中的函数 [关于注释] /** [文档注释]:开头两个*.写在函数上方,在调用函数时可以看到文档上方的描述信息. */   // 单行注释 /* 多行注释 */ 1.函数的声明及调用 (1) ...

  3. JavaScript的BOM、DOM操作、节点以及表格（二）

    BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型.     BOM提供了独立于内容 而与浏览器窗口进行交互的对象:     BOM由一系列相关的对象构成 ...

  4. 前端基础之BOM和DOM操作

    目录 BOM和DOM定义 windows对象 windows的子对象 navigator对象 screen对象 history对象 location对象 弹出框 警告框 确认框 提示框 计时相关 se ...

  5. 前端基础之BOM与DOM操作

    目录 BOM操作 navigator对象 screen对象 history对象 localtion对象 弹出框 计时 setTimeout() clearTimeout() setInterval() ...

  6. js运算符、 流程控制 、函数、内置对象、BOM与DOM操作

    运算符 # 1.算术运算符 var x=10; var res1=x++; '先赋值后自增1' var res2=++x; '先自增1后赋值' # 2.比较运算符 弱等于:自动转换类型 '5' == ...

  7. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

  8. 前端js之BOM和DOM操作

    目录 引入 BOM操作 window对象 history对象 location对象(重点) 弹出框 定时器 计时器相关 DOM 查找标签 直接查找 间接查找 节点操作 创建节点及添加节点 删除节点 替 ...

  9. BOM与DOM操作

    BOM: OM-JavaScript是运行在浏览器中的,所以提供了一系列对象用于和浏览器窗口进行交互,这些对象主要包括window.document.location.navigator和screen ...

随机推荐

  1. 移动端自动化测试Appium环境搭建（part1-2-3）

    Appium移动端自动化测试相信大家都不陌生,appium的铁哥们是selenium,不管是selenium还是appium,都是调用webdriver来做自动化测试.今天关于appium的介绍我们不 ...

  2. ACE框架 基于共享内存的分配器 （算法设计）

    继承上一篇<ACE框架 基于共享内存的分配器设计>,本篇分析算法部分的设计. ACE_Malloc_T模板定义了这样一个分配器组件 分配器组件聚合了三个功能组件:同步组件ACE_LOCK, ...

  3. 性能测试——记XX银行保全项目性能问题分析优化

    记XX银行保全项目性能问题分析优化 数据库问题也许是大部分性能问题的关注点,但是JAVA应用与数据库交互的关节,JDBC 就像是我们人体的上半身跟下半身的腰椎,支持上半身,协调下半身运动的重要支撑点. ...

  4. 2019-11-24:postgresql数据库安装，最后报错failed to load SQLModule 问题的解决方案

    安装环境:Windows 10 问题描述:Failed to load sql modules into the database cluster 原因在于 Postgresql 没有安装完全. 解决 ...

  5. STM32F103C8T6 在VSCode下使用Platform IO开发，基于库函数V3.5版本

    首先安装Platform IO插件,怎么安装的教程有很多,可以自行百度,就不在重复了. 本篇文章将会以正点原子的跑马灯例程作为移植对象,基于ST固件库3.5版本 将实现在VSCode上的程序编写与烧录 ...

  6. Django3.0 异步通信初体验

    此前博主曾经写过一篇博文,介绍了Django3.0的新特性,其中最主要的就是加入对ASGI的支持,实现全双工的异步通信. 2019年12月2日,Django终于正式发布了3.0版本.怀着无比的期待,我 ...

  7. Prometheus PromQL 简单用法

    目录 说明 CPU 内存 磁盘监控 磁盘空间利用率百分比 预计饱和 说明 基于上一篇文章的基础,这里做一些关于 CPU.内存.磁盘的一些基础查询语句. CPU 通过查询 metric值为 node_c ...

  8. int main (int argc, const char * argv[0]) 中参数的含义；指针数组和数组指针

    恩,有的编译器初始化时候会产生这样的参数 argc是命令行总的参数个数,argv[]是argc个参数,其中第0个参数是程序的全名 1. 几种C++ 常见的参数种类 int main(void); in ...

  9. LNMP架构源码搭建（centos7）

    第一步:安装nginx 1.上传或下载nginx,并解压 yum -y install lrzsz rz .tar.gz 2.搭建nginx安装环境 yum -y install gcc-c++ zl ...

  10. MQTT版本升级过程及源码解析

    MQTT版本升级过程及源码解析 首先说一下为什么要写这篇文章呢,在我发现网上对MQTT的文章介绍实在太少了,可能也是使用这个的频率比较低吧!还有对问题的定位以及解决的方式和办法也太少了,所以特意写这篇 ...