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. Django 基本使用

    Django 基本使用 Django 安装 pip install django Django 创建项目 django-admin startproject 项目名称 Django 创建应用 pyth ...

  2. lqb 基础练习 特殊回文数

    基础练习 特殊回文数 时间限制:1.0s   内存限制:512.0MB     问题描述 123321是一个非常特殊的数,它从左边读和从右边读是一样的. 输入一个正整数n, 编程求所有这样的五位和六位 ...

  3. nyoj 32-组合数(next_permutation, stack, set)

    32-组合数 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:8 submit:11 题目描述: 找出从自然数1.2.... .n(0<n< ...

  4. FPGA基础（verilog语言）——语法篇

    verilog语言简介 verilog语言是一种语法类似于c的语言,但是与c语言也有不同之处,比如: 1.verilog语言是并行的,每个always块都是同时执行,而c语言是顺序执行的 2.veri ...

  5. Web Scraper 翻页——利用 Link 选择器翻页 | 简易数据分析 14

    这是简易数据分析系列的第 14 篇文章. 今天我们还来聊聊 Web Scraper 翻页的技巧. 这次的更新是受一位读者启发的,他当时想用 Web scraper 爬取一个分页器分页的网页,却发现我之 ...

  6. 【搞定面试官】你还在用Executors来创建线程池？会有什么问题呢？

    前言 上文我们介绍了JDK中的线程池框架Executor.我们知道,只要需要创建线程的情况下,即使是在单线程模式下,我们也要尽量使用Executor.即: ExecutorService fixedT ...

  7. Maven安装目录分析

    maven目录结构介绍 bin: 包含了mvn运行的脚本(既在cmd输入命令执行依赖,在命令行输入任何一条mvn命令时,实际上就是在调用这些脚本) boot: 该目录只包含一个文件,是一个类加载器,m ...

  8. 【RN - 基础】之View使用简介

    简介 View是一个容器,支持FlexBox布局. View既可以作为容器容纳其他组件,也可以作为一个组件包含进另一个容器中. 无论运行在哪个平台上,View都会直接对应这个平台的原生视图,如iOS中 ...

  9. 使用 colgroup 和 col 实现响应式表格

    Table 在项目使用中十分频繁,特别是在后台管理系统中,table 无疑是数据展示的第一公民,在早些年的网页中,table 也是网页布局的第一选择,然后使用好 table 并不容易,其它有很多子元素 ...

  10. Spring Boot2 系列教程(三十)Spring Boot 整合 Ehcache

    用惯了 Redis ,很多人已经忘记了还有另一个缓存方案 Ehcache ,是的,在 Redis 一统江湖的时代,Ehcache 渐渐有点没落了,不过,我们还是有必要了解下 Ehcache ,在有的场 ...