js中的BOM和DOM常用事件方法
笔记:
window对象
● window.innerHeight - 浏览器窗口的内部高度
● window.innerWidth - 浏览器窗口的内部宽度
● window.open() - 打开新窗口
● window.close() - 关闭当前窗口
navigator对象
navigator.appName // web浏览器全称
navigator.appVersion // web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
screen对象
screen.availWiddth // 可用的屏幕宽度
screen.avaliWidth // 可用的屏幕高度
history对象
window.history对象包含浏览器历史
history.forward() //前进一页
history.back() // 后退一页
location对象
window.location 对象用于获取当前页面的地址URL,并把浏览器重新定向到新的页面。
location.herf // 获取URl
location.herf="URL" // 跳转到指定页面
location.reload() // 重新加载页面
计时相关:
setTimeout() // var t = setTimeout("js语句",毫秒)
clearTimeout() // clearTimeout(setTimeout_variable)
setInterval()
clearInterval() DOM
查找标签:
直接查找
document.getElementById // 根据Id获取一个标签
document.getElementByClassName // 根据class属性获取
document.getElementByTagName // 根据标签名称获取标签合集
间接查找
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子元素元素
nextElementSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
节点操作:
创建节点:document.createElement(“标签名”)
添加节点:追加一个子节点(作为最后的子节点)somenode.appendChild(newnode)
把新增的节点放到某个节点的前边:somenode.insertBefore(newnode,某个节点)
删除节点:获取要删除的元素,通过父元素调用该方法删除
somenode.removeChild("要删除的节点")
替换节点:some.node.replateChild(newnode,某个节点)
属性节点:
innerText
innerHTML
setAttribute getAttribute removeAttribute
自带属性可以直接.属性名获取和设置
获取值操作:
elementNode.value 适用于 input select textarea
calss的操作:
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true,否则返回false
calssList.toggle(cls) 存在就删除,否则添加
指定css操作:
obj.style.
对于没有中划线的css属性一般直接使用style.属性名即可
对于有中划线的css属性一般将中划线后的第一个字母换成大写 事件:
HTML中的事件出发浏览器的action
onclick // 点击
ondblclick // 双击
onfocus // 获得焦点
onblur // 失去焦点
onchange // 域的内容被改变
onkeydown // 键盘按键被按下
onkeypress // 键盘按键被按下并且松开
onkeyup // 键盘按键被松开
onload // 完成加载
onmousedown // 鼠标按下
onmousemove // 鼠标被移动
onmouseout // 鼠标从某元素移开
onmouseover // 鼠标在某元素之上
onselect // 文本框中的元素被选中
onsubmit // 确认按钮被点击
js中的BOM和DOM常用事件方法的更多相关文章
- 细看JS中的BOM、DOM对象
DOM对象模型 DOM(Document Object Model),是指文档对象模型,是W3C组织推荐的处理可扩展标志语言的 ...
- js中关于string的一些常用的方法
最近总结了一些关于string中的常用方法, 其中大部分的方法来自于<JavaScript框架设计>这本书, 如果有更好的方法,或者有关于string的别的常用的方法,希望大家不吝赐教. ...
- JS中的call、apply、bind方法
JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]] ...
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- [转]js中几种实用的跨域方法原理详解
转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...
- JavaScript中易混淆的DOM属性及方法对比
JavaScript中易混淆的DOM属性及方法对比 ParentNode.children VS Node.prototype.childNodes ParentNode.children:该属性继承 ...
- JavaScript -- 时光流逝(四):js中的 Math 对象的属性和方法
JavaScript -- 知识点回顾篇(四):js中的 Math 对象的属性和方法 1. Math 对象的属性 (1) E :返回算术常量 e,即自然对数的底数(约等于2.718). (2) LN2 ...
- node.js中实现同步操作的3种实现方法
这篇文章主要介绍了node.js中实现同步操作的3种实现方法,本文用实例讲解一些需要同步操作的情况下,如何编程实现,需要的朋友可以参考下 众所周知,异步是得天独厚的特点和优势,但同时在程序中同步的需求 ...
- JS中的forEach、$.each、map方法推荐
下面小编就为大家带来一篇JS中的forEach.$.each.map方法推荐.小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 orEach是ECMA5中Array新方法中最 ...
随机推荐
- MyBatis原理总结(前期准备)
1.不同框架解决不用问题,框架封装了很多细节,开发者可以使用简单的方式实现功能. 2.三层架构: 1.表现层 2.业务层 3.持久层 都有相应的处理框架. 3.持久层的技术解决方案: JDBC技 ...
- c# list 使用Where()方法过滤数据
//根据任务id过滤数据 Func<RfidCodeResultDto, bool> expression = c => c.lineTaskId == _lineTaskId; r ...
- Win10+Ubuntu18.04安装双系统
一:相关资料 (一)Win10+Ubuntu18.04 亲测UEFI启动模式双硬盘+双系统成功安装经验(文章) (二)如何安装Linux与windows双系统?(视频) 推荐先看视频,之后按照文章进行 ...
- css代码陷阱
1.选择器优先级 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 【Anaconda】关于conda使用环境未被激活的问题
前言 在win10系统中安装Anaconda,并创建虚拟环境,但是不明白为什么切换环境之后并未激活要使用的虚拟环境. conda常用命令 activate // 切换到base环境 activate ...
- npm 安装 -D 和-S的区别
-D 是在开发环境中协助开发需要使用的-S是生产环境打包时需要的,在package.json中 -D在devDependencies对象中,-S在dependencies对象中
- Python3 IO编程之操作文件和目录
如果我们要操作文件,目录,可以在命令行下面输入操作系统提供的各种命令来完成.比如ls,cp等命令 如果要在python程序中执行这些目录和文件的操作怎么办?其实操作系统提供的命令指示简单地调用了操作系 ...
- social engineering toolkit
1. freebuf介绍 http://www.freebuf.com/sectool/73409.html 2. github https://github.com/trustedsec/socia ...
- [SVN] - 使用 TortoiseSVN 进行文件比对非常慢 之 解决
背景 Windows 10 + TortoiseSVN-v1.9.7使用默认的 TortoiseMerge 进行文件比对,打开速度非常非常慢. 解决 禁用 TortoiseMerge / Settin ...
- 记一次SQL优化
常见的SQL优化 一.查询优化 1.避免全表扫描 模糊查询前后加%也属于全表扫描 在where子句中对字段进行表达式操作会导致引擎放弃使用索引而进行全表扫描,如: select id from t w ...