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. 学习Java第一步：安装Intellij IDEA和JDK

    注:其实真正学习一门新语言的第一步并不是安装开发工具,我是C#转JAVA,有一点编程经验了,所以可以直接跳过前面几步,直接上IDE. 1.下载IntelliJ IDEA [官网] http://www ...

  2. MySQL数据库的10大经典错误案例

    学习任何一门技术的同时,其实就是自我修炼的过程.沉下心,尝试去拥抱数据的世界! 案例一 Too many connections (连接数过多,导致连接不上数据库,业务无法正常进行) 问题还原: 解决 ...

  3. nyoj 78-圈水池 (凸包)

    78-圈水池 内存限制:64MB 时间限制:3000ms 特判: No 通过数:5 提交数:6 难度:4 题目描述: 有一个牧场,牧场上有很多个供水装置,现在牧场的主人想要用篱笆把这些供水装置圈起来, ...

  4. 百度全景地图使用时提示flash版本过低 如何处理？

    从Chrome 69.0 版本起,Flash权限受到进一步限制,默认仅在当前浏览器会话有效.关闭Enable Ephemeral Flash Permissions ,才能看到 “Add”按钮.解决方 ...

  5. linux命令指令

    1.ls显示目录内容 -a 显示目录下所有文件 -l 显示详细信息 ls *.c  列出当前目录所有的.c文件 2.uname -a  查看内核版本 3.whoami  查看谁登陆虚拟机 4.cd 切 ...

  6. 0MQ是会阻塞的，不要字面上看到队列就等同非阻塞。

    如果你是希望通过0MQ来做缓冲队列,非阻塞的效果,那你就必须清楚 0MQ Socket是会阻塞,你要搞清楚0MQ Socket与队列的关系. 官方协议文档规定了,一部分类型的 0MQ Socket为不 ...

  7. router-link传递参数

    有个功能: 依据传入值,跳到产品详情页,但是详情页的内容依据传入值来相应变化. 如果使用点击事件@clic来实现,则有三个重复的跳转代码. 避免多次定义重复函数,可以使用router-link 传参数 ...

  8. 堆 堆排序 优先队列 图文详解（Golang实现）

    引入 在实际应用中,我们经常需要从一组对象中查找最大值或最小值.当然我们可以每次都先排序,然后再进行查找,但是这种做法效率很低.哪么有没有一种特殊的数据结构,可以高效率的实现我们的需求呢,答案就是堆( ...

  9. Magicodes.IE之导入学生数据教程

    基础教程之导入学生数据 说明 本教程主要说明如果使用Magicodes.IE.Excel完成学生数据的Excel导入. 要点 本教程使用Magicodes.IE.Excel来完成Excel数据导入 需 ...

  10. 记一次uboot中gunzip解压速度慢的问题排查

    背景 在项目中需要用到解压功能,之前还记录了下,将uboot解压代码移植到另外的bootloader中时,碰到的效率问题.最终查明是cache的配置导致的. https://www.cnblogs.c ...