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新方法中最 ...
随机推荐
- 我的一个PLSQL存储过程【我】 改版,加入日志表
创建日志表sql: -- Create table create table PROCEDURE_LOG ( ID ) not null, NAME ), CODE NUMBER, MSG ), IN ...
- Flutter设置图片为正方形
AspectRatio( aspectRatio:/, child:Image.network("src") )
- netty5客户端监测服务端断连后重连
服务端挂了或者主动拒绝客户端的连接后,客户端不死心,每15秒重连试试,3次都不行就算了.修改下之前的客户端引导类(NettyClient,参见netty5心跳与业务消息分发实例),新增两个成员变量,在 ...
- Python3实战——爬虫入门
一.安装库 使用conda安装: conda install requests 如果出现解析环境问题,需要激活conda环境: https://www.cnblogs.com/jdemarryme/p ...
- QML按键
1.普通用法 import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls 2.2 ApplicationWindow { ...
- 123457123456#0#-----com.cym.shuXue02--前拼后广--开心学数学
com.cym.shuXue02--前拼后广--开心学数学
- iOS 给view,button,text filed,label等添加边框和颜色
self.tfaaa.layer.borderWidth = 2; self.tfaaa.layer.borderColor = [UIColor blueColor].CGColor;
- 【Leetcode_easy】868. Binary Gap
problem 868. Binary Gap solution1: class Solution { public: int binaryGap(int N) { ; vector<int&g ...
- [CareerCup] 9.8 Represent N Cents 组成N分钱
9.8 Given an infinite number of quarters (25 cents), dimes (10 cents), nickels (5 cents) and pennies ...
- DevOps - DevOps精要 - 落地
1 - 关键问题 如何向不具备相关基础知识的人说明和解释DevOps? 如何在组织和团队中推广和实施DevOps? 2 - 在组织中实施DevOps 在全新的组织或服务开发中,没有既定规则和老旧的习惯 ...