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. Opencv的线性滤波和非线性滤波

    线性滤波 :方框滤波   均值滤波  高斯滤波 非线性滤波: 中值滤波  双边滤波 这几个滤波都是起模糊作用 去除噪点 不废话了 下面是代码 #include <opencv2/opencv.h ...

  2. 2019-9-28：渗透测试，phpstudy后门,利用复现

    9月20号爆出Phpstudy存在隐藏后门,简单复现下后门效果 该文章仅供学习,利用方法来自网络文章,仅供参考 目标机:win7系统,安装phpstudy 2018版,php版本5.2或php 5.4 ...

  3. linuxLVM

    一.概念性的东西 LVM2:Logical Volume Manager ,Cersion 2 LVM,依赖于内核的dm模块(将一个或多个底层的设备组织成一个逻辑设备的模块).可以将多个物理分区通过软 ...

  4. linuxRAID（软）

    RAID是一种存储机制,英文全名为“RedundantArrays of Inexpensive Disks”,即容错廉价磁盘阵列.RAID可以通过一些技术(硬件或者软件)将多个磁盘整合起来,不仅是一 ...

  5. python常见字符串操作

    附: python2.x和python3.x中raw_input( )和input( )区别: 备注:1.在python2.x中raw_input( )和input( ),两个函数都存在,其中区别为r ...

  6. 数据表与简单java类——多对多映射

    给定一张Meber和Product表,得到如下信息: 1.获取一个用户访问的所有商品信息 2.获取一个商品被哪些用户浏览过的信息 package Mapping_transformation; cla ...

  7. LAMP架构介绍、MySQL、MariaDB介绍、MySQL安装

    5月23日任务 课程内容: 11.1 LAMP架构介绍11.2 MySQL.MariaDB介绍11.3/11.4/11.5 MySQL安装扩展mysql5.5源码编译安装 http://www.ami ...

  8. C语言l博客作业05

    问题 回答 这个作业属于哪个课程 C语言程序设计ll 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/SE2019-2/homework/9830 我在这 ...

  9. 工作中的开发过程（Javaweb路线，写给刚刚实习或者马上就要工作的朋友）

    工作中的开发过程(Javaweb路线,写给刚刚实习或者马上就要工作的朋友) 当我还没开始工作的时候,我是对实际项目开发流程充满未知和向往的,当时很希望能够有一个过来人,给我介绍一下实际工作起来是什么样 ...

  10. IDEA启动tomcat报java.net.SocketExceptionsocket closed

    IDEA启动tomcat报java.net.SocketException:socket closed.如图所示   解决方法:打开任务管理器,检查有没有java.exe进程. 关闭了重新启动就好了 ...