JavaScript——BOM篇

JavaScript组成部分
1、EMCAScript(基本语法)
2、BOM( Browser Object Model) 浏览器对象模型
浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述,如果我们要操作浏览器的一些属性,我就可以通过浏览器对象模型的对象进行操作。


window对象
window代表了一个新开的窗口

常用方法:
open()——打开一个新的窗口。
resizeTo() ——将窗口的大小更改为指定的宽度和高度值。
moveBy() ——相对于原来的窗口移动指定的x、y值。
moveTo() ——将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
setInterval() ——每经过指定毫秒值后就会执行指定的代码。
clearInterval() ——根据一个任务的ID取消的定时任务。
setTimeout() ——经过指定毫秒值后执行指定的代码一次


注册事件
方式一: 直接在html元素上注册

<body onload="ready()">
function ready(){
                    alert("body的元素被加载完毕了..");   
                }

方式二:可以通过js代码找到对应的对象再注册——推荐使用

var bodyNode = document.getElementById("body");
            
            bodyNode.onload = function(){
                alert("body的元素被加载完毕");  
            } 

常用的事件
鼠标点击相关:
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

鼠标移动相关:
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。

焦点相关的:
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。

其他:
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。


地址栏对象(location)
href ——设置以及获取地址栏的对象
reload() ——刷新当前的页面


screen(屏幕)对象
availHeight——获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。
availWidth ——获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
height——获取屏幕的垂直分辨率。
width——获取屏幕的水平分辨率。


DOM入门
DOM(Document Object Model) 文档对象模型
一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所有标签都会创建一个对应的对象进行描述,我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到对应的对象操作对象的属性,则可以改变浏览器当前显示的内容。

通过html元素的标签属性找节点

document.getElementById("html元素的id") 
document.getElementsByTagName("标签名") 
document.getElementsByName("html元素的name")

通过关系(父子关系、兄弟关系)找节点

parentNode  获取当前元素的父节点。
childNodes  获取当前元素的所有下一级子元素。
firstChild  获取当前节点的第一个子节点。
lastChild  获取当前节点的最后一个子节点。
nextSibling  获取当前节点的下一个节点。(兄节点)
previousSibling  获取当前节点的上一个节点。(弟节点)
        

创建字节入插入节点、设置节点的属性

document.createElement("标签名")  创建新元素节点
elt.setAttribute("属性名", "属性值")  设置属性
elt.appendChild(e)  添加元素到elt中最后的位置
elt.insertBefore(newNode, oldNode)  添加到elt中,child之前。elt必须是oldNode的直接父节点。                               
elt.removeChild(child)  删除指定的子节点。elt必须是child的直接父节点。

正则表达式
正则表达式的创建方式:

方式1:
        /正则表达式/模式
        
方式2:
        new RegExp("正则表达式",模式);

模式:

    g (全文查找出现的所有 pattern)   
    i (忽略大小写)

正则表达式对象常用的方法:

test()  使用正则对象去匹配字符串,如果匹配成功返回ture,否则返回false 
exec()  根据正则表达式去查找字符串符合规则的内容
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,220评论 1 41
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,752评论 0 8
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,236评论 0 5
  • 生活在信息大爆炸的时代,你关注个多少个app,又或许关注了多少微信号,你有统计吗?是否关注了许多许多,多到许久你都...
    星星_8d4c阅读 189评论 0 0