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. nyoj 7 街区最短路径问题 (曼哈顿距离（出租车几何） or 暴力)

    街区最短路径问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 一个街区有很多住户,街区的街道只能为东西.南北两种方向. 住户只可以沿着街道行走. 各个街道之间的间 ...

  2. 06_K-近邻算法

    k-近邻算法 算法介绍 定义: 如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大多数属于某一类别,则该样本也属于这个类别. 计算距离公式:欧式距离 (两点之间距离) 需要做标准化 ...

  3. 控制层传递参数到jsp页面，jsp页面进行接收

    在java代码中,控制层方法如下(采用model,还有其他方式) public String mysave(MyTreeMould myTreeMould, Model model) {...... ...

  4. 领扣（LeetCode）二叉树的中序遍历 个人题解

    给定一个二叉树,返回它的中序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,3,2] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? 递归的思路很简单,不再累 ...

  5. django_4数据库3——admin

    生成admin界面 1.setting.py中,保证'django.contrib.admin',应用打开,django1.11默认打开的 2.url.py中的admin默认时打开的 3.对model ...

  6. Linux网络配置文件

    centos为例: /etc/sysconfig/network文件 用于基本的网络配置信息,包含了控制和网络有关的文件和守护进程的行为参数,包括主机名.网关等 (默认:我的cent0s7在为空,fe ...

  7. python高阶函数的使用

    目录 python高阶函数的使用 1.map 2.reduce 3.filter 4.sorted 5.小结 python高阶函数的使用 1.map Python内建了map()函数,map()函数接 ...

  8. 全栈项目|小书架|微信小程序-登录及token鉴权

    小程序登录 之前也写过微信小程序登录的相关文章: 微信小程序~新版授权用户登录例子 微信小程序-携带Token无感知登录的网络请求方案 微信小程序开通云开发并利用云函数获取Openid 也可以通过官方 ...

  9. 【2018寒假集训Day 1】【位运算】生成字符串

    生成字符串(strs) [问题描述] 假设字符串只由字符“0”,“1”,“”组成,其中字符“”表示该字符可由 字符“0”或“1”替代. 现有一些字符串,根据这些字符串生成所有可生成的字符串.如: {1 ...

  10. 前端开发单位em

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...