DOM知识点

DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网页的地图(或者说模型),而我们可以通过js去读取这张地图。
作者:一只斗牛犬
链接:http://www.imooc.com/article/36780
来源:慕课网

1、改变页面的元素和属性

a、获取元素的方法:

document.getElementById()

document.getElementsByTagName()

document.getElementsByClassName()

b、js输出HTML内容

document.write();

c、获取和修改元素的内容:

document.getElementById(id).innerHTML

document.getElementById(id).innerHTML=new HTML;

d、获取和修改元素的属性值:

document.getElementById(id).attribute

document.getElementById(id).attribute=new value;

e、添加html标签:

document.

f、添加html文本内容:

document.createTextNode

g、追加元素:

document.();

h、从父元素中删除子元素:

parent.removeChild(child)

2、改变页面元素的样式

a、修改css样式:

document.getElementById(id).style.property

document.getElementById(id).style.property=new style;

3、对页面元素事件的监听和处理

常用的事件:

onblur:当窗口失去焦点时运行脚本

onfocus:当窗口获得焦点时运行脚本

onchange:当元素改变时运行脚本

onsubmit:当提交表单时运行脚本

onkeydown:当按下按键时运行脚本

onkeypress:当按下并松开按键时运行脚本

onkeyup:当松开按键时运行脚本

onclick:当单击鼠标时运行脚本

ondblclick:当双击鼠标时运行脚本

onmousedown:当按下鼠标按钮时运行脚本

onmousemove:当鼠标指针移动时运行脚本

onmouseout:当鼠标指针移出元素时运行脚本

onmouseover:当鼠标指针移至元素之上时运行脚本

onmouseup:当松开鼠标按钮时运行脚本

onabort:当发生中止事件时运行脚本

DOM基本操作思维导图:

BOM知识点

BOM 主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括:

弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口大小
提供 Web 浏览器详细信息的定位对象
提供用户屏幕分辨率详细信息的屏幕对象
对 cookie 的支持
IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX 对象

作者:一只斗牛犬
链接:http://www.imooc.com/article/36780
来源:慕课网

a、窗口

window.open():打开新窗口

window.close():关闭当前窗口

window.moveTo():移动当前窗口

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

b、窗口的内部高度和宽度

标准浏览器:

window.innerHeight

window.innerWidth

对于 Internet Explorer 8、7、6、5:

document.documentElement.clientHeight 或者 document.body.clientHeight

document.documentElement.clientWidth 或者 document.body.clientWidth

c、屏幕对象

screen.availWidth:可用的屏幕宽度

screen.availHeight:可用的屏幕高度

d、地址栏对象

location.hostname:web 主机的域名

location.pathname:当前页面的路径和文件名

location.port:主机的端口 (80 或 443)

location.protocol:所使用的 web 协议

history.back():与在浏览器点击后退按钮相同

history.forward():与在浏览器中点击按钮向前相同

e、浏览器自带的信息

navigator.appVersion:浏览器版本

navigator.platform:浏览器平台

navigator.userAgent:浏览器User-agent header

f、计时器相关的

setInterval()和clearInterval 间隔几秒循环执行/清除定时器

setTimeout 和 clearTimeout() 间隔几秒执行(单次)/清除定时器


JS DOM与BOM的更多相关文章

  1. JS(DOM 和 BOM)

    JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...

  2. JS ——DOM,BOM(包含盒模型,动画)总结

    JS盒模型 content: 通过计算后样式获取padding + content: box.clientWidth | box.clientHeightborder + padding + cont ...

  3. day 52 js学习 DOM 和BOM

    前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  4. JS DOM(文档对象模型)与BOM(浏览器对象模型)

    在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...

  5. 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM

    JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...

  6. 理清javascript的相关概念 DOM和BOM

    javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异.JavaScript=语法+BOM(含DOM) ...

  7. JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)

    本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param ...

  8. 前端基础之DOM和BOM

    前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...

  9. Javascript的组成——EMACScript、DOM、BOM

    EMACScript:一种规范,JS必须准守它的约定,JS的核心. DOM:文档对象模型,W3C标准,JS访问HTML文档的接口. BOM:浏览器对象模型,没有统一的标准.JS访问浏览器的接口. EM ...

随机推荐

  1. 二, 字符串和编码之 python 格式化

    1),在Python中,采用的格式化方式和C语言是一致的,用%实现,看下例: >>> 'Hello, %s' % 'world' 'Hello, world' >>> ...

  2. android app 的插件化、组件化、模块化开发-2

    Android 插件化 ——指将一个程序划分为不同的部分,比如一般 App的皮肤样式就可以看成一个插件 Android 组件化 ——这个概念实际跟上面相差不那么明显,组件和插件较大的区别就是:组件是指 ...

  3. python 集合去重

    data = set() data.clear() data.add('qq1') data.add('qq2') data.add('qq3') data.add('qq4') data.add(' ...

  4. MongoD 语法

    MongoD 语法 1.常用 1 .查看有哪些库 > show dbs; admin 0.000GB config 0.000GB local 0.000GB 2 .当前库,只存在于内存中 &g ...

  5. PHP7.* AES的加密解密

    之前写过一篇: PHP AES的加密解密-----[弃用] 使用的是php5.*之前的mcrypt_decrypt 函数,该函数已经在php7.1后弃用了,上马的是openssl的openssl_en ...

  6. 通过iis访问电脑文件

    新公司没有开发环境,移动端项目,需要自己在手机上先进行查看效果,提供了一个方法iis,之前有听过,但是一直没有用过,今天来记录一下这个配置过程: 环境:win10 1.安装iis 控制面板——程序—— ...

  7. python--random库基本介绍

    random库是使用随机数的Python标准库 python中用于生成伪随机数的函数库是random 因为是标准库,使用时候只需要import random random库包含两类函数,常用的共9个 ...

  8. Hadoop HDFS安装、环境配置

    hadoop安装 进入Xftp将hadoop-2.7.3.tar.gz 复制到自己的虚拟机系统下的放软件的地方,我的是/soft/software 在虚拟机系统装软件文件里,进行解压缩并重命名 进入p ...

  9. BlockChain:Py实现区块链简单场景应用:程序猿记录在区块里的收入记录图——Jason niu

    # -*- coding: utf-8 -*- ''' Created on 2018年3月11日 @author: Jason niu ''' import hashlib #该模块实现了诸多安全哈 ...

  10. 利用Github免费搭建个人主页(转)

    搭建过程涉及: Github注册 Github搭建博客 域名选购 绑定域名 更多 一.  Github注册 在地址栏输入地址:http://github.com/join填写相关信息, 按步骤完成即可 ...