javascript的BOM和DOM笔记

BOM和DOM编程:

BOM(BOM(browser object model)     浏览器对象模型

DOM(document object model) 文档对象模型

window  === 浏览器

 history      历史记录

 location     路径

screen    屏幕

navigator    浏览器内核信息 

document    文档DOM

1、window.open()    打开新窗口

2、window.close()    关闭当前窗口

3、window.moveTo()     移动当前窗口 (相对于左上角)

4、window.resizeTo()    调整当前窗口的尺寸

5、window.moveBy()     移动当前窗口 (相对于鼠标)

6、window.location         对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面

history      历史记录

1、history.length    当前站点的浏览次数

2、history.back()    返回上一页

3、history.forward()    返回下一页

4、history.go()        -1 表示向后,1表示向前

screen     屏幕

1、screen.width        屏幕宽度

2、screen.height          屏幕高度

3、screen.availWidth        获取除任务栏外系统屏幕的宽

4、screen.availHeight        获取除任务栏外系统屏幕的高

navigator    浏览器内核信息

1、navigator.userAgent       对象包含有关访问者浏览器的信息

location      位置

1、window.location.href     当前url

2、window.location.hostname    主机名称

3、window.location.host     主机名称 + 端口

4、window.location.port     端口

5、window.location.protocol     协议

6、window.location.search    ?后面的值

7、window.location.hash    锚点后面的值




 Javascript中认为document根节点

document节点树

获取DOM对象的方式:

1、通过id直接调取,不推荐,知道就好


2、通过id,使用document对象getElementById方法来获取

innerHTML表示获取msg里面的内容

3、通过class类名称,来获取(返回值是一个列表)


通过下标增加

4、通过标签名称

里面可以加标签

5、通过name属性来获取:(name)属性是表单元素专有的,所以不建议使用

通过name来获取



二、操作DOM对象的内容

1、操作DOM对象的内容有三种方法:innerHTML

获取div里面的所有包括标签

innerText:操作内容的文本

非w3c标准

innerContent:

w3c标准

注意xss和csrf攻击:使用inner时一定要注意使用安全的数据

操作DOM对象的属性:

1、DOM对象.属性         修改新的:DOM对象.属性=新值

2、DOM对象["属性名称"]

3、DOM对象.getAttribute("属性名称");DOM对象.setAttribute("属性名称", "新值");

setAttribute两个值,第一个是要获取的,第二个是可以覆盖第一个的



操作DOM对象的样式:

通过DOM对象.style.样式名称这种方式,获取样式值,只能获取行内样式,无法获取页面或者外联样式

  w3c为大家提供了一个api,用于获取样式

该api存在兼容性,IE9+:console.info(_show.style.width);

针对于IE8及其以下浏览器,MS专门提供了一个api:

console.info(_show.currentStyle.height)


获取宽、高

另一种方法: 因为获取宽高的值进行操作,那么使用之前的方法,获取的值是携带单位的字符串操作时需要先去掉单位,计算完成后,赋值时又需要拼接单位, offsetWidth  offsetHeight 获取的时候是存在边框

获取值时带边框


有边框时,也不获取边框


+

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

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,765评论 0 8
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,118评论 0 21
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,171评论 0 3
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,265评论 0 5
  • 1.iPhone 发展史 iPhone一代(iPhone2G) 2007年发布 3.5英寸,480x320像素 后...
    Sunday_David阅读 132评论 0 0