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 获取的时候是存在边框

获取值时带边框


有边框时,也不获取边框


+

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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