BOM、DOM学习笔记——JavaScript
1.BOM的概述
browser object modal :浏览器对象模型。
浏览器对象：window对象。
Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
2. window的属性
innerHeight:
innerWidth: IE不支持
通用写法：document.body.clientWidth
document.body.clientHeight
self :等同于window对象
parent：是打开窗口的父窗口对象
opener：是打开窗口的父窗口对象。
2种情况下使用opener:
1.使用winodw.open()方法打开的页面
2.超链（里面的target属性要设置成_blank）
2种情况下使用parent:
1.iframe 框架
2.frame 框架
frames[]: 数组类型，代表子窗口的window对象的集合,可以通过frames[索引]拿到子窗口的window对象。
示例：父子窗口相互传参.
open方法，是打开一个页面.
对话框：
1)消息框 alert() ;
2)确认框 confirm() ;
3)输入框 prompt() ; (了解)
定时器：
setTimeout ,setInterval
定时器： 1.setTimeout() :只会调用1次
2.setInterval() ：每隔一段时间调用1次
3. history对象
a. forward()前进
b. back() 后退
c. go(n) 正数是前进，负数是后退.
4. location对象。
1.href 属性： 是指要连接到其他的URL
写法一、window.location.href='demo_window对象的close方法.html' ；
写法二、window.location='demo_window对象的close方法.html' ；
2.reload方法: 刷新
写法： window.location.reload() ；
5.常用事件
鼠标移动事件
onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定
onmouseover : 鼠标悬停事件
onmouseout : 鼠标移出事件
鼠标点击事件
onclick
加载与卸载事件
onload ,onunload
聚焦与离焦事件
onfocus, onblur
键盘事件
onkeypress,onkeyup,onkeydown
提交与重置事件
onsubmit,onreset
选择与改变事件
/***************************************************************************/
一.BOM回顾
* BOM 概述
* BOM 的各个对象
* window对象
innerHeight，innerWidth
document.body.clientWidth,document.body.clientHeight,
self
opener :超链和window.open()
parent : iframe和frame
frames[]:
三种对话框： alert(),prompt(),confirm()
定时器： setTimeout(),setInterval()
模态窗口： showModalDialog() ,showModelessDialog()
* History对象
forward() ,back(),go()
* Location对象.
二、内容
* 事件（掌握，明白每个事件发生的时机）
鼠标移动事件
* onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定
* onmouseover : 鼠标悬停事件
鼠标悬停事件： 当鼠标移动到某个控件上面的时候发生
this: 把this写在那个标签里面就代表那个标签对象
this.style.backgroundColor : 当调用样式表中的属性的时候，如果属性中间有横杠，则应去掉.
示例： 当鼠标移动到p标签上的时候，p标签改变样式
鼠标移开事件： 当鼠标从控件上移开的时候
* 鼠标点击事件
onclick : 当鼠标单击某个控件时发生
示例： 当单击按钮时，在<p>中显示字符串 "冠希哥来了"
* 加载与卸载事件
onload ,onunload
加载事件(onload) : 在整个页面的元素加载完毕之后发生
卸载事件(onunload) : 是在页面关闭时发生
注意： onload和onunload事件必须写在body或者图片标签里面
* 聚焦与离焦事件
onfocus, onblur
聚焦事件：是在控件获得焦点的时候发生
离焦事件：是在控件失去焦点的时候发生
示例： 文本框获得焦点的时候改变样式，失去焦点时变回原样
* 键盘事件
onkeypress,onkeyup,onkeydown
onkeypress: 按下键盘按键并松开
onkeydown : 按下按键发生
onkeyup: 松开按键
* 提交与重置事件
onsubmit,onreset
提交事件： 是在点击提交按钮后发生。(必须写在form表单中)
重置事件： 是在点重置交按钮后发生。
示例： 提交表单中的数据(检查):如果是陈冠希：通过，否则不能提交数据
* 选择与改变事件
onselect:
onchange:
onselect: 只能用于输入框. 当选择输入框中的文本时发生
onchange: 用于select和文本框.
对于下拉框是在选项发生变化的时候发生
对于文本框是在文本框的内容发生变化并且失去焦点时发生
示例： 当选择文本框的内容时，弹出文本框的内容
下拉框的selectedIndex属性：代表选中某项的索引
DOM技术
1.Dom概述？
* 什么是DOM？ docuemnt object model 文档对象模型
* 它的作用？ 重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目
* 分类？
Core DOM : 定义了一套标准的针对任何结构化文档的对象
XML DOM : 定义了一套标准的针对 XML 文档的对象
HTML DOM : 定义了一套标准的针对 HTML 文档的对象。
*.xml介绍？
expensible markup language : 可扩展标记语言.
<penson>
<name>张无忌</name>
<age>23</age>
</person>
2.DOM树
* 结点 : 文档中的每个成分都是一个节点.(包括文本也是节点)
*.结点的属性
a. nodeName（节点名称）
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
b. nodeValue（节点值）
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
c. nodeType（节点类型） : nodeType 属性可返回节点的类型。
标签节点的类型值是 1
属性节点的类型值是 2
文本节点的类型值是 3
*. 结点的分类
整个文档是一个文档节点
每个 XML 标签是一个元素节点
包含在 XML 元素中的文本是文本节点
每一个 XML 属性是一个属性节点
注释属于注释节点
*.结点的关系
只有父子和兄弟关系
parentNode : 父节点
childNodes ：所有的子标签
firstChild ：第一个儿子
lastChild ：最后一个儿子
nextSibling ：下一个兄弟节点
previousSibling ： 上一个兄弟节点
*. 对结点进行CRUD操作
*.查找结点？
两种方式： a. 采用节点之间的关系去拿 根节点： document.documentElement ;
b. 采用方法去拿
getElementById() : 根据标签的ID拿到此标签节点
getElementsByTagName() : 根据标签的名字拿到此标签节点数组
getElementsByName(): 适用于表单控件。根据标签的name属性值拿到控件的数组。
以上示例参看:示例二. demo09_演示DOM节点属性并获取节点的方法.html;
示例二。demo10_示例一获取h1标签内容.html
*.删除结点？
removeChild() : 采用父节点删除子节点
参见示例（）
*创建节点：
document.createElement() : 创建一个标签节点
参见 demo15_表格添加行.html
docuemnt.createTextNode("内容") ：创建一个文本节点
参见 demo14_添加节点.html
节点的setAttribute() :添加属性节点
参见 demo14_添加节点.html
*.添加结点？
appendChild() : 添加子节点
参见 demo14_添加节点.html
参见 demo15_表格添加行.html
*.修改或替换结点？
replaceNode(): 替换节点(适用于IE)
replaceChild() : 替换子节点
参见demo13_节点的替换.html
在javascript中想调用html代码： 只能通过属性innerHTML
在javascript中想调用CSS代码： 只能通过属性clasName可以调用样式表
.style.属性
BOM、DOM学习笔记——JavaScript的更多相关文章
- 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
学习笔记---Javascript事件Event.IE浏览器下的拖拽效果 1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...
- HTML 学习笔记 JavaScript (DOM)
一 DOM 简介 通过HTML DOM 可以访问JavaScript 文档的所有元素 当网页被加载的时候,浏览器会创建页面的文档对象模型 HTML DOM 模型被构造成对象的树 HTML DOM 树 ...
- HTML 学习笔记 JavaScript（面向对象）
现在让我们继续跟着大神的脚步前进 学习一下JavaScript中的面向对象的思想,其实作为一个iOS开发者,对面向对象还是比较熟悉的,但是昨晚看了一下Js中的面向对象,妈蛋 一脸萌比啊.还好有大神.让 ...
- j2ee学习笔记 javascript 学习
JavaScript 组成: ECMAScript + BOM + DOM Window对象是JS中的顶层对象 ECMAScript: 规定了一些语法,变量,for循环等等结构 BOM: Browse ...
- [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡
当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...
- js学习笔记----JavaScript中DOM扩展的那些事
什么都不说,先上总结的图~ Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...
- [学习笔记]JavaScript基础
JavaScript概述 1. JavaScript定义 JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言.它是弱类型语言.仅仅能由浏览器解释运行. 当中: 脚本语言: ...
- HTML 学习笔记 JavaScript (prototype)
原博地址:http://www.cnblogs.com/dolphinX/p/3286177.html 原博客的作者是一个非常牛逼的前端大神,我作为一个初学者,在此借助大神的博客进行自己的学习.在这里 ...
- Dom学习笔记
今天老师出了一道面试题目:取到表单里面的textbox的值,两种方法.知道一种,老师说的什么dom,我竟然不知道. 以前学html的时候,老师也重来没有提到dom的概念.javaScript只是学了一 ...
随机推荐
- mysql自动备份数据库
可以选择设置需要备份的库,自动备份压缩,自动删除 7 天前的备份,需要使用 crontab 定时执行. #!/bin/bash # 要备份的数据库名,多个数据库用空格分开 databases=(db1 ...
- 禁止选择文本和禁用右键 v3.0
禁止选中字体(注:在火狐浏览器没有起到效果作用) <script> function disableselect(e) { var omitformtags = ["input& ...
- 理解依赖注入（IOC）和学习Unity
资料1: IOC:英文全称:Inversion of Control,中文名称:控制反转,它还有个名字叫依赖注入(Dependency Injection). 作用:将各层的对象以松耦合的方式组织在一 ...
- 经典的C程序
程序一:打印出所有的“水仙花数”,所谓“水仙花数”是指一个三位数,其各位数字立方和等于该数 #include<stdio.h> void main(){ int a, b, c, i; ; ...
- CocoaPods安装和使用及问题：Setting up CocoaPods master repo－b
目录 CocoaPods是什么? 如何下载和安装CocoaPods? 如何使用CocoaPods? 场景1:利用CocoaPods,在项目中导入AFNetworking类库 场景2:如何正确编译运行一 ...
- Html DOM 常用属性和方法
Node对象的节点类型***************************************************接口 nodeType常量 nodeType值 备注Element Node ...
- 如何创建一个自定义jQuery插件
简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...
- 基于opencv的小波变换
基于opencv的小波变换 提供函数DWT()和IDWT(),前者完成任意层次的小波变换,后者完成任意层次的小波逆变换.输入图像要求必须是单通道浮点图像,对图像大小也有要求(1层变换:w,h必须是2的 ...
- Android手机上监听短信的两种方式
Android手机上监听短信有两种方式: 1. 接受系统的短信广播,操作短信内容. 优点:操作方便,适合简单的短信应用. 缺点:来信会在状态栏显示通知信息. AndroidManifest.xml: ...
- Metasploit渗透测试魔鬼训练营
首本中文原创Metasploit渗透测试著作,国内信息安全领域布道者和资深Metasploit渗透测试专家领衔撰写,极具权威性.以实践为导向,既详细讲解了Metasploit渗透测试的技术.流程.方法 ...