BOM,DOM常见操作和DHML
BOM
(Browser Object Model)浏览器对象模型,控制浏览器的一些行为
window对象
代表一个HTML文档
属性
页面导航的5个属性 self, parent, top, opener, frames
方法
弹出对话框 3个: alert, confirm, prompt
页面定时器. setInterval, clearInterval, setTimeout, clearTimeout
窗口打开关闭 open, close
History
浏览器的历史记录 前进, 后退.
属性 length
方法 forward 前进, back 后退, go 前进/后退
Location 浏览器地址栏 跳转,刷新
属性 href 改变当前页面位置
方法 reload 刷新
DOM
(Document Object Model) 文档对象模型 让JS 和 HTML ,css结合. 可以使用 JS 来控制他们.
原理 将页面中所有内容, 都封装成了对象.
Dom中的五类对象
Document 文档(重点)
Element 元素(重点)
Attribute 属性
Text 文本
Commons 注释
以上五类对象抽取了一个父类: Node
自身属性 nodeType, nodeName, nodeValue
导航属性
父找儿 firstChild, lastChild, childNodes
儿找父: parentNode (重要)
找兄弟: nextSibling, priviousSibling
获取Element的方式(重点):
从Document中获得ELement:
1.getElementById
2.getElementsByTagName
3.getElementsByClassName
4.getElementsByName
从Element中获得ELement:
1.getElementsByTagName
2.getElementsByClassName
DOM中的事件
给Element对象添加一个Function类型的属性. 那么这个Function的运行时机与属性的名称有关.例如:
属性名 触发时机
onClick 单击 ondblclick 双击 onload 当加载完毕 onchange 当内容改变 onblur 当失去焦点 onfocus 当得到焦点
在事件中我们想要获得事件的详情, 那么我们需要拿到Event(侦探)对象.
获得 事件函数是由浏览器在对应时机调用的, 浏览器在调用的时候, 已经Event传给我们了.对于我们来讲. 接受下就可以了.
属性
keyCode 按键的编码
button 鼠标按键的编码
clientX/clientX 鼠标所在位置的x, y轴坐标
方法
preventDefault 阻止默认行为. 例如 在点击submit按钮时,表单提交就是默认动作.
stopPropergation 停止事件的继续传播. 例如 在嵌套的DIV中, 点击里面的div, 同时也会触发外层div的onclick事件. 如果不想触发外层使用该方法.
Dom中常见操作
增
创建元素: document.createElement
添加: element.appendChild ==> 添加到末尾
element.insertBefore ==> 指定添加位置
删
removeAttribute 删除属性
removeChild 删除子节点
改
replaceChild 改元素
setAttribute 改属性
查
getAttribute 查属性值
getElementById
getElementsByTagName
getElementsByClassName
getElementsByName
DHTML技术
由微软提出, Dynamic HTML 动态网页技术. 整合了 HTML CSS Javascript DOM 4个技术.
可以理解为对DOM对象的增强: 增加了一些新的属性和方法.让我们开发更加便捷.
例如
一个元素的class属性, 我们想改变, 我们使用setAttribute("class","类名")可以. 但是DHTML提供了更方便的操作,className属性.
BOM,DOM常见操作和DHML相关推荐
- 【前端学习笔记DOM—DOM常见操作】
目录 前言 一.什么是DOM 二.常见的DOM操作 1.增 (1)新建 (2)插入 2.删 (1)删除子节点 (2)删除属性节点 3. 改 (1)替换节点 (2)修改属性值 4. 查 (1)通过id属 ...
- JS+BOM+DOM汇总
文章目录 前言:JavaScript的发展史 第一章:BOM 1.1.概念 1.2.组成:window.Navigator.Screen. History.Location 1.3.方法 第二章:DO ...
- JavaScript/Ajax/JQuery知识点(BOM/DOM/ScriptEngine/JS引擎),JSCore
捋顺JavaScript底层知识,重点讲解如原型.作用域.执行上下文.变量对象.this.闭包.按值传递.call.apply.bind.new.继承等难点概念?? JS中的继承?JS的原型模式, ...
- 前端JavaScript之DOM事件操作~都是干货
下面是对DOM操作事件的整理,希望可以帮助到有需要的小伙伴~ 文章目录 DOM事件操作 JavaScript的基础 事件 代码书写步骤 1.获取绑定事件的元素 2.绑定事件 3.编写事件 注意事项 D ...
- 前段之BOM ----DOM
前段之BOM ----DOM 一.介绍 BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM (D ...
- JQ DOM属性操作
DOM属性操作 一.常见的属性操作 属性列表 属性 版本 说明 attr() 1.0 设置或返回文档节点的属性. removeAttr() 1.0 移除文档节点的属性. prop() 1.6 设置或返 ...
- 【前端开发—JavaScript】——BOM/DOM
Bom Browser Object Model 浏览器 对象 模型 浏览器对象模型: 浏览器提供的一系列可以操作浏览器API BOM中的顶级对象 window (全局中的window) + 使用BO ...
- 路径,文件,目录,I/O常见操作汇总
摘要: 文件操作是程序中非常基础和重要的内容,而路径.文件.目录以及I/O都是在进行文件操作时的常见主题,这里想把这些常见的问题作个总结,对于每个问题,尽量提供一些解决方案,即使没有你想要的答案 ...
- python字典操作添加_Python字典常见操作实例小结【定义、添加、删除、遍历】
本文实例总结了python字典常见操作.分享给大家供大家参考,具体如下: 简单的字典: 字典就是键值对key-value组合. #字典 键值对组合 alien_0 ={'color':'green', ...
最新文章
- ubuntu数据库安装配置
- 计算字符串和文件的MD5值
- 如何禁止Linux内核的-O2编译选项【转】
- 10.19 qbxt国庆day3
- 各种说明方法的例句_说明方法和例句
- java学习(108):StringBuilder连接字符串和删除操作
- CSS图像绘制之:条纹背景(转)
- Golang练习题(自己认为比较不错的)
- oracle 时间戳最小单位,Oracle时间戳,最大值和最小值
- jpa级联添加_JPA中的一对多双向关联与级联操作
- Redis主从自动failover
- 面试考知识点,吾亦很难通过
- Enigma密码机初步解析
- 达梦数据库/DM7迁移之导出sql脚本
- USB加密狗复制USBTrace数据截取工具分享
- C语言 矩阵相似度
- C语言 —— int32_t uint32_t 及size_t
- 转:德鲁克:放弃昨天,是变革的第一原则
- python调用报表制作工具_Python如何使用xlwt制作一个表格
- 潮流话机直接对接讯时FXO
热门文章
- oracle各种字符集修改
- 【队列源码研究】消息队列beanstalkd源码详解
- 网页中如何显示版权符号
- 用tigervnc远程控制centos x64 6.2
- EF 4.1+MVC3+Jquery Ajax+Json.Net+JqueryUI+IUnitOfWork+Repository 学习DEMO(暂停更新)
- tomcat配置相关总结
- 分布式系统理论之两阶段提交协议
- 信息安全系统设计基础第三周学习总结
- MVVM架构~knockoutjs系列之为validation.js扩展minLength和maxLength
- 轻松解决Windows7声卡驱动不全问题